Skip to content

Commit e1fb75f

Browse files
DanielSchiaviniDanielSchiavini
committed
feat: new alert colors
1 parent eed2ad1 commit e1fb75f

File tree

13 files changed

+229
-100
lines changed

13 files changed

+229
-100
lines changed

‎packages/curve-ui-kit/src/features/switch-chain/ui/ChainList.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Box from '@mui/material/Box'
1212
import Alert from '@mui/material/Alert'
1313
import { CheckedIcon } from '@ui-kit/shared/icons/CheckedIcon'
1414
import { MenuSectionHeader } from '@ui-kit/shared/ui/MenuSectionHeader'
15+
import AlertTitle from '@mui/material/AlertTitle'
1516

1617
enum ChainType {
1718
test = 'test',
@@ -86,7 +87,7 @@ export function ChainList<TChainId extends number>({
8687
))
8788
) : (
8889
<Alert variant="filled" severity="info" sx={{ marginTop: 3 }}>
89-
{t`No networks found`}
90+
<AlertTitle>{t`No networks found`}</AlertTitle>
9091
</Alert>
9192
)}
9293
</Box>

‎packages/curve-ui-kit/src/features/switch-chain/ui/ChainSwitcher.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Snackbar from '@mui/material/Snackbar'
1515
import Alert from '@mui/material/Alert'
1616
import { Duration } from 'curve-ui-kit/src/themes/design/0_primitives'
1717
import Container from '@mui/material/Container'
18+
import AlertTitle from '@mui/material/AlertTitle'
1819

1920
export type ChainOption<TChainId> = {
2021
chainId: TChainId
@@ -65,7 +66,7 @@ export const ChainSwitcher = <TChainId extends number>({
6566
>
6667
<Container sx={{ justifyContent: 'end', marginTop: 4 }}>
6768
<Alert variant="filled" severity="warning" data-testid="alert-eth-only">
68-
{t`This application is only available on the Ethereum Mainnet`}
69+
<AlertTitle>{t`This application is only available on the Ethereum Mainnet`}</AlertTitle>
6970
</Alert>
7071
</Container>
7172
</Snackbar>

‎packages/curve-ui-kit/src/shared/icons/CheckIcon.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { createSvgIcon } from '@mui/material/utils'
2+
3+
export const CheckIcon = createSvgIcon(
4+
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
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"
7+
fill="currentColor"
8+
/>
9+
</svg>,
10+
'Check',
11+
)

‎packages/curve-ui-kit/src/shared/icons/ExclamationTriangleIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createSvgIcon } from '@mui/material/utils'
2+
3+
export const ExclamationTriangleIcon = createSvgIcon(
4+
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
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"
7+
fill="currentColor"
8+
/>
9+
<path
10+
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"
11+
fill="currentColor"
12+
/>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
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"
17+
fill="currentColor"
18+
/>
19+
</svg>,
20+
'InfoCircled',
21+
)

‎packages/curve-ui-kit/src/shared/icons/InfoCircledIcon.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { createSvgIcon } from '@mui/material/utils'
2+
3+
export const InfoCircledIcon = createSvgIcon(
4+
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5+
<path
6+
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"
7+
fill="currentColor"
8+
/>
9+
<path
10+
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"
11+
fill="currentColor"
12+
/>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
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"
17+
fill="currentColor"
18+
/>
19+
</svg>,
20+
'InfoCircled',
21+
)

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { SizesAndSpaces } from 'curve-ui-kit/src/themes/design/1_sizes_spaces'
1212
import { TypographyVariantKey, TYPOGRAPHY_VARIANTS } from 'curve-ui-kit/src/themes/typography'
1313
import { abbreviateNumber, scaleSuffix } from 'curve-ui-kit/src/utils'
1414
import { Duration } from '../../themes/design/0_primitives'
15+
import AlertTitle from '@mui/material/AlertTitle'
1516

1617
const { Spacing } = SizesAndSpaces
1718

@@ -229,7 +230,8 @@ export const Metric = ({
229230

230231
<Snackbar open={openCopyAlert} onClose={() => setOpenCopyAlert(false)} autoHideDuration={Duration.Snackbar}>
231232
<Alert variant="filled" severity="success">
232-
{copyText}: {value}
233+
<AlertTitle>{copyText}</AlertTitle>
234+
{value}
233235
</Alert>
234236
</Snackbar>
235237
</Box>

‎packages/curve-ui-kit/src/themes/components.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ import { defineMuiSwitch } from './mui-switch'
88
import { basicMuiTheme } from './basic-theme'
99
import { alpha } from '@mui/system'
1010
import { definedMuiMenuItem } from '@ui-kit/themes/mui-menu-item'
11+
import { defineMuiAlert } from '@ui-kit/themes/mui-alert'
1112

1213
export const DEFAULT_BAR_SIZE = SizesAndSpaces.ButtonSize.sm
1314
export const MOBILE_SIDEBAR_WIDTH = { width: '100%', minWidth: 320 } as const
1415

1516
export const createComponents = (design: DesignSystem): ThemeOptions['components'] => ({
17+
MuiAlert: defineMuiAlert(design),
1618
MuiButton: defineMuiButton(design),
1719
MuiButtonBase: {
1820
defaultProps: {

‎packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts‎

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Grays, Blues, Violet } from './0_primitives'
1+
import { Grays, Blues, Violet, Reds, Greens } from './0_primitives'
22

33
export const SurfacesAndText = {
44
plain: {
@@ -9,6 +9,12 @@ export const SurfacesAndText = {
99
tertiary: Grays[500],
1010
Disabled: Grays[400],
1111
highlight: Blues[500],
12+
Feedback: {
13+
Success: Greens[500],
14+
Warning: Reds[400],
15+
Error: Reds[500],
16+
Inverted: Grays[50],
17+
},
1218
},
1319
Layer: {
1420
'1': {
@@ -28,6 +34,12 @@ export const SurfacesAndText = {
2834
Selected: Grays[100],
2935
Hover: Grays[150],
3036
},
37+
Feedback: {
38+
Info: Blues[500],
39+
Success: Greens[600],
40+
Warning: Reds[300],
41+
Error: Reds[500],
42+
},
3143
},
3244
Tables: {
3345
Header: { Fill: Grays[200] },
@@ -40,6 +52,12 @@ export const SurfacesAndText = {
4052
tertiary: Grays[400],
4153
Disabled: Grays[500],
4254
highlight: Blues[500],
55+
Feedback: {
56+
Success: Greens[600],
57+
Warning: Reds[300],
58+
Error: Reds[500],
59+
Inverted: Grays[950],
60+
},
4361
},
4462
Layer: {
4563
'1': {
@@ -59,6 +77,12 @@ export const SurfacesAndText = {
5977
Selected: Grays[750],
6078
Hover: Grays[800],
6179
},
80+
Feedback: {
81+
Info: Blues[50],
82+
Success: Greens[300],
83+
Warning: Reds[400],
84+
Error: Reds[500],
85+
},
6286
},
6387
Tables: {
6488
Header: { Fill: Grays[800] },
@@ -71,6 +95,12 @@ export const SurfacesAndText = {
7195
tertiary: Grays[500],
7296
Disabled: Grays[400],
7397
highlight: Violet[600],
98+
Feedback: {
99+
Success: Greens[600],
100+
Warning: Reds[400],
101+
Error: Reds[500],
102+
Inverted: Grays[50],
103+
},
74104
},
75105
Tables: {
76106
Header: { Fill: Violet[50] },
@@ -93,6 +123,12 @@ export const SurfacesAndText = {
93123
Selected: Violet[50],
94124
Hover: Violet[200],
95125
},
126+
Feedback: {
127+
Info: Violet[700],
128+
Success: Greens[600],
129+
Warning: Reds[300],
130+
Error: Reds[500],
131+
},
96132
},
97133
},
98134
},
@@ -104,6 +140,12 @@ export const SurfacesAndText = {
104140
tertiary: Grays[400],
105141
Disabled: Grays[500],
106142
highlight: Blues[500],
143+
Feedback: {
144+
Success: Greens[300],
145+
Warning: Reds[300],
146+
Error: Reds[500],
147+
Inverted: Grays[950],
148+
},
107149
},
108150
Layer: {
109151
'1': {
@@ -123,6 +165,12 @@ export const SurfacesAndText = {
123165
Selected: Grays[850],
124166
Hover: Grays[900],
125167
},
168+
Feedback: {
169+
Info: Blues[800],
170+
Success: Greens[300],
171+
Warning: Reds[400],
172+
Error: Reds[500],
173+
},
126174
},
127175
Tables: {
128176
Header: { Fill: Grays[800] },
@@ -135,6 +183,12 @@ export const SurfacesAndText = {
135183
tertiary: Grays[600],
136184
Disabled: Grays[400],
137185
highlight: Blues[500],
186+
Feedback: {
187+
Success: Greens[500],
188+
Warning: Reds[400],
189+
Error: Reds[500],
190+
Inverted: Grays[50],
191+
},
138192
},
139193
Layer: {
140194
'1': {
@@ -154,6 +208,12 @@ export const SurfacesAndText = {
154208
Selected: Blues[100],
155209
Hover: Blues[50],
156210
},
211+
Feedback: {
212+
Info: Blues[500],
213+
Success: Greens[600],
214+
Warning: Reds[300],
215+
Error: Reds[500],
216+
},
157217
},
158218
Tables: {
159219
Header: { Fill: Grays[200] },
@@ -166,6 +226,12 @@ export const SurfacesAndText = {
166226
tertiary: Grays[400],
167227
Disabled: Grays[500],
168228
highlight: Violet[400],
229+
Feedback: {
230+
Success: Greens[500],
231+
Warning: Reds[300],
232+
Error: Reds[500],
233+
Inverted: Grays[950],
234+
},
169235
},
170236
Tables: {
171237
Header: { Fill: Violet[800] },
@@ -188,6 +254,12 @@ export const SurfacesAndText = {
188254
Selected: Violet[800],
189255
Hover: Violet[900],
190256
},
257+
Feedback: {
258+
Info: Grays[850],
259+
Success: Greens[300],
260+
Warning: Reds[400],
261+
Error: Reds[500],
262+
},
191263
},
192264
},
193265
},

‎packages/curve-ui-kit/src/themes/design/2_theme.ts‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
2424
Outline: Light.Layer.Highlight,
2525
},
2626
TypeAction: Light.Layer.TypeAction,
27+
Feedback: Light.Layer.Feedback,
2728
} as const
2829
const Text = {
2930
TextColors: {
@@ -32,10 +33,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
3233
Tertiary: Light.Text.tertiary,
3334
Highlight: Light.Text.highlight,
3435
Disabled: Light.Text.Disabled,
35-
Success: Greens[500],
36-
Warning: Reds[400],
37-
Error: Reds[500],
38-
Info: Layer.Highlight.Outline,
36+
Feedback: Light.Text.Feedback,
3937
},
4038
FontFamily: {
4139
Heading: 'Mona Sans',
@@ -352,6 +350,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
352350
Hover: Dark.Layer.TypeAction.Hover,
353351
Selected: Dark.Layer.TypeAction.Selected,
354352
},
353+
Feedback: Dark.Layer.Feedback,
355354
} as const
356355
const Text = {
357356
TextColors: {
@@ -360,10 +359,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
360359
Tertiary: Dark.Text.tertiary,
361360
Highlight: Dark.Text.highlight,
362361
Disabled: Dark.Text.Disabled,
363-
Success: Greens[400],
364-
Info: Layer.Highlight.Outline,
365-
Warning: Reds[300],
366-
Error: Reds[500],
362+
Feedback: Dark.Text.Feedback,
367363
},
368364
FontFamily: {
369365
Heading: 'Mona Sans',
@@ -621,6 +617,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
621617
Outline: Chad.Layer.Highlight,
622618
},
623619
TypeAction: Chad.Layer.TypeAction,
620+
Feedback: Chad.Layer.Feedback,
624621
} as const
625622
const Text = {
626623
TextColors: {
@@ -629,10 +626,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
629626
Tertiary: Chad.Text.tertiary,
630627
Highlight: Chad.Text.highlight,
631628
Disabled: Chad.Text.Disabled,
632-
Success: Greens[500],
633-
Info: Layer.Highlight.Outline,
634-
Warning: Reds[400],
635-
Error: Reds[500],
629+
Feedback: Chad.Text.Feedback,
636630
},
637631
FontFamily: {
638632
Heading: 'Minecraft',

‎packages/curve-ui-kit/src/themes/mui-alert.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Components } from '@mui/material/styles'
2+
import { DesignSystem } from './design'
3+
import { CheckIcon } from '@ui-kit/shared/icons/CheckIcon'
4+
import { InfoCircledIcon } from '@ui-kit/shared/icons/InfoCircledIcon'
5+
import { ExclamationTriangleIcon } from '@ui-kit/shared/icons/ExclamationTriangleIcon'
6+
7+
export const defineMuiAlert = ({
8+
Layer: { 1: Layer1, Feedback },
9+
Text: { TextColors },
10+
}: DesignSystem): Components['MuiAlert'] => ({
11+
defaultProps: {
12+
iconMapping: {
13+
success: <CheckIcon fontSize={'small'} />,
14+
info: <InfoCircledIcon fontSize={'small'} />,
15+
warning: <ExclamationTriangleIcon fontSize={'small'} />,
16+
error: <ExclamationTriangleIcon fontSize={'small'} />,
17+
},
18+
},
19+
styleOverrides: {
20+
outlined: {
21+
backgroundColor: Layer1.Fill,
22+
color: TextColors.Secondary,
23+
'&.MuiAlert-colorInfo .MuiAlertTitle-root': { color: Feedback.Info },
24+
'&.MuiAlert-colorSuccess .MuiAlertTitle-root': { color: Feedback.Success },
25+
'&.MuiAlert-colorWarning .MuiAlertTitle-root': { color: Feedback.Warning },
26+
'&.MuiAlert-colorError .MuiAlertTitle-root': { color: Feedback.Error },
27+
},
28+
filled: {
29+
color: TextColors.Feedback.Inverted,
30+
'&.MuiAlert-colorInfo': { backgroundColor: Feedback.Info },
31+
'&.MuiAlert-colorSuccess': { backgroundColor: Feedback.Success },
32+
'&.MuiAlert-colorWarning': { backgroundColor: Feedback.Warning, color: TextColors.Primary },
33+
'&.MuiAlert-colorError': { backgroundColor: Feedback.Error },
34+
},
35+
},
36+
})

0 commit comments

Comments
 (0)