Merge pull request #597 from curvefi/fix/feedback-colors

feat: new alert colors
curvefi · Jan 17, 2025 · 7331e49 · 7331e49
2 parents 5ab88a9 + eecf299
commit 7331e49
Show file tree

Hide file tree

Showing 16 changed files with 283 additions and 115 deletions.
diff --git a/apps/loan/src/components/PageLlamaMarkets/cells/LineGraphCell.tsx b/apps/loan/src/components/PageLlamaMarkets/cells/LineGraphCell.tsx
@@ -22,7 +22,7 @@ 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']
+  return design.Layer.Feedback[last === first ? 'Info' : last < first ? 'Error' : 'Success']
 }
 
 /** Center the y-axis around the first value */

diff --git a/packages/curve-ui-kit/src/features/switch-chain/ui/ChainList.tsx b/packages/curve-ui-kit/src/features/switch-chain/ui/ChainList.tsx
@@ -12,6 +12,7 @@ import Box from '@mui/material/Box'
 import Alert from '@mui/material/Alert'
 import { CheckedIcon } from '@ui-kit/shared/icons/CheckedIcon'
 import { MenuSectionHeader } from '@ui-kit/shared/ui/MenuSectionHeader'
+import AlertTitle from '@mui/material/AlertTitle'
 
 enum ChainType {
   test = 'test',
@@ -86,7 +87,7 @@ export function ChainList<TChainId extends number>({
             ))
         ) : (
           <Alert variant="filled" severity="info" sx={{ marginTop: 3 }}>
-            {t`No networks found`}
+            <AlertTitle>{t`No networks found`}</AlertTitle>
           </Alert>
         )}
       </Box>

diff --git a/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx b/packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx
@@ -14,6 +14,7 @@ import Snackbar from '@mui/material/Snackbar'
 import Alert from '@mui/material/Alert'
 import { Duration } from '@ui-kit/themes/design/0_primitives'
 import Container from '@mui/material/Container'
+import AlertTitle from '@mui/material/AlertTitle'
 
 export type ChainOption<TChainId> = {
   chainId: TChainId
@@ -63,7 +64,7 @@ export const ChainSwitcher = <TChainId extends number>({
       >
         <Container sx={{ justifyContent: 'end', marginTop: 4 }}>
           <Alert variant="filled" severity="warning" data-testid="alert-eth-only">
-            {t`This application is only available on the Ethereum Mainnet`}
+            <AlertTitle>{t`This application is only available on the Ethereum Mainnet`}</AlertTitle>
           </Alert>
         </Container>
       </Snackbar>

diff --git a/packages/curve-ui-kit/src/shared/icons/CheckIcon.tsx b/packages/curve-ui-kit/src/shared/icons/CheckIcon.tsx
@@ -0,0 +1,11 @@
+import { createSvgIcon } from '@mui/material/utils'
+
+export const CheckIcon = createSvgIcon(
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12.2314 3.97534C12.5396 4.17683 12.6261 4.58999 12.4246 4.89815L7.89123 11.8315C7.78439 11.9949 7.61131 12.1032 7.41766 12.128C7.22401 12.1527 7.02925 12.0913 6.8848 11.9599L3.95147 9.29328C3.67903 9.04561 3.65895 8.62398 3.90662 8.35154C4.1543 8.0791 4.57593 8.05902 4.84837 8.30669L7.20315 10.4474L11.3086 4.16849C11.5101 3.86032 11.9233 3.77385 12.2314 3.97534Z"
+      fill="currentColor"
+    />
+  </svg>,
+  'Check',
+)
diff --git a/packages/curve-ui-kit/src/shared/icons/ExclamationTriangleIcon.tsx b/packages/curve-ui-kit/src/shared/icons/ExclamationTriangleIcon.tsx
@@ -0,0 +1,21 @@
+import { createSvgIcon } from '@mui/material/utils'
+
+export const ExclamationTriangleIcon = createSvgIcon(
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.28203 4.78525C7.26636 4.3779 7.59235 4.03913 8 4.03913C8.40764 4.03913 8.73363 4.3779 8.71797 4.78525L8.55383 9.05287C8.54238 9.35046 8.29781 9.58581 8 9.58581C7.70218 9.58581 7.45761 9.35046 7.44616 9.05287L7.28203 4.78525Z"
+      fill="currentColor"
+    />
+    <path
+      d="M8.79988 11.1745C8.79988 11.6163 8.4417 11.9744 7.99988 11.9744C7.55805 11.9744 7.19988 11.6163 7.19988 11.1745C7.19988 10.7326 7.55805 10.3745 7.99988 10.3745C8.4417 10.3745 8.79988 10.7326 8.79988 11.1745Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.00789 0.649407C8.55285 -0.114093 7.44714 -0.114093 6.9921 0.649408L0.17192 12.0927C-0.294216 12.8748 0.269334 13.8667 1.17982 13.8667H14.8202C15.7307 13.8667 16.2942 12.8748 15.8281 12.0927L9.00789 0.649407ZM7.90837 1.19551C7.94974 1.1261 8.05025 1.1261 8.09162 1.19551L14.9118 12.6388C14.9542 12.7099 14.903 12.8 14.8202 12.8H1.17982C1.09705 12.8 1.04582 12.7099 1.08819 12.6388L7.90837 1.19551Z"
+      fill="currentColor"
+    />
+  </svg>,
+  'ExclamationTriangle',
+)
diff --git a/packages/curve-ui-kit/src/shared/icons/InfoCircledIcon.tsx b/packages/curve-ui-kit/src/shared/icons/InfoCircledIcon.tsx
@@ -0,0 +1,21 @@
+import { createSvgIcon } from '@mui/material/utils'
+
+export const InfoCircledIcon = createSvgIcon(
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.79988 4.80006C8.79988 5.24189 8.44171 5.60006 7.99988 5.60006C7.55806 5.60006 7.19988 5.24189 7.19988 4.80006C7.19988 4.35823 7.55806 4.00006 7.99988 4.00006C8.44171 4.00006 8.79988 4.35823 8.79988 4.80006Z"
+      fill="currentColor"
+    />
+    <path
+      d="M6.40001 6.40006H8.00001C8.29456 6.40006 8.53334 6.63884 8.53334 6.93339V10.6667H9.60001V11.7334H6.40001V10.6667H7.46667V7.46672H6.40001V6.40006Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.99987 0.935425C4.09834 0.935425 0.935516 4.09825 0.935516 7.99978C0.935516 11.9013 4.09834 15.0641 7.99987 15.0641C11.9014 15.0641 15.0642 11.9013 15.0642 7.99978C15.0642 4.09825 11.9014 0.935425 7.99987 0.935425ZM1.94885 7.99978C1.94885 4.6579 4.65799 1.94876 7.99987 1.94876C11.3417 1.94876 14.0509 4.6579 14.0509 7.99978C14.0509 11.3416 11.3417 14.0508 7.99987 14.0508C4.65799 14.0508 1.94885 11.3416 1.94885 7.99978Z"
+      fill="currentColor"
+    />
+  </svg>,
+  'InfoCircled',
+)
diff --git a/packages/curve-ui-kit/src/shared/ui/Metric.tsx b/packages/curve-ui-kit/src/shared/ui/Metric.tsx
@@ -12,6 +12,7 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { TypographyVariantKey, TYPOGRAPHY_VARIANTS } 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
 
@@ -229,7 +230,8 @@ export const Metric = ({
 
       <Snackbar open={openCopyAlert} onClose={() => setOpenCopyAlert(false)} autoHideDuration={Duration.Snackbar}>
         <Alert variant="filled" severity="success">
-          {copyText}: {value}
+          <AlertTitle>{copyText}</AlertTitle>
+          {value}
         </Alert>
       </Snackbar>
     </Box>

diff --git a/packages/curve-ui-kit/src/themes/basic-theme/basic.ts b/packages/curve-ui-kit/src/themes/basic-theme/basic.ts
@@ -27,17 +27,24 @@ export const basicMuiTheme = createMuiTheme({
  *   '@media (min-width: 1200px)': { width: 100, height: '300px' }
  *  }
  */
-export const handleBreakpoints = (values: Record<keyof CSSObject, number | string | Responsive>) =>
+export const handleBreakpoints = (values: Record<keyof CSSObject, number | string | Responsive>): CSSObject =>
   Object.fromEntries(
-    basicMuiTheme.breakpoints.keys.map((breakpoint) => [
-      basicMuiTheme.breakpoints.up(breakpoint),
-      Object.fromEntries(
-        Object.entries(values).map(([key, value]) => [
-          key,
-          typeof value === 'string' || typeof value === 'number' ? value : value[breakpoint],
-        ]),
-      ),
-    ]),
+    basicMuiTheme.breakpoints.keys.map((breakpoint) => {
+      const selector = basicMuiTheme.breakpoints.up(breakpoint)
+      return [
+        selector,
+        {
+          // in case the selector is already present, merge the values
+          ...((values[selector] as CSSObject) ?? {}),
+          ...Object.fromEntries(
+            Object.entries(values).map(([key, value]) => [
+              key,
+              typeof value === 'string' || typeof value === 'number' || value == null ? value : value[breakpoint],
+            ]),
+          ),
+        },
+      ]
+    }),
   )
 
 export type Responsive = Record<Breakpoint, string>
diff --git a/packages/curve-ui-kit/src/themes/components.ts b/packages/curve-ui-kit/src/themes/components.ts
@@ -7,15 +7,17 @@ import { SizesAndSpaces } from './design/1_sizes_spaces'
 import { defineMuiSwitch } from './mui-switch'
 import { basicMuiTheme } from './basic-theme'
 import { alpha } from '@mui/system'
-import type { TypographyOptions } from '@mui/material/styles/createTypography'
 import { defineMuiMenuItem } from '@ui-kit/themes/mui-menu-item'
+import { defineMuiAlert, defineMuiAlertTitle } from '@ui-kit/themes/mui-alert'
+import type { TypographyOptions } from '@mui/material/styles/createTypography'
 import { TransitionFunction } from '@ui-kit/themes/design/0_primitives'
-import { linearProgressClasses } from '@mui/material/LinearProgress'
 
 export const DEFAULT_BAR_SIZE = SizesAndSpaces.ButtonSize.sm
 export const MOBILE_SIDEBAR_WIDTH = { width: '100%', minWidth: 320 } as const
 
 export const createComponents = (design: DesignSystem, typography: TypographyOptions): ThemeOptions['components'] => ({
+  MuiAlert: defineMuiAlert(design, typography),
+  MuiAlertTitle: defineMuiAlertTitle(design, typography),
   MuiButton: defineMuiButton(design),
   MuiButtonBase: {
     defaultProps: {

diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts
@@ -1,4 +1,4 @@
-import { Grays, Blues, Violet } from './0_primitives'
+import { Grays, Blues, Violet, Reds, Greens } from './0_primitives'
 
 export const SurfacesAndText = {
   plain: {
@@ -9,6 +9,12 @@ export const SurfacesAndText = {
         tertiary: Grays[500],
         Disabled: Grays[400],
         highlight: Blues[500],
+        Feedback: {
+          Success: Greens[500],
+          Warning: Reds[400],
+          Error: Reds[500],
+          Inverted: Grays[50],
+        },
       },
       Layer: {
         '1': {
@@ -28,6 +34,12 @@ export const SurfacesAndText = {
           Selected: Grays[100],
           Hover: Grays[150],
         },
+        Feedback: {
+          Info: Blues[500],
+          Success: Greens[600],
+          Warning: Reds[300],
+          Error: Reds[500],
+        },
       },
       Tables: {
         Header: { Fill: Grays[200] },
@@ -40,6 +52,12 @@ export const SurfacesAndText = {
         tertiary: Grays[400],
         Disabled: Grays[500],
         highlight: Blues[500],
+        Feedback: {
+          Success: Greens[600],
+          Warning: Reds[300],
+          Error: Reds[500],
+          Inverted: Grays[950],
+        },
       },
       Layer: {
         '1': {
@@ -59,6 +77,12 @@ export const SurfacesAndText = {
           Selected: Grays[750],
           Hover: Grays[800],
         },
+        Feedback: {
+          Info: Blues[50],
+          Success: Greens[300],
+          Warning: Reds[400],
+          Error: Reds[500],
+        },
       },
       Tables: {
         Header: { Fill: Grays[800] },
@@ -71,6 +95,12 @@ export const SurfacesAndText = {
         tertiary: Grays[500],
         Disabled: Grays[400],
         highlight: Violet[600],
+        Feedback: {
+          Success: Greens[600],
+          Warning: Reds[400],
+          Error: Reds[500],
+          Inverted: Grays[50],
+        },
       },
       Tables: {
         Header: { Fill: Violet[50] },
@@ -93,6 +123,12 @@ export const SurfacesAndText = {
           Selected: Violet[50],
           Hover: Violet[200],
         },
+        Feedback: {
+          Info: Violet[700],
+          Success: Greens[600],
+          Warning: Reds[300],
+          Error: Reds[500],
+        },
       },
     },
   },
@@ -104,6 +140,12 @@ export const SurfacesAndText = {
         tertiary: Grays[400],
         Disabled: Grays[500],
         highlight: Blues[500],
+        Feedback: {
+          Success: Greens[300],
+          Warning: Reds[300],
+          Error: Reds[500],
+          Inverted: Grays[950],
+        },
       },
       Layer: {
         '1': {
@@ -123,6 +165,12 @@ export const SurfacesAndText = {
           Selected: Grays[850],
           Hover: Grays[900],
         },
+        Feedback: {
+          Info: Blues[800],
+          Success: Greens[300],
+          Warning: Reds[400],
+          Error: Reds[500],
+        },
       },
       Tables: {
         Header: { Fill: Grays[800] },
@@ -135,6 +183,12 @@ export const SurfacesAndText = {
         tertiary: Grays[600],
         Disabled: Grays[400],
         highlight: Blues[500],
+        Feedback: {
+          Success: Greens[500],
+          Warning: Reds[400],
+          Error: Reds[500],
+          Inverted: Grays[50],
+        },
       },
       Layer: {
         '1': {
@@ -154,6 +208,12 @@ export const SurfacesAndText = {
           Selected: Blues[100],
           Hover: Blues[50],
         },
+        Feedback: {
+          Info: Blues[500],
+          Success: Greens[600],
+          Warning: Reds[300],
+          Error: Reds[500],
+        },
       },
       Tables: {
         Header: { Fill: Grays[200] },
@@ -166,6 +226,12 @@ export const SurfacesAndText = {
         tertiary: Grays[400],
         Disabled: Grays[500],
         highlight: Violet[400],
+        Feedback: {
+          Success: Greens[500],
+          Warning: Reds[300],
+          Error: Reds[500],
+          Inverted: Grays[950],
+        },
       },
       Tables: {
         Header: { Fill: Violet[800] },
@@ -188,6 +254,12 @@ export const SurfacesAndText = {
           Selected: Violet[800],
           Hover: Violet[900],
         },
+        Feedback: {
+          Info: Grays[850],
+          Success: Greens[300],
+          Warning: Reds[400],
+          Error: Reds[500],
+        },
       },
     },
   },

diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts
@@ -28,6 +28,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Outline: Light.Layer.Highlight,
     },
     TypeAction: Light.Layer.TypeAction,
+    Feedback: Light.Layer.Feedback,
   } as const
 
   const Text = {
@@ -37,10 +38,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Tertiary: Light.Text.tertiary,
       Highlight: Light.Text.highlight,
       Disabled: Light.Text.Disabled,
-      Success: Greens[500],
-      Warning: Reds[400],
-      Error: Reds[500],
-      Info: Layer.Highlight.Outline,
+      Feedback: Light.Text.Feedback,
     },
     FontFamily: {
       Heading: 'Mona Sans',
@@ -375,6 +373,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       Hover: Dark.Layer.TypeAction.Hover,
       Selected: Dark.Layer.TypeAction.Selected,
     },
+    Feedback: Dark.Layer.Feedback,
   } as const
 
   const Text = {
@@ -384,10 +383,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       Tertiary: Dark.Text.tertiary,
       Highlight: Dark.Text.highlight,
       Disabled: Dark.Text.Disabled,
-      Success: Greens[400],
-      Info: Layer.Highlight.Outline,
-      Warning: Reds[300],
-      Error: Reds[500],
+      Feedback: Dark.Text.Feedback,
     },
     FontFamily: {
       Heading: 'Mona Sans',
@@ -663,6 +659,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       Outline: Chad.Layer.Highlight,
     },
     TypeAction: Chad.Layer.TypeAction,
+    Feedback: Chad.Layer.Feedback,
   } as const
 
   const Text = {
@@ -672,10 +669,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       Tertiary: Chad.Text.tertiary,
       Highlight: Chad.Text.highlight,
       Disabled: Chad.Text.Disabled,
-      Success: Greens[500],
-      Info: Layer.Highlight.Outline,
-      Warning: Reds[400],
-      Error: Reds[500],
+      Feedback: Chad.Text.Feedback,
     },
     FontFamily: {
       Heading: 'Minecraft',