admin/shop-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: style Snackbar and Alert with minimalist warm monochrome palette

Browse Source
This commit is contained in:
Kirill
2026-05-25 19:03:50 +05:00
parent f24308bb56
commit 9784ac3cb2
3 changed files with 141 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/providers/AppProviders.tsx
+102
View File
@@ -199,6 +199,108 @@ function AppThemeInner({ children }: PropsWithChildren) {
},
},
},
MuiAlert: {
styleOverrides: {
root: {
borderRadius: 12,
border: '1px solid',
boxShadow: 'none',
fontWeight: 500,
'& .MuiAlert-icon': {
padding: 0,
},
},
standardSuccess: {
bgcolor: isDark ? 'rgba(102,187,106,0.08)' : '#EDF3EC',
borderColor: isDark ? 'rgba(102,187,106,0.2)' : '#C5DFC2',
color: isDark ? '#A5D6A7' : '#346538',
'& .MuiAlert-icon': {
color: isDark ? '#A5D6A7' : '#346538',
},
},
standardError: {
bgcolor: isDark ? 'rgba(239,83,80,0.08)' : '#FDEBEC',
borderColor: isDark ? 'rgba(239,83,80,0.2)' : '#F5C6C7',
color: isDark ? '#EF9A9A' : '#9F2F2D',
'& .MuiAlert-icon': {
color: isDark ? '#EF9A9A' : '#9F2F2D',
},
},
standardWarning: {
bgcolor: isDark ? 'rgba(255,183,77,0.08)' : '#FBF3DB',
borderColor: isDark ? 'rgba(255,183,77,0.2)' : '#F0DCA0',
color: isDark ? '#FFD54F' : '#956400',
'& .MuiAlert-icon': {
color: isDark ? '#FFD54F' : '#956400',
},
},
standardInfo: {
bgcolor: isDark ? 'rgba(121,134,203,0.08)' : '#E1F3FE',
borderColor: isDark ? 'rgba(121,134,203,0.2)' : '#B8D8F0',
color: isDark ? '#9FA8DA' : '#1F6C9F',
'& .MuiAlert-icon': {
color: isDark ? '#9FA8DA' : '#1F6C9F',
},
},
outlinedSuccess: {
borderColor: isDark ? 'rgba(102,187,106,0.3)' : '#C5DFC2',
color: isDark ? '#A5D6A7' : '#346538',
'& .MuiAlert-icon': {
color: isDark ? '#A5D6A7' : '#346538',
},
},
outlinedError: {
borderColor: isDark ? 'rgba(239,83,80,0.3)' : '#F5C6C7',
color: isDark ? '#EF9A9A' : '#9F2F2D',
'& .MuiAlert-icon': {
color: isDark ? '#EF9A9A' : '#9F2F2D',
},
},
outlinedWarning: {
borderColor: isDark ? 'rgba(255,183,77,0.3)' : '#F0DCA0',
color: isDark ? '#FFD54F' : '#956400',
'& .MuiAlert-icon': {
color: isDark ? '#FFD54F' : '#956400',
},
},
outlinedInfo: {
borderColor: isDark ? 'rgba(121,134,203,0.3)' : '#B8D8F0',
color: isDark ? '#9FA8DA' : '#1F6C9F',
'& .MuiAlert-icon': {
color: isDark ? '#9FA8DA' : '#1F6C9F',
},
},
filledSuccess: {
bgcolor: isDark ? 'rgba(102,187,106,0.15)' : '#346538',
color: isDark ? '#E8F5E9' : '#FFFFFF',
},
filledError: {
bgcolor: isDark ? 'rgba(239,83,80,0.15)' : '#9F2F2D',
color: isDark ? '#FFEBEE' : '#FFFFFF',
},
filledWarning: {
bgcolor: isDark ? 'rgba(255,183,77,0.15)' : '#956400',
color: isDark ? '#FFF8E1' : '#FFFFFF',
},
filledInfo: {
bgcolor: isDark ? 'rgba(121,134,203,0.15)' : '#1F6C9F',
color: isDark ? '#E8EAF6' : '#FFFFFF',
},
},
},
MuiSnackbarContent: {
styleOverrides: {
root: {
borderRadius: 12,
border: '1px solid',
borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)',
bgcolor: isDark ? '#1E1E1E' : '#FFFFFF',
boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
color: isDark ? '#F2F2F2' : '#1F1B16',
fontWeight: 500,
},
},
},
},
}),
[controller.resolvedMode, controller.scheme],
client/src/shared/ui/CartSnackbar.tsx
+39 -1
View File
@@ -25,12 +25,50 @@ export function CartSnackbar() {
onClose={handleClose}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
autoHideDuration={4000}
sx={{
'& .MuiSnackbarContent-root': {
borderRadius: 12,
border: '1px solid',
borderColor: 'rgba(0,0,0,0.06)',
bgcolor: 'background.paper',
boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
},
}}
>
<Alert
severity="success"
variant="standard"
onClose={handleClose}
sx={{
bgcolor: 'transparent',
border: 'none',
boxShadow: 'none',
p: 1.5,
'& .MuiAlert-message': {
fontSize: '0.875rem',
fontWeight: 600,
},
'& .MuiAlert-action': {
mr: 0,
},
}}
action={
<Button color="success" size="small" onClick={handleGoToCart}>
<Button
size="small"
variant="text"
onClick={handleGoToCart}
sx={{
fontWeight: 600,
fontSize: '0.8125rem',
px: 1.5,
py: 0.5,
borderRadius: 8,
color: 'success.main',
'&:hover': {
bgcolor: 'action.hover',
},
}}
>
Перейти в корзину
</Button>
}