feat: BONK redesign polish (#12)

* feat: ensure compliance banner is not sticky on scroll, remove absolute gradient bg and update bg color of banner

* feat: conditionally render NotificationsMenu and Portfolio tab based on onboarding state in HeaderDesktop

* feat: reorganize header, move megavault tab in more, remove help icon, slightly increase size of logo

* feat: add theme toggle functionality to header, allowing users to switch between light and dark modes

* chore: handle lint error

Author: godzidcrypto

src/components/ComplianceBanner.tsx

@@ -114,7 +114,7 @@ export const ComplianceBanner = ({ className }: { className?: string }) => {
 
   return (
     <$ComplianceBanner className={className}>
-      <div tw="absolute inset-0 z-[-1] bg-color-gradient-error" />
+      {/* <div tw="absolute inset-0 z-[-1] bg-color-gradient-error" /> */}
       {isTablet && (
         <IconButton
           tw="absolute right-0.25 top-0.25 text-color-text-2"
@@ -159,7 +159,7 @@ const $ComplianceBanner = styled.div`
 
   font: var(--font-small-book);
   border-left: 4px solid var(--color-error);
-  background-color: var(--color-layer-2);
+  background-color: var(--color-gradient-error);
   color: var(--color-error);
 
   @media ${breakpoints.tablet} {

src/components/RestrictionWarning.tsx

@@ -1,15 +1,13 @@
 import styled from 'styled-components';
 
-import { layoutMixins } from '@/styles/layoutMixins';
-
 import { ComplianceBanner } from './ComplianceBanner';
 
 export const RestrictionWarning = () => {
   return <$RestrictedWarning />;
 };
 
 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);
 `;

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: <Icon iconName={IconName.Bank} />,
+              label: stringGetter({ key: STRING_KEYS.MEGAVAULT }),
+              href: AppRoute.Vault,
+            },
             {
               value: 'DOCUMENTATION',
               slotBefore: <Icon iconName={IconName.Terminal} />,
@@ -172,22 +180,26 @@ export const HeaderDesktop = () => {
           <MobileDownloadLinks />
         )}
 
-        <$IconButton
-          shape={ButtonShape.Rectangle}
-          iconName={IconName.HelpCircle}
-          onClick={() => dispatch(openDialog(DialogTypes.Help()))}
-        />
+        {onboardingState === OnboardingState.AccountConnected && (
+          <NotificationsMenu
+            slotTrigger={
+              <$IconButton
+                shape={ButtonShape.Rectangle}
+                iconComponent={BellStrokeIcon as React.ElementType}
+              />
+            }
+          />
+        )}
 
-        <NotificationsMenu
-          slotTrigger={
-            <$IconButton
-              shape={ButtonShape.Rectangle}
-              iconComponent={BellStrokeIcon as React.ElementType}
-            />
-          }
+        <$ThemeToggleButton
+          shape={ButtonShape.Rectangle}
+          iconName={currentTheme === AppTheme.Dark ? IconName.Sun : IconName.Moon}
+          onClick={handleThemeToggle}
         />
 
-        <AccountMenu />
+        <$AccountMenuWrapper>
+          <AccountMenu />
+        </$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;
+  }
+`;