design: style Snackbar and Alert with minimalist warm monochrome palette
This commit is contained in:
@@ -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],
|
[controller.resolvedMode, controller.scheme],
|
||||||
|
|||||||
@@ -25,12 +25,50 @@ export function CartSnackbar() {
|
|||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||||
autoHideDuration={4000}
|
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
|
<Alert
|
||||||
severity="success"
|
severity="success"
|
||||||
|
variant="standard"
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
|
sx={{
|
||||||
|
bgcolor: 'transparent',
|
||||||
|
border: 'none',
|
||||||
|
boxShadow: 'none',
|
||||||
|
p: 1.5,
|
||||||
|
'& .MuiAlert-message': {
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
fontWeight: 600,
|
||||||
|
},
|
||||||
|
'& .MuiAlert-action': {
|
||||||
|
mr: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
action={
|
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>
|
</Button>
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
Reference in New Issue
Block a user