From 6015d2130c5854ce16f3612dba23834ff22f3420 Mon Sep 17 00:00:00 2001
From: Alunara <>
Date: Fri, 17 Jan 2025 18:05:59 +0100
Subject: [PATCH] styling: update metric sizes and spacing according to figma

---
 .../curve-ui-kit/src/shared/ui/Metric.tsx     | 46 ++++++++-----------
 1 file changed, 18 insertions(+), 28 deletions(-)

diff --git a/packages/curve-ui-kit/src/shared/ui/Metric.tsx b/packages/curve-ui-kit/src/shared/ui/Metric.tsx
index 6c9e1fb45..04ccec0d7 100644
--- a/packages/curve-ui-kit/src/shared/ui/Metric.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/Metric.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
 import Alert from '@mui/material/Alert'
-import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
 import Skeleton from '@mui/material/Skeleton'
 import Snackbar from '@mui/material/Snackbar'
 import Tooltip from '@mui/material/Tooltip'
@@ -14,7 +14,7 @@ import { abbreviateNumber, scaleSuffix } from '@ui-kit/utils'
 import { Duration } from '../../themes/design/0_primitives'
 import AlertTitle from '@mui/material/AlertTitle'
 
-const { Spacing } = SizesAndSpaces
+const { Spacing, IconSize } = SizesAndSpaces
 
 // Correspond to flexbox align items values.
 export const ALIGNMENTS = ['start', 'center', 'end'] as const
@@ -149,74 +149,64 @@ export const Metric = ({
     setOpenCopyAlert(true)
   }
 
+  const fontVariant = MetricSize[size]
+
   return (
-    <Box display="flex" flexDirection="column" alignItems={alignment} gap={Spacing.xs}>
+    <Stack alignItems={alignment}>
       <Typography variant="bodyXsRegular" color="textTertiary">
         {label}
         {tooltip && (
           <Tooltip arrow placement="top" title={tooltip}>
             <span>
               {' '}
-              <InfoOutlinedIcon sx={{ fontSize: '1.25em' }} />
+              <InfoOutlinedIcon sx={{ width: IconSize.xs, height: IconSize.xs }} />
             </span>
           </Tooltip>
         )}
       </Typography>
 
       {loading ? (
-        <Skeleton
-          variant="text"
-          width="100%"
-          sx={{
-            fontSize: TYPOGRAPHY_VARIANTS[MetricSize[size]],
-          }}
-        />
+        <Skeleton variant="text" width="100%" sx={(t) => ({ ...t.typography[fontVariant] })} />
       ) : (
-        <Box display="flex" gap={Spacing.xs} alignItems="baseline">
+        <Stack direction="row" gap={Spacing.xxs} alignItems="baseline">
           <Tooltip
             arrow
             placement="bottom"
             title={value.toLocaleString()}
             onClick={copyValue}
-            sx={{
-              cursor: 'pointer',
-            }}
+            sx={{ cursor: 'pointer' }}
           >
-            <Box display="flex" gap={Spacing.xxs} alignItems="baseline">
+            <Stack direction="row">
               {unit?.position === 'prefix' && (
-                <Typography variant={MetricSize[size]} color="textSecondary">
+                <Typography variant={fontVariant} color="textSecondary">
                   {unit.symbol}
                 </Typography>
               )}
 
-              <Typography variant={MetricSize[size]} color="textPrimary">
+              <Typography variant={fontVariant} color="textPrimary">
                 {formatter(abbreviate ? abbreviateNumber(value) : value)}
               </Typography>
 
               {abbreviate && (
-                <Typography variant={MetricSize[size]} color="textPrimary" textTransform="capitalize">
+                <Typography variant={fontVariant} color="textPrimary" textTransform="capitalize">
                   {scaleSuffix(value)}
                 </Typography>
               )}
 
               {unit?.position === 'suffix' && (
-                <Typography variant={MetricSize[size]} color="textSecondary">
+                <Typography variant={fontVariant} color="textSecondary">
                   {unit.symbol}
                 </Typography>
               )}
-            </Box>
+            </Stack>
           </Tooltip>
 
           {(change || change === 0) && (
-            <Typography
-              variant="highlightM"
-              color={change > 0 ? 'success' : change < 0 ? 'error' : 'textHighlight'}
-              sx={{ marginInlineStart: Spacing.xs }}
-            >
+            <Typography variant="highlightM" color={change > 0 ? 'success' : change < 0 ? 'error' : 'textHighlight'}>
               {formatChange(change)}%
             </Typography>
           )}
-        </Box>
+        </Stack>
       )}
 
       {notional !== undefined && (
@@ -234,6 +224,6 @@ export const Metric = ({
           {value}
         </Alert>
       </Snackbar>
-    </Box>
+    </Stack>
   )
 }