Merge pull request #609 from curvefi/styling/value-metric-update

styling: update metric size and spacing according to figma

Author: 0xAlunara

packages/curve-ui-kit/src/features/user-profile/UserProfile.tsx

@@ -1,4 +1,3 @@
-import Box from '@mui/material/Box'
 import Drawer from '@mui/material/Drawer'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 

packages/curve-ui-kit/src/lib/model/query/chain-name-validation.ts

@@ -1,6 +1,6 @@
 import { enforce, group, test } from 'vest'
 import { createValidationSuite } from '@ui-kit/lib/validation'
-import { ChainNameParams, ChainParams } from './root-keys'
+import { ChainNameParams } from './root-keys'
 
 export const chainNameValidationGroup = ({ blockchainId }: ChainNameParams) =>
   group('chainNameValidation', () => {

packages/curve-ui-kit/src/shared/ui/LinearProgress.tsx

@@ -1,4 +1,4 @@
-import MuiLinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
+import MuiLinearProgress from '@mui/material/LinearProgress'
 import { useEffect, useState } from 'react'
 
 const SIZE_MAPPING = {

packages/curve-ui-kit/src/shared/ui/Metric.tsx

@@ -1,20 +1,20 @@
 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'
 import Typography from '@mui/material/Typography'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { TypographyVariantKey, TYPOGRAPHY_VARIANTS } from '@ui-kit/themes/typography'
+import { TypographyVariantKey } from '@ui-kit/themes/typography'
 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
@@ -27,6 +27,13 @@ const MetricSize = {
   extraLarge: 'highlightXxl',
 } as const satisfies Record<string, TypographyVariantKey>
 
+const MetricUnitSize = {
+  small: 'highlightXs',
+  medium: 'highlightS',
+  large: 'highlightM',
+  extraLarge: 'highlightL',
+} as const satisfies Record<string, TypographyVariantKey>
+
 export const SIZES = Object.keys(MetricSize) as (keyof typeof MetricSize)[]
 
 type UnitOptions = {
@@ -79,27 +86,79 @@ const formatChange = (value: number) => {
   })
 }
 
-type Props = {
-  /** Label that goes above the value */
-  label: string
-  /** Optional tooltip content shown next to the label */
-  tooltip?: string
-  /** The text to display when the value is copied to the clipboard */
-  copyText?: string
+type MetricValueProps = Required<Pick<Props, 'value' | 'formatter' | 'abbreviate'>> & {
+  change?: number
+  unit: UnitOptions | undefined
+  fontVariant: TypographyVariantKey
+  fontVariantUnit: TypographyVariantKey
+  copyValue: () => void
+}
 
+const MetricValue = ({
+  value,
+  formatter,
+  change,
+  abbreviate,
+  unit,
+  fontVariant,
+  fontVariantUnit,
+  copyValue,
+}: MetricValueProps) => (
+  <Stack direction="row" gap={Spacing.xxs} alignItems="baseline">
+    <Tooltip arrow placement="bottom" title={value.toLocaleString()} onClick={copyValue} sx={{ cursor: 'pointer' }}>
+      <Stack direction="row" alignItems="baseline">
+        {unit?.position === 'prefix' && (
+          <Typography variant={fontVariantUnit} color="textSecondary">
+            {unit.symbol}
+          </Typography>
+        )}
+
+        <Typography variant={fontVariant} color="textPrimary">
+          {formatter(abbreviate ? abbreviateNumber(value) : value)}
+        </Typography>
+
+        {abbreviate && (
+          <Typography variant={fontVariant} color="textPrimary" textTransform="capitalize">
+            {scaleSuffix(value)}
+          </Typography>
+        )}
+
+        {unit?.position === 'suffix' && (
+          <Typography variant={fontVariantUnit} color="textSecondary">
+            {unit.symbol}
+          </Typography>
+        )}
+      </Stack>
+    </Tooltip>
+
+    {(change || change === 0) && (
+      <Typography variant="highlightM" color={change > 0 ? 'success' : change < 0 ? 'error' : 'textHighlight'}>
+        {formatChange(change)}%
+      </Typography>
+    )}
+  </Stack>
+)
+
+type Props = {
   /** The actual metric value to display */
   value: number
-  /** Optional formatter for metric value */
-  formatter?: (value: number) => string
-  /** If the value should be abbreviated to 1.23k or 3.45m */
-  abbreviate?: boolean
+  /** A unit can be a currency symbol or percentage, prefix or suffix */
+  unit?: Unit | undefined
   /** The number of decimals the value should contain */
   decimals?: number
-  /** A unit can be a currency symbol or percentage, prefix or suffix */
-  unit?: Unit
-
+  /** If the value should be abbreviated to 1.23k or 3.45m */
+  abbreviate?: boolean
   /** Optional value that denotes a change in metric value since 'last' time */
   change?: number
+  /** Optional formatter for metric value */
+  formatter?: (value: number) => string
+
+  /** Label that goes above the value */
+  label: string
+  /** Optional tooltip content shown next to the label */
+  tooltip?: string
+  /** The text to display when the value is copied to the clipboard */
+  copyText?: string
 
   /** Notional values give extra context to the metric, like underlying value */
   notional?: number
@@ -114,17 +173,16 @@ type Props = {
 }
 
 export const Metric = ({
-  label,
-  tooltip,
-  copyText,
-
   value,
-  formatter = (value: number) => formatValue(value, decimals),
-  abbreviate,
   unit,
+  abbreviate,
+  change,
   decimals = 1,
+  formatter = (value: number) => formatValue(value, decimals),
 
-  change,
+  label,
+  tooltip,
+  copyText,
 
   notional,
   notionalFormatter = (value: number) => formatNotionalValue(value, notionalDecimals),
@@ -149,74 +207,37 @@ export const Metric = ({
     setOpenCopyAlert(true)
   }
 
+  const metricValueProps = {
+    value,
+    unit,
+    abbreviate,
+    change,
+    formatter,
+    fontVariant: MetricSize[size],
+    fontVariantUnit: MetricUnitSize[size],
+    copyValue,
+  }
+
   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">
+          <MetricValue {...metricValueProps} />
+        </Skeleton>
       ) : (
-        <Box display="flex" gap={Spacing.xs} alignItems="baseline">
-          <Tooltip
-            arrow
-            placement="bottom"
-            title={value.toLocaleString()}
-            onClick={copyValue}
-            sx={{
-              cursor: 'pointer',
-            }}
-          >
-            <Box display="flex" gap={Spacing.xxs} alignItems="baseline">
-              {unit?.position === 'prefix' && (
-                <Typography variant={MetricSize[size]} color="textSecondary">
-                  {unit.symbol}
-                </Typography>
-              )}
-
-              <Typography variant={MetricSize[size]} color="textPrimary">
-                {formatter(abbreviate ? abbreviateNumber(value) : value)}
-              </Typography>
-
-              {abbreviate && (
-                <Typography variant={MetricSize[size]} color="textPrimary" textTransform="capitalize">
-                  {scaleSuffix(value)}
-                </Typography>
-              )}
-
-              {unit?.position === 'suffix' && (
-                <Typography variant={MetricSize[size]} color="textSecondary">
-                  {unit.symbol}
-                </Typography>
-              )}
-            </Box>
-          </Tooltip>
-
-          {(change || change === 0) && (
-            <Typography
-              variant="highlightM"
-              color={change > 0 ? 'success' : change < 0 ? 'error' : 'textHighlight'}
-              sx={{ marginInlineStart: Spacing.xs }}
-            >
-              {formatChange(change)}%
-            </Typography>
-          )}
-        </Box>
+        <MetricValue {...metricValueProps} />
       )}
 
       {notional !== undefined && (
@@ -234,6 +255,6 @@ export const Metric = ({
           {value}
         </Alert>
       </Snackbar>
-    </Box>
+    </Stack>
   )
 }

packages/curve-ui-kit/src/themes/button/override-buttons.d.ts

@@ -1,4 +1,4 @@
-import { DesignSystem, DesignOptions } from './design'
+import { DesignSystem } from './design'
 
 declare module '@mui/material/Button' {
   type Buttons = Omit<DesignSystem['Button'], 'Focus_Outline'>

packages/curve-ui-kit/src/themes/typography/create-typography.ts

@@ -56,6 +56,10 @@ const variant = ({
   fontFamily,
   fontWeight: FontWeight[fontWeight ?? 'Medium'],
   letterSpacing,
+  // Undo the letter spacing to the right of the last letter
+  ...(letterSpacing !== '0%' && {
+    marginRight: `calc(${letterSpacing} * -1)`,
+  }),
   textTransform: textCase,
   ...(!(fontSize in FontSize) && { fontSize }),
   ...(!(lineHeight in LineHeight) && { lineHeight }),

packages/curve-ui-kit/src/widgets/Disclaimer/Tabs/SCrvUsd.tsx

@@ -9,7 +9,7 @@ import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
 
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
-import { Section, Header, Title, Paragraph } from '../Section'
+import { Section, Header, Paragraph } from '../Section'
 import { List } from '../List'
 
 const { Spacing } = SizesAndSpaces

packages/ui/src/InternalLinkButton/InternalLinkButton.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { ReactComponent as ExternalIcon } from 'ui/src/images/external.svg'
 
 import Button from 'ui/src/Button'
 import Icon from 'ui/src/Icon'