refactor(v3-uplift): shared market switcher on staking, flush page titles, themed analytics banner

- Staking header now renders the shared `MarketSwitcher` via new context-aware
  props (`hideTitleChrome`, `titlePrefix`) instead of the stale bespoke fork;
  delete `UmbrellaMarketSwitcher`. "Staking" is part of the clickable trigger.
- Navbar Staking menu: drop the hardcoded Paper border (use the standardized menu
  surface); hold the hover/underline while open via `[aria-expanded]` in navLinkSx.
- Remove leftover title left-margins (orphaned by commented-out logos) on the
  Staking, Safety Module, and Governance headers so titles sit flush-left.
- Rebuild AnalyticsBanner with theme-native MUI: bg-2 + shadow-stroke-2/shadow-high
  surface, outlined/contained buttons, h5 title + fg tokens; drop the
  react-cookie-consent rendering (consent still runs on the store + localStorage).

Also bundled (entangled in-progress work from parallel sessions): P3 color
tokenization across headers/theme (ChainAvailabilityText, SGhoHeader, TopBarNotify,
figmaColors, theme.tsx), the StakingMenu route-active class, and the governance
ProposalListHeader size="small".

Author: abjt14

src/components/Analytics/AnalyticsConsent.tsx

@@ -1,7 +1,6 @@
-import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
 import * as Sentry from '@sentry/nextjs';
 import React, { useEffect, useState } from 'react';
-import { CookieConsent as AnalyticsConsentBanner } from 'react-cookie-consent';
 import { Link } from 'src/components/primitives/Link';
 import { CONSENT_KEY } from 'src/store/analyticsSlice';
 import { useRootStore } from 'src/store/root';
@@ -30,8 +29,6 @@ export default function AnalyticsBanner() {
     return () => clearTimeout(timerId);
   }, []);
 
-  const theme = useTheme();
-
   const { breakpoints } = useTheme();
   const isMobile = useMediaQuery(breakpoints.down('sm'));
 
@@ -52,98 +49,62 @@ export default function AnalyticsBanner() {
   const hasUserMadeChoice =
     typeof window !== 'undefined' && localStorage.getItem(CONSENT_KEY) !== null;
 
-  // Note: If they have already chosen don't show again unless configured from footer
-  if (hasUserMadeChoice) return null;
+  // Hide once the user has made a choice. Reopening from the footer clears the stored choice and
+  // reopens analyticsConfigOpen, which brings the banner back.
+  if (hasUserMadeChoice || !analyticsConfigOpen) return null;
 
   return (
-    <>
-      <AnalyticsConsentBanner
-        buttonText={<Typography>Allow analytics </Typography>}
-        declineButtonText={<Typography>Opt-out</Typography>}
-        disableStyles={true}
-        visible={analyticsConfigOpen ? 'show' : 'hidden'}
-        flipButtons
-        style={{
-          background: figVars['surface-elevated'],
-          bottom: isMobile ? '24px' : '24px',
-          right: isMobile ? '50%' : '24px',
-          left: isMobile ? '50%' : 'auto',
-          position: 'fixed',
-          width: '400px',
-          // height: '184px',
-          gap: '16px',
-          display: 'flex',
-          flexDirection: 'column',
-          flexFlow: 'column',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          color: figVars['fg-1'],
-          marginBottom: '16px',
-          fontSize: '14px',
-          lineHeight: '20.02px',
-          padding: '16px 16px',
-          zIndex: 100,
-          borderRadius: '12px',
-          border: '0.5px solid rgba(235, 235, 239, 0.42)',
-          boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)',
-          transition: 'transform 0.5s ease-out', // Add this
-
-          transform: bannerVisible
-            ? isMobile
-              ? 'translateX(-50%)'
-              : 'none'
-            : 'translateX(100%) translateY(100%)',
-        }}
-        buttonStyle={{
-          background: theme.palette.mode === 'dark' ? '#F7F7F9' : '#383D51',
-          color: theme.palette.mode === 'dark' ? '#383D51' : '#F7F7F9',
-
-          fontSize: '14px',
-          borderRadius: '4px',
-          margin: '0px',
-          border: '1px solid #000',
-          width: '172px',
-          height: '36px',
-          fontWeight: '700',
-          cursor: 'pointer',
-        }}
-        declineButtonStyle={{
-          // background:  '#F7F7F9',
-          background: theme.palette.mode === 'dark' ? '#383D51' : '#F7F7F9',
-          color: theme.palette.mode === 'dark' ? '#EAEBEF' : '#383D51',
-
-          fontFamily: 'Inter',
-          fontWeight: '500',
-          lineHeight: '24px',
-          fontSize: '14px',
-          borderRadius: '4px',
-          margin: '10px',
-          // padding: '10px 20px',
-          border: `1px solid ${theme.palette.mode === 'dark' ? '#383D51' : '#EAEBEF'}`,
-          width: '172px',
-          height: '36px',
-          // padding: '0px',
-          cursor: 'pointer',
-        }}
-        enableDeclineButton
-        onDecline={() => {
-          optOutAnalytics();
-        }}
-        onAccept={() => {
-          optInAnalytics();
-        }}
-        cookieName={CONSENT_KEY}
-      >
-        <Box>
+    <Box
+      sx={{
+        position: 'fixed',
+        zIndex: 100,
+        bottom: '24px',
+        ...(isMobile ? { left: '50%' } : { right: '24px' }),
+        width: '400px',
+        maxWidth: 'calc(100vw - 48px)',
+        p: '1.25rem',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1.25rem',
+        borderRadius: '0.625rem',
+        backgroundColor: figVars['bg-2'],
+        boxShadow: `0 0 0 1px ${figVars['shadow-stroke-2']}, 0 6px 32px 0 ${figVars['shadow-high']}`,
+        transition: 'transform 0.5s ease-out',
+        transform: bannerVisible
+          ? isMobile
+            ? 'translateX(-50%)'
+            : 'none'
+          : 'translateX(100%) translateY(100%)',
+      }}
+    >
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <Typography variant="h5" sx={{ color: 'fg-1' }}>
+          We value your privacy
+        </Typography>
+        <Typography
+          sx={{ color: 'fg-3', fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.1875rem' }}
+        >
           We may employ on-the-spot tracking techniques during your browsing session to collect data
           on your interactions, preferences, and behaviour. This data helps us personalise your
-          experience and improve our services. See our
-          <Link sx={{ color: 'info.main' }} href="https://aave.com/privacy-policy/">
-            {' '}
-            Privacy Policy.
+          experience and improve our services. See our{' '}
+          <Link
+            href="https://aave.com/privacy-policy/"
+            sx={{ textDecoration: 'underline', color: 'fg-3' }}
+          >
+            Privacy Policy
           </Link>
-        </Box>
-      </AnalyticsConsentBanner>
-    </>
+          .
+        </Typography>
+      </Box>
+
+      <Box sx={{ display: 'flex', gap: '1rem' }}>
+        <Button variant="outlined" onClick={() => optOutAnalytics()} sx={{ flex: 1 }}>
+          Opt-out
+        </Button>
+        <Button variant="contained" onClick={() => optInAnalytics()} sx={{ flex: 1 }}>
+          Allow analytics
+        </Button>
+      </Box>
+    </Box>
   );
 }

src/components/ChainAvailabilityText.tsx

@@ -25,7 +25,7 @@ export const ChainAvailabilityText: React.FC<ChainAvailabilityTextProps> = ({
 
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', ...wrapperSx }}>
-      <Typography variant="subheader2" sx={{ mr: 2, color: '#C0CBF6' }}>
+      <Typography variant="subheader2" sx={{ mr: 2, color: 'purple-1' }}>
         <Trans>Available on</Trans>
       </Typography>
       <Box
@@ -36,7 +36,7 @@ export const ChainAvailabilityText: React.FC<ChainAvailabilityTextProps> = ({
       >
         <img src={network.networkLogoPath} height="100%" width="100%" alt="Ethereum Mainnet" />
       </Box>
-      <Typography variant="subheader2" sx={{ ml: 1, color: '#C0CBF6' }}>
+      <Typography variant="subheader2" sx={{ ml: 1, color: 'purple-1' }}>
         {networkToTextMapper(chainId, network)}
       </Typography>
     </Box>

src/components/MarketSwitcher.tsx

@@ -189,7 +189,23 @@ const getMarketOrder = (marketId: CustomMarket): number => {
 const AAVE_PRO_URL = 'https://pro.aave.com/';
 const AAVE_PRO_LOGO = '/icons/markets/aave-pro.png';
 
-export const MarketSwitcher = () => {
+interface MarketSwitcherProps {
+  /**
+   * Hide the page-title-only chrome (the "Instance"/"Market" suffix and the market
+   * description blurb) when the switcher sits next to an existing page title, e.g. the
+   * Staking header. Default false = full title treatment (homepage).
+   */
+  hideTitleChrome?: boolean;
+  /**
+   * Optional label rendered inside the trigger, before the market logo and at the same
+   * size as the market name, so it reads and clicks as one unit (e.g. "Staking" on the
+   * Staking header). Prefer this over a sibling <Typography> next to <MarketSwitcher />,
+   * which would leave the label outside the clickable/hoverable trigger.
+   */
+  titlePrefix?: React.ReactNode;
+}
+
+export const MarketSwitcher = ({ hideTitleChrome = false, titlePrefix }: MarketSwitcherProps) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [showLegacy, setShowLegacy] = useState(false);
@@ -775,6 +791,14 @@ export const MarketSwitcher = () => {
         }}
       >
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          {titlePrefix && (
+            <Typography
+              variant={upToLG ? 'display1' : 'h1'}
+              sx={{ fontSize: downToXSM ? '1.55rem' : undefined, color: 'fg-1', mr: 3 }}
+            >
+              {titlePrefix}
+            </Typography>
+          )}
           <MarketLogo
             size={upToLG ? 32 : 28}
             logo={currentLogo}
@@ -790,9 +814,11 @@ export const MarketSwitcher = () => {
               }}
             >
               {currentMarketNaming.name} {currentMarketData.isFork ? 'Fork' : ''}
-              {upToLG && (currentMarket === 'proto_mainnet_v3' || currentMarket === 'proto_lido_v3')
-                ? 'Instance'
-                : ' Market'}
+              {!hideTitleChrome &&
+                (upToLG &&
+                (currentMarket === 'proto_mainnet_v3' || currentMarket === 'proto_lido_v3')
+                  ? 'Instance'
+                  : ' Market')}
             </Typography>
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
               {currentMarketData.v3 ? (
@@ -827,7 +853,7 @@ export const MarketSwitcher = () => {
           </Box>
         </Box>
 
-        {marketBlurbs[currentMarket] && (
+        {!hideTitleChrome && marketBlurbs[currentMarket] && (
           <Typography
             sx={{
               color: 'fg-2',

src/layouts/TopBarNotify.tsx

@@ -79,6 +79,8 @@ export default function TopBarNotify({ campaigns, routeCampaigns }: TopBarNotify
     }
   }, [currentCampaign, currentChainId]);
 
+  console.log('currentCampaign', currentCampaign);
+
   // If no campaign is configured for the current network, don't show anything
   if (!currentCampaign) {
     return null;

src/layouts/components/StakingMenu.tsx

@@ -2,6 +2,8 @@ import { Trans } from '@lingui/macro';
 import { Button, SvgIcon, Typography } from '@mui/material';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { clsx } from 'clsx';
+import { useRouter } from 'next/router';
 import React from 'react';
 import { ChevronDownIcon } from 'src/components/icons/ChevronDownIcon';
 import { useRootStore } from 'src/store/root';
@@ -18,6 +20,10 @@ interface StakingMenuProps {
 
 export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) {
   const trackEvent = useRootStore((store) => store.trackEvent);
+  const router = useRouter();
+  // The trigger isn't a Link, so it never gets the route-aware `active` class on its own.
+  // Mark it active when the current route is one of the menu's destinations.
+  const isActive = router.pathname === ROUTES.staking || router.pathname === ROUTES.safetyModule;
 
   const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
   const open = Boolean(anchorEl);
@@ -69,6 +75,7 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) {
       <Button
         aria-label="staking menu"
         id="staking-button"
+        className={clsx({ active: isActive })}
         aria-controls={open ? 'staking-menu' : undefined}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="true"
@@ -97,13 +104,6 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) {
         open={open}
         onClose={handleClose}
         keepMounted={true}
-        sx={{
-          '& .MuiPaper-root': {
-            bgcolor: 'surface-elevated',
-            border: '1px solid',
-            borderColor: 'border-2',
-          },
-        }}
       >
         <MenuItem
           component={Link}

src/layouts/components/navLinkSx.ts

@@ -15,11 +15,12 @@ export const navLinkSx = (padding: string): SystemStyleObject<Theme> => ({
   '.active&': {
     color: figVars['fg-1'],
   },
-  '&:hover': {
+  // An open dropdown trigger ([aria-expanded="true"], e.g. the Staking menu) keeps the hovered look.
+  '&:hover, &[aria-expanded="true"]': {
     backgroundColor: 'transparent',
     color: figVars['fg-1'],
   },
-  '.active&:after, &:hover&:after': {
+  '.active&:after, &:hover&:after, &[aria-expanded="true"]&:after': {
     transform: 'scaleX(1)',
     transformOrigin: 'bottom left',
   },

src/locales/en/messages.po

@@ -1357,7 +1357,6 @@ msgstr "You have assets with zero LTV that are blocking this operation. Please w
 #: src/modules/staking/SavingsGhoProgram.tsx
 #: src/modules/umbrella/StakeCooldownModalContent.tsx
 #: src/modules/umbrella/StakeCooldownModalContent.tsx
-#: src/modules/umbrella/UmbrellaMarketSwitcher.tsx
 msgid "{0}"
 msgstr "{0}"
 

src/modules/governance/GovernanceTopPanel.tsx

@@ -51,16 +51,12 @@ export const GovernanceTopPanel = () => {
         <Box mb={4}>
           <ChainAvailabilityText wrapperSx={{ mb: 4 }} chainId={ChainId.mainnet} />
           <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
-            {/* <img src={`/aave.svg`} width="32px" height="32px" alt="" /> */}
-            <Typography
-              variant={downToXSM ? 'h2' : upToLG ? 'display1' : 'h1'}
-              sx={{ ml: 2, mr: 3 }}
-            >
+            <Typography variant={downToXSM ? 'h2' : upToLG ? 'display1' : 'h1'}>
               <Trans>Aave Governance</Trans>
             </Typography>
           </Box>
 
-          <Typography sx={{ color: '#8E92A3', maxWidth: '824px' }}>
+          <Typography sx={{ color: 'fg-3', maxWidth: '824px' }}>
             <Trans>
               Aave is a fully decentralized, community governed protocol by the AAVE token-holders.
               AAVE token-holders collectively discuss, propose, and vote on upgrades to the
@@ -70,7 +66,7 @@ export const GovernanceTopPanel = () => {
             <Link
               onClick={() => trackEvent(GENERAL.EXTERNAL_LINK, { Link: 'FAQ Docs Governance' })}
               href="https://aave.com/docs/ecosystem/governance"
-              sx={{ textDecoration: 'underline', color: '#8E92A3' }}
+              sx={{ textDecoration: 'underline', color: 'fg-3' }}
             >
               <Trans>documentation</Trans>
             </Link>

src/modules/governance/ProposalListHeader.tsx

@@ -40,7 +40,13 @@ export const ProposalListHeaderDesktop: React.FC<ProposalListHeaderElementProps>
       <Typography>
         <Trans>Filter</Trans>
       </Typography>
-      <Select id="filter" value={proposalFilter} sx={{ minWidth: 140 }} onChange={handleChange}>
+      <Select
+        id="filter"
+        value={proposalFilter}
+        sx={{ minWidth: 140 }}
+        onChange={handleChange}
+        size="small"
+      >
         <MenuItem value="all">
           <Trans>All proposals</Trans>
         </MenuItem>
@@ -78,7 +84,13 @@ export const ProposalListHeaderMobile: React.FC<ProposalListHeaderElementProps>
         <Typography>
           <Trans>Filter</Trans>
         </Typography>
-        <Select id="filter" value={proposalFilter} sx={{ minWidth: 140 }} onChange={handleChange}>
+        <Select
+          id="filter"
+          value={proposalFilter}
+          sx={{ minWidth: 140 }}
+          onChange={handleChange}
+          size="small"
+        >
           <MenuItem value="all">
             <Trans>All proposals</Trans>
           </MenuItem>

src/modules/sGho/SGhoHeader.tsx

@@ -68,7 +68,7 @@ export const SGHOHeader: React.FC = () => {
             </Typography>
           </Box>
 
-          <Typography sx={{ color: '#8E92A3', maxWidth: '824px' }}>
+          <Typography sx={{ color: 'fg-3', maxWidth: '824px' }}>
             <Trans>
               Deposit GHO into Savings GHO (sGHO) and earn{' '}
               <Box component="span" sx={{ color: '#338E3C', fontWeight: 'bold' }}>