[WIP] V3 uplift

pages/dashboard.page.tsx

@@ -1,8 +1,8 @@
 import { Trans } from '@lingui/macro';
 import { Box, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import StyledToggleButton from 'src/components/StyledToggleButton';
-import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
+import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
+import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 import { useRootStore } from 'src/store/root';
 import { useShallow } from 'zustand/shallow';
 
@@ -41,24 +41,24 @@ export default function Dashboard() {
               mb: { xs: 3, xsm: 4 },
             }}
           >
-            <StyledToggleButtonGroup
+            <StyledTxModalToggleGroup
               color="primary"
               value={mode}
               exclusive
               onChange={(_, value) => setMode(value)}
-              sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
+              sx={{ width: { xs: '100%', xsm: '359px' } }}
             >
-              <StyledToggleButton value="supply" disabled={mode === 'supply'}>
+              <StyledTxModalToggleButton value="supply" disabled={mode === 'supply'}>
                 <Typography variant="subheader1">
                   <Trans>Supply</Trans>
                 </Typography>
-              </StyledToggleButton>
-              <StyledToggleButton value="borrow" disabled={mode === 'borrow'}>
+              </StyledTxModalToggleButton>
+              <StyledTxModalToggleButton value="borrow" disabled={mode === 'borrow'}>
                 <Typography variant="subheader1">
                   <Trans>Borrow</Trans>
                 </Typography>
-              </StyledToggleButton>
-            </StyledToggleButtonGroup>
+              </StyledTxModalToggleButton>
+            </StyledTxModalToggleGroup>
           </Box>
         )}
 

pages/dev/components/[section].page.tsx

@@ -0,0 +1,30 @@
+import { Typography } from '@mui/material';
+import { useRouter } from 'next/router';
+import { ShowcaseLayout } from 'src/modules/dev/ComponentShowcase/components/ShowcaseLayout';
+import { SHOWCASE_SECTIONS } from 'src/modules/dev/ComponentShowcase/utils/registry';
+
+/**
+ * One route per showcase section: `/dev/components/<slug>`. Renders only the active
+ * section (lazily loaded via the registry) inside the shared sidebar layout. Dev-only.
+ */
+export default function ComponentShowcaseSectionPage() {
+  const router = useRouter();
+
+  if (process.env.NODE_ENV !== 'development') {
+    return null;
+  }
+
+  const slug = typeof router.query.section === 'string' ? router.query.section : '';
+  const section = SHOWCASE_SECTIONS.find((s) => s.slug === slug);
+  const ActiveSection = section?.Component;
+
+  return (
+    <ShowcaseLayout activeSlug={slug}>
+      {ActiveSection ? (
+        <ActiveSection />
+      ) : router.isReady ? (
+        <Typography variant="h2">Section not found</Typography>
+      ) : null}
+    </ShowcaseLayout>
+  );
+}

pages/dev/components/index.page.tsx

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import { SHOWCASE_SECTIONS } from 'src/modules/dev/ComponentShowcase/utils/registry';
+
+// `/dev/components` → redirect to the first section. Dev-only.
+export default function ComponentShowcaseIndexPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      router.replace(`/dev/components/${SHOWCASE_SECTIONS[0].slug}`);
+    }
+  }, [router]);
+
+  return null;
+}

pages/governance/index.governance.tsx

@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro';
 import { Grid, Typography, useMediaQuery, useTheme } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
-import StyledToggleButton from 'src/components/StyledToggleButton';
-import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
+import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
+import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 import { MainLayout } from 'src/layouts/MainLayout';
 import { GovernanceTopPanel } from 'src/modules/governance/GovernanceTopPanel';
 import { ProposalsV3List } from 'src/modules/governance/ProposalsV3List';
@@ -44,29 +44,28 @@ export default function Governance() {
     <>
       <GovernanceTopPanel />
       <ContentContainer>
-        <StyledToggleButtonGroup
+        <StyledTxModalToggleGroup
           color="primary"
           value={mode}
           exclusive
           onChange={(_, value) => setMode(value)}
           sx={{
             width: { xs: '100%', xsm: '359px' },
-            height: '44px',
             mb: 4,
             display: { xs: 'flex', lg: 'none' },
           }}
         >
-          <StyledToggleButton value={Tabs.PROPOSALS} disabled={mode === Tabs.PROPOSALS}>
+          <StyledTxModalToggleButton value={Tabs.PROPOSALS} disabled={mode === Tabs.PROPOSALS}>
             <Typography variant="subheader1">
               <Trans>Proposals</Trans>
             </Typography>
-          </StyledToggleButton>
-          <StyledToggleButton value={Tabs.INFORMATION} disabled={mode === Tabs.INFORMATION}>
+          </StyledTxModalToggleButton>
+          <StyledTxModalToggleButton value={Tabs.INFORMATION} disabled={mode === Tabs.INFORMATION}>
             <Typography variant="subheader1">
               <Trans>Your info</Trans>
             </Typography>
-          </StyledToggleButton>
-        </StyledToggleButtonGroup>
+          </StyledTxModalToggleButton>
+        </StyledTxModalToggleGroup>
         {isMobile ? (
           mode === Tabs.PROPOSALS ? (
             <ProposalsV3List />

pages/markets.page.tsx

@@ -55,7 +55,6 @@ export default function Markets() {
           flexDirection: 'column',
           alignItems: 'center',
           flex: 1,
-          mt: { xs: '-32px', lg: '-46px', xl: '-44px', xxl: '-48px' },
         }}
       >
         <MarketContainer>

pages/reserve-overview.page.tsx

@@ -3,8 +3,8 @@ import { Box, Typography } from '@mui/material';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import StyledToggleButton from 'src/components/StyledToggleButton';
-import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
+import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
+import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 import {
   ComputedReserveData,
   ReserveWithId,
@@ -102,24 +102,24 @@ export default function ReserveOverview() {
             mb: { xs: 3, xsm: 4 },
           }}
         >
-          <StyledToggleButtonGroup
+          <StyledTxModalToggleGroup
             color="primary"
             value={mode}
             exclusive
             onChange={(_, value) => setMode(value)}
-            sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
+            sx={{ width: { xs: '100%', xsm: '359px' } }}
           >
-            <StyledToggleButton value="overview" disabled={mode === 'overview'}>
+            <StyledTxModalToggleButton value="overview" disabled={mode === 'overview'}>
               <Typography variant="subheader1">
                 <Trans>Overview</Trans>
               </Typography>
-            </StyledToggleButton>
-            <StyledToggleButton value="actions" disabled={mode === 'actions'}>
+            </StyledTxModalToggleButton>
+            <StyledTxModalToggleButton value="actions" disabled={mode === 'actions'}>
               <Typography variant="subheader1">
                 <Trans>Your info</Trans>
               </Typography>
-            </StyledToggleButton>
-          </StyledToggleButtonGroup>
+            </StyledTxModalToggleButton>
+          </StyledTxModalToggleGroup>
         </Box>
 
         <Box sx={{ display: 'flex' }}>

pages/safety-module.page.tsx

@@ -11,8 +11,8 @@ import { ConnectWalletPaperStaking } from 'src/components/ConnectWalletPaperStak
 import { ContentContainer } from 'src/components/ContentContainer';
 import { Link } from 'src/components/primitives/Link';
 import { Warning } from 'src/components/primitives/Warning';
-import StyledToggleButton from 'src/components/StyledToggleButton';
-import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup';
+import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
+import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
 import { useUserStakeUiData } from 'src/hooks/stake/useUserStakeUiData';
 import { useModalContext } from 'src/hooks/useModal';
@@ -147,24 +147,24 @@ export default function Staking() {
                 mb: { xs: 3, xsm: 4 },
               }}
             >
-              <StyledToggleButtonGroup
+              <StyledTxModalToggleGroup
                 color="primary"
                 value={mode}
                 exclusive
                 onChange={(_, value) => setMode(value)}
                 sx={{ width: { xs: '100%', xsm: '359px' } }}
               >
-                <StyledToggleButton value="aave" disabled={mode === 'aave'}>
+                <StyledTxModalToggleButton value="aave" disabled={mode === 'aave'}>
                   <Typography variant="subheader1">
                     <Trans>Stake AAVE</Trans>
                   </Typography>
-                </StyledToggleButton>
-                <StyledToggleButton value="bpt" disabled={mode === 'bpt'}>
+                </StyledTxModalToggleButton>
+                <StyledTxModalToggleButton value="bpt" disabled={mode === 'bpt'}>
                   <Typography variant="subheader1">
                     <Trans>Stake ABPT</Trans>
                   </Typography>
-                </StyledToggleButton>
-              </StyledToggleButtonGroup>
+                </StyledTxModalToggleButton>
+              </StyledTxModalToggleGroup>
             </Box>
 
             <Grid container spacing={4}>

src/components/Analytics/AnalyticsConsent.tsx

@@ -5,6 +5,7 @@ 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';
+import { figVars } from 'src/utils/figmaColors';
 import { useAccount } from 'wagmi';
 import { useShallow } from 'zustand/shallow';
 
@@ -63,7 +64,7 @@ export default function AnalyticsBanner() {
         visible={analyticsConfigOpen ? 'show' : 'hidden'}
         flipButtons
         style={{
-          background: theme.palette.background.paper,
+          background: figVars['surface-elevated'],
           bottom: isMobile ? '24px' : '24px',
           right: isMobile ? '50%' : '24px',
           left: isMobile ? '50%' : 'auto',
@@ -76,7 +77,7 @@ export default function AnalyticsBanner() {
           flexFlow: 'column',
           justifyContent: 'space-between',
           alignItems: 'center',
-          color: theme.palette.text.primary,
+          color: figVars['fg-1'],
           marginBottom: '16px',
           fontSize: '14px',
           lineHeight: '20.02px',
@@ -137,7 +138,7 @@ export default function AnalyticsBanner() {
           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: theme.palette.info.main }} href="https://aave.com/privacy-policy/">
+          <Link sx={{ color: 'info.main' }} href="https://aave.com/privacy-policy/">
             {' '}
             Privacy Policy.
           </Link>

src/components/AssetCategoryMultiselect.tsx

@@ -1,18 +1,17 @@
-import { ChevronDownIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import {
   Box,
   Button,
   Checkbox,
   Popover,
-  SvgIcon,
   SxProps,
   Theme,
   Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
+import { ChevronUpDownIcon } from 'src/components/icons/ChevronUpDownIcon';
 import { AssetCategory } from 'src/modules/markets/utils/assetCategories';
 import { useRootStore } from 'src/store/root';
 
@@ -80,24 +79,15 @@ export const AssetCategoryMultiSelect = ({
         onClick={handleClick}
         disabled={disabled}
         variant="outlined"
-        disableRipple
         sx={{
-          height: '38px',
-          minWidth: 'auto',
           width: sm ? '100%' : 'unset',
-          display: 'flex',
           justifyContent: sm ? 'space-between' : 'center',
-          alignItems: 'center',
-          gap: 3,
-          p: '6px 12px',
+          gap: 2,
           textTransform: 'none',
           ...sx,
         }}
       >
-        <Typography
-          variant="buttonM"
-          sx={{ fontSize: '0.875rem', whiteSpace: 'nowrap', flexShrink: 0 }}
-        >
+        <Typography variant="buttonM" sx={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
           {selectedCount === 0 ? (
             <Trans>All Categories</Trans>
           ) : selectedCount === 1 ? (
@@ -107,16 +97,7 @@ export const AssetCategoryMultiSelect = ({
           )}
         </Typography>
 
-        <SvgIcon
-          sx={{
-            width: '14px',
-            height: '14px',
-            color: 'text.primary',
-            flexShrink: 0,
-          }}
-        >
-          <ChevronDownIcon />
-        </SvgIcon>
+        <ChevronUpDownIcon sx={{ fontSize: 18, color: 'fg-3', flexShrink: 0 }} />
       </Button>
 
       <Popover
@@ -134,7 +115,7 @@ export const AssetCategoryMultiSelect = ({
         PaperProps={{
           sx: {
             width: '240px',
-            backgroundColor: 'background.paper',
+            backgroundColor: 'surface-elevated',
             boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)',
             borderRadius: '4px',
             mt: 2,
@@ -164,7 +145,7 @@ export const AssetCategoryMultiSelect = ({
               variant="subheader2"
               sx={{
                 flexGrow: 1,
-                color: 'text.secondary',
+                color: 'fg-2',
                 fontWeight: 500,
                 fontSize: '12px',
                 lineHeight: '16px',
@@ -175,18 +156,17 @@ export const AssetCategoryMultiSelect = ({
             </Typography>
             <Button
               onClick={handleReset}
-              disableRipple
               sx={{
                 minWidth: 'auto',
                 padding: 0,
-                color: selectedCount > 0 ? 'text.primary' : 'text.disabled',
+                color: selectedCount > 0 ? 'fg-1' : 'fg-4',
                 textDecoration: selectedCount > 0 ? 'underline' : 'none',
                 textUnderlineOffset: '3px',
                 textTransform: 'none',
 
                 '&:hover': {
                   backgroundColor: 'transparent',
-                  color: selectedCount > 0 ? 'text.primary' : 'text.disabled',
+                  color: selectedCount > 0 ? 'fg-1' : 'fg-4',
                   textDecoration: selectedCount > 0 ? 'underline' : 'none',
                 },
               }}
@@ -223,7 +203,7 @@ export const AssetCategoryMultiSelect = ({
                 <Typography
                   variant="subheader1"
                   sx={{
-                    color: 'text.primary',
+                    color: 'fg-1',
                     fontWeight: 600,
                     fontSize: '14px',
                     lineHeight: '20px',
@@ -240,7 +220,7 @@ export const AssetCategoryMultiSelect = ({
                   width: '20px',
                   height: '20px',
                   padding: 0,
-                  color: 'text.muted',
+                  color: 'fg-3',
                   cursor: 'pointer',
                   '&.Mui-checked': {
                     color: 'primary.main',

src/components/ConnectWalletPaper.tsx

@@ -39,7 +39,7 @@ export const ConnectWalletPaper = ({ description, sx, ...rest }: ConnectWalletPa
             <Typography variant="h2" sx={{ mb: 2 }}>
               <Trans>Please, connect your wallet</Trans>
             </Typography>
-            <Typography sx={{ mb: 6 }} color="text.secondary">
+            <Typography sx={{ mb: 6 }} color="fg-2">
               {description || (
                 <Trans>
                   Please connect your wallet to see your supplies, borrowings, and open positions.