feat: implement shadows from design system depending on elevation

curvefi · Jan 8, 2025 · 901e3f8 · 901e3f8
1 parent 9f28dc2
commit 901e3f8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/apps/loan/src/components/PageLlamaMarkets/cells/LineGraphCell.tsx b/apps/loan/src/components/PageLlamaMarkets/cells/LineGraphCell.tsx
@@ -1,6 +1,6 @@
 import { LendingSnapshot, useLendingSnapshots } from '@/entities/lending'
 import { LendingVault } from '@/entities/vaults'
-import { Line, LineChart } from 'recharts'
+import { Line, LineChart, YAxis } from 'recharts'
 import { useTheme } from '@mui/material/styles'
 import { DesignSystem } from '@ui-kit/themes/design'
 import Stack from '@mui/material/Stack'
@@ -14,21 +14,35 @@ const graphSize = { width: 172, height: 48 }
 
 type GraphType = 'borrow' | 'lend'
 
+/**
+ * Get the color for the line graph. Will be green if the last value is higher than the first, red if lower, and blue if equal.
+ */
 function getColor(design: DesignSystem, data: LendingSnapshot[], type: GraphType) {
   if (!data.length) return undefined
   const first = data[0][`${type}_apy`]
   const last = data[data.length - 1][`${type}_apy`]
   return design.Text.TextColors[last === first ? 'Info' : last < first ? 'Error' : 'Success']
 }
 
+/** Center the y-axis around the first value */
+const calculateDomain =
+  (first: number) =>
+  ([dataMin, dataMax]: [number, number]): [number, number] => {
+    const diff = Math.max(dataMax - first, first - dataMin)
+    return [first - diff, first + diff]
+  }
+
+/**
+ * Line graph cell that displays the average historical APY for a vault and a given type (borrow or lend).
+ */
 export const LineGraphCell = ({
   vault,
   type,
   showChart,
 }: {
   vault: LendingVault
   type: GraphType
-  showChart: boolean
+  showChart: boolean // chart is hidden depending on the chart settings
 }) => {
   const { data: snapshots, isLoading } = useLendingSnapshots({
     blockchainId: vault.blockchainId,
@@ -50,7 +64,8 @@ export const LineGraphCell = ({
     <Stack direction="row" alignItems="center" justifyContent="end" gap={3} data-testid={`line-graph-cell-${type}`}>
       {rate.toPrecision(4)}%
       {showChart && snapshots?.length ? (
-        <LineChart data={snapshots} {...graphSize}>
+        <LineChart data={snapshots} {...graphSize} compact>
+          <YAxis hide type="number" domain={calculateDomain(snapshots[0][snapshotKey])} />
           <Line
             type="monotone"
             dataKey={snapshotKey}
@@ -63,7 +78,7 @@ export const LineGraphCell = ({
         <Skeleton {...graphSize} />
       ) : (
         showChart && (
-          <Typography sx={{ ...graphSize, alignContent: 'center' }} variant="bodyXsBold">
+          <Typography sx={{ ...graphSize, alignContent: 'center', textAlign: 'left' }} variant="bodyXsBold">
             {t`No historical data`}
           </Typography>
         )

diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts
@@ -109,10 +109,44 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
   MuiPaper: {
     styleOverrides: {
       root: {
-        boxShadow: '0px 4px 4px 0px #00000040',
+        boxShadow: [
+          '0px 0px 0px 1px #2A334524',
+          '0px 1px 1px -0.5px #2A334524',
+          '0px 3px 3px -1.5px #2A334624',
+          '0px 4px 4px -2px #2A334524',
+          '0px 8px 8px -8px #2A334514',
+        ].join(','),
         // Disable elevation making the background color lighter in dark mode (default mui behavior)
         backgroundImage: 'none',
       },
+      elevation2: {
+        boxShadow: [
+          '0px 0px 0px 1px #2A334524',
+          '0px 1px 1px -0.5px #2A334524',
+          '0px 3px 3px -1.5px #2A334624',
+          '0px 6px 6px -3px #2A334624',
+          '0px 8px 8px -6px #2A334524',
+          '0px 12px 12px -6px #2A334514',
+        ].join(','),
+      },
+      elevation3: {
+        boxShadow: [
+          '0px 0px 0px 1px #2A334524',
+          '0px 1px 1px -0.5px #2A334524',
+          '0px 3px 3px -1.5px #2A334524',
+          '0px 8px 8px -4px #2A334524',
+          '0px 16px 16px -8px #2A334524',
+          '0px 32px 32px -16px #2A33451A',
+        ].join(','),
+      },
+      // this should actually be elevation -1 from our design system, but negative is not supported by mui
+      elevation11: {
+        boxShadow: `1px 1px 0px 0px ${design.Color.Neutral[800]} inset`,
+      },
+      // this should actually be elevation -2 from our design system, but negative is not supported by mui
+      elevation12: {
+        boxShadow: `2px 2px 0px 0px ${design.Color.Neutral[800]} inset`,
+      },
     },
   },
   MuiPopover: {