diff --git a/src/components/ComplianceBanner.tsx b/src/components/ComplianceBanner.tsx index cd91d03dcf..e792cfebef 100644 --- a/src/components/ComplianceBanner.tsx +++ b/src/components/ComplianceBanner.tsx @@ -114,7 +114,7 @@ export const ComplianceBanner = ({ className }: { className?: string }) => { return ( <$ComplianceBanner className={className}> -
+ {/*
*/} {isTablet && ( { @@ -9,7 +7,7 @@ export const RestrictionWarning = () => { }; const $RestrictedWarning = styled(ComplianceBanner)` - ${layoutMixins.sticky} - --stickyArea-totalInsetTop: var(--page-currentHeaderHeight); + /* TEMPORARY: Removed sticky behavior */ + position: static !important; /* Force non-sticky */ height: var(--restriction-warning-currentHeight); `; diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx index ab46481ce0..039d62ecd9 100644 --- a/src/layout/Header/HeaderDesktop.tsx +++ b/src/layout/Header/HeaderDesktop.tsx @@ -33,7 +33,8 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu'; import { getOnboardingState } from '@/state/accountSelectors'; import { useAppDispatch, useAppSelector } from '@/state/appTypes'; -import { getHasSeenLaunchIncentives } from '@/state/appUiConfigsSelectors'; +import { AppTheme, setAppThemeSetting } from '@/state/appUiConfigs'; +import { getAppTheme, getHasSeenLaunchIncentives } from '@/state/appUiConfigsSelectors'; import { openDialog } from '@/state/dialogs'; import { isTruthy } from '@/lib/isTruthy'; @@ -46,9 +47,15 @@ export const HeaderDesktop = () => { const onboardingState = useAppSelector(getOnboardingState); const { complianceState } = useComplianceState(); const isSpotEnabled = useEnableSpot(); + const currentTheme = useAppSelector(getAppTheme); const hasSeenLaunchIncentives = useAppSelector(getHasSeenLaunchIncentives); + const handleThemeToggle = () => { + const newTheme = currentTheme === AppTheme.Dark ? AppTheme.Light : AppTheme.Dark; + dispatch(setAppThemeSetting(newTheme)); + }; + const navItems = [ { group: 'navigation', @@ -68,16 +75,11 @@ export const HeaderDesktop = () => { label: stringGetter({ key: STRING_KEYS.MARKETS }), href: AppRoute.Markets, }, - { + onboardingState === OnboardingState.AccountConnected && { value: 'PORTFOLIO', label: stringGetter({ key: STRING_KEYS.PORTFOLIO }), href: AppRoute.Portfolio, }, - { - value: 'VAULT', - label: stringGetter({ key: STRING_KEYS.MEGAVAULT }), - href: AppRoute.Vault, - }, { value: 'REWARDS', label: stringGetter({ key: STRING_KEYS.REWARDS }), @@ -90,6 +92,12 @@ export const HeaderDesktop = () => { value: 'MORE', label: stringGetter({ key: STRING_KEYS.MORE }), subitems: [ + { + value: 'VAULT', + slotBefore: , + label: stringGetter({ key: STRING_KEYS.MEGAVAULT }), + href: AppRoute.Vault, + }, { value: 'DOCUMENTATION', slotBefore: , @@ -172,22 +180,26 @@ export const HeaderDesktop = () => { )} - <$IconButton - shape={ButtonShape.Rectangle} - iconName={IconName.HelpCircle} - onClick={() => dispatch(openDialog(DialogTypes.Help()))} - /> + {onboardingState === OnboardingState.AccountConnected && ( + + } + /> + )} - - } + <$ThemeToggleButton + shape={ButtonShape.Rectangle} + iconName={currentTheme === AppTheme.Dark ? IconName.Sun : IconName.Moon} + onClick={handleThemeToggle} /> - + <$AccountMenuWrapper> + + ); @@ -267,7 +279,7 @@ const $LogoLink = styled(Link)` > div { margin: auto; width: auto; - height: 69%; + height: 85%; } `; @@ -287,10 +299,17 @@ const $NavAfter = styled.div` const $IconButton = styled(IconButton)<{ size?: string }>` ${headerMixins.button} --button-border: none; - --button-icon-size: 1rem; + --button-icon-size: 1.15rem; --button-padding: 0 0.5em; `; +const $ThemeToggleButton = styled(IconButton)` + ${headerMixins.button} + --button-border: none; + --button-icon-size: 1.25em; + --button-padding: 0.33rem 0.5rem; +`; + const $LanguageSelector = styled(LanguageSelector)` ${headerMixins.dropdownTrigger} --trigger-padding: 0.33rem 0.5rem; @@ -304,3 +323,13 @@ const $DepositButton = styled(Button)` color: var(--color-white) !important; } `; + +const $AccountMenuWrapper = styled.div` + display: flex; + align-items: center; + + > * { + transform: scale(1.15); + transform-origin: center; + } +`;