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>
+
+ $AccountMenuWrapper>
$NavAfter>
$Header>
);
@@ -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;
+ }
+`;