feat(v3-uplift): restyle list-card Hide toggle as a labelled button + icon

- ListWrapper: replace the clickable box + CSS +/- bar with a text Button labelled
  'Hide {collapseLabel}' / 'Show {collapseLabel}' with a MinusIcon suffix (fg-3), keeping
  the minus/plus collapse affordance.
- Add a clean currentColor MinusIcon (from the Figma export).
- Pass collapseLabel from the four dashboard cards: assets to supply, your supplies,
  assets to borrow, your borrows.

Author: abjt14

src/components/icons/MinusIcon.tsx

@@ -0,0 +1,15 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+// Horizontal bar used as the collapse ("hide") control glyph. Strokes with `currentColor` so the
+// consumer sets the color. Cleaned from the Figma export (the stroke there was fg-3).
+export const MinusIcon = ({ sx, ...rest }: SvgIconProps) => (
+  <SvgIcon viewBox="0 0 18 18" fill="none" sx={sx} {...rest}>
+    <path
+      d="M3.59961 9.03662H14.3996"
+      stroke="currentColor"
+      strokeWidth="1.35"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </SvgIcon>
+);

src/components/lists/ListWrapper.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro';
-import { Box, BoxProps, Paper, PaperProps, Typography } from '@mui/material';
+import { Box, BoxProps, Button, Paper, PaperProps } from '@mui/material';
 import { ReactNode, useState } from 'react';
+import { MinusIcon } from 'src/components/icons/MinusIcon';
 import { useRootStore } from 'src/store/root';
 import { DASHBOARD } from 'src/utils/events';
 
@@ -20,6 +21,8 @@ interface ListWrapperProps {
   paperSx?: PaperProps['sx'];
   topInfoSx?: BoxProps['sx'];
   onCollapseChange?: (collapsed: boolean) => void;
+  /** What the card hides — renders the toggle as "Hide {collapseLabel}" / "Show {collapseLabel}". */
+  collapseLabel?: string;
 }
 
 export const ListWrapper = ({
@@ -36,6 +39,7 @@ export const ListWrapper = ({
   paperSx,
   topInfoSx,
   onCollapseChange,
+  collapseLabel,
 }: ListWrapperProps) => {
   const [isCollapse, setIsCollapse] = useState(
     localStorageName ? localStorage.getItem(localStorageName) === 'true' : false
@@ -92,6 +96,18 @@ export const ListWrapper = ({
 
   const collapsed = isCollapse && !noData;
 
+  const collapseText = collapsed ? (
+    collapseLabel ? (
+      <Trans>Show {collapseLabel}</Trans>
+    ) : (
+      <Trans>Show</Trans>
+    )
+  ) : collapseLabel ? (
+    <Trans>Hide {collapseLabel}</Trans>
+  ) : (
+    <Trans>Hide</Trans>
+  );
+
   return (
     <Paper
       variant="card"
@@ -124,31 +140,9 @@ export const ListWrapper = ({
         </Box>
 
         {!!localStorageName && !noData && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              cursor: 'pointer',
-              minHeight: '28px',
-              pl: 3,
-              span: {
-                width: '14px',
-                height: '2px',
-                bgcolor: 'fg-2',
-                position: 'relative',
-                ml: 1,
-                '&:after': {
-                  content: "''",
-                  position: 'absolute',
-                  width: '14px',
-                  height: '2px',
-                  bgcolor: 'fg-2',
-                  transition: 'all 0.2s ease',
-                  transform: collapsed ? 'rotate(90deg)' : 'rotate(0)',
-                  opacity: collapsed ? 1 : 0,
-                },
-              },
-            }}
+          <Button
+            variant="text"
+            size="small"
             onClick={() => {
               handleTrackingEvents();
 
@@ -158,12 +152,27 @@ export const ListWrapper = ({
                 onCollapseChange?.(nextIsCollapse);
               }
             }}
+            endIcon={
+              // − when expanded; a rotated copy fades in to form a + when collapsed.
+              <Box sx={{ position: 'relative', display: 'inline-flex', color: 'fg-3' }}>
+                <MinusIcon sx={{ fontSize: 18 }} />
+                <MinusIcon
+                  sx={{
+                    fontSize: 18,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    transform: 'rotate(90deg)',
+                    opacity: collapsed ? 1 : 0,
+                    transition: 'opacity 0.2s ease',
+                  }}
+                />
+              </Box>
+            }
+            sx={{ flexShrink: 0, ml: 3, color: 'fg-2' }}
           >
-            <Typography variant="buttonM" color="fg-2">
-              {collapsed ? <Trans>Show</Trans> : <Trans>Hide</Trans>}
-            </Typography>
-            <span />
-          </Box>
+            {collapseText}
+          </Button>
         )}
       </Box>
 

src/locales/el/messages.js

@@ -965,6 +965,10 @@ msgstr "Greek"
 msgid "Claim {symbol}"
 msgstr "Claim {symbol}"
 
+#: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx
+msgid "assets to borrow"
+msgstr "assets to borrow"
+
 #: src/components/transactions/Swap/errors/shared/FlashLoanDisabledBlockingError.tsx
 msgid "Position swaps are disabled for this asset due to security reasons."
 msgstr "Position swaps are disabled for this asset due to security reasons."
@@ -1441,6 +1445,10 @@ msgstr "Borrow balance after repay"
 msgid "Supplied assets"
 msgstr "Supplied assets"
 
+#: src/components/lists/ListWrapper.tsx
+msgid "Hide {collapseLabel}"
+msgstr "Hide {collapseLabel}"
+
 #: src/components/transactions/Warnings/DebtCeilingWarning.tsx
 msgid "Protocol debt ceiling is at 100% for this asset. Further borrowing against this asset is unavailable."
 msgstr "Protocol debt ceiling is at 100% for this asset. Further borrowing against this asset is unavailable."
@@ -2179,6 +2187,10 @@ msgstr "Details"
 msgid "Stake cooldown activated"
 msgstr "Stake cooldown activated"
 
+#: src/modules/dashboard/lists/SupplyAssetsList/SupplyAssetsList.tsx
+msgid "assets to supply"
+msgstr "assets to supply"
+
 #: src/components/transactions/Withdraw/WithdrawError.tsx
 msgid "These funds have been borrowed and are not available for withdrawal at this time."
 msgstr "These funds have been borrowed and are not available for withdrawal at this time."
@@ -3302,6 +3314,10 @@ msgstr "Select language"
 msgid "<0>Attention:</0> Parameter changes via governance can alter your account health factor and risk of liquidation. Follow the <1>Aave governance forum</1> for updates."
 msgstr "<0>Attention:</0> Parameter changes via governance can alter your account health factor and risk of liquidation. Follow the <1>Aave governance forum</1> for updates."
 
+#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsList.tsx
+msgid "your supplies"
+msgstr "your supplies"
+
 #: src/components/transactions/ClaimRewards/ClaimRewardsActions.tsx
 msgid "Claim {0}"
 msgstr "Claim {0}"
@@ -3495,6 +3511,14 @@ msgstr "No eligible assets to swap."
 msgid "Depositing"
 msgstr "Depositing"
 
+#: src/components/lists/ListWrapper.tsx
+msgid "Show {collapseLabel}"
+msgstr "Show {collapseLabel}"
+
+#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
+msgid "your borrows"
+msgstr "your borrows"
+
 #: src/components/transactions/Swap/details/CollateralSwapDetails.tsx
 msgid "Supply apy"
 msgstr "Supply apy"

src/locales/en/messages.js

@@ -1,6 +1,6 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
 import { USD_DECIMALS, valueToBigNumber } from '@aave/math-utils';
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Fragment, useState } from 'react';
 import { AssetCategoryMultiSelect } from 'src/components/AssetCategoryMultiselect';
@@ -235,6 +235,7 @@ export const BorrowAssetsList = () => {
       }
       onCollapseChange={setIsListCollapsed}
       localStorageName="borrowAssetsDashboardTableCollapse"
+      collapseLabel={t`assets to borrow`}
       withTopMargin
       noData={borrowDisabled}
       subChildrenComponent={

src/locales/en/messages.po

@@ -1,6 +1,6 @@
 import { API_ETH_MOCK_ADDRESS, InterestRate } from '@aave/contract-helpers';
 import { valueToBigNumber } from '@aave/math-utils';
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useState } from 'react';
 import { ListColumn } from 'src/components/lists/ListColumn';
@@ -150,6 +150,7 @@ export const BorrowedPositionsList = () => {
         </Typography>
       }
       localStorageName="borrowedAssetsDashboardTableCollapse"
+      collapseLabel={t`your borrows`}
       subTitleComponent={
         showEModeButton ? (
           <DashboardEModeButton userEmodeCategoryId={user ? user.userEmodeCategoryId : 0} />

src/locales/es/messages.js

@@ -1,5 +1,5 @@
 import { API_ETH_MOCK_ADDRESS } from '@aave/contract-helpers';
-import { Trans } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Fragment, useMemo, useState } from 'react';
 import { ListColumn } from 'src/components/lists/ListColumn';
@@ -175,6 +175,7 @@ export const SuppliedPositionsList = () => {
         </Typography>
       }
       localStorageName="suppliedAssetsDashboardTableCollapse"
+      collapseLabel={t`your supplies`}
       noData={!sortedReserves.length}
       subChildrenComponent={
         !!userHasSmallBalanceAssets && (