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

fix: make Alert colors scheme-aware using palette tokens for berry/ocean/craft/forest compatibility

Browse Source
This commit is contained in:
Kirill
2026-05-27 23:23:55 +05:00
parent 8133e0cf63
commit 0bfff541a3
3 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/providers/AppProviders.tsx
+77 -77
View File
@@ -1,6 +1,6 @@
import { type PropsWithChildren, useMemo } from 'react' import { type PropsWithChildren, useMemo } from 'react'
import CssBaseline from '@mui/material/CssBaseline' import CssBaseline from '@mui/material/CssBaseline'
import { ThemeProvider, createTheme } from '@mui/material/styles' import { alpha, ThemeProvider, createTheme } from '@mui/material/styles'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ThemeControllerProvider, useThemeController } from '@/app/providers/theme-controller' import { ThemeControllerProvider, useThemeController } from '@/app/providers/theme-controller'
import { SseProvider } from './SseProvider' import { SseProvider } from './SseProvider'
@@ -223,89 +223,89 @@ function AppThemeInner({ children }: PropsWithChildren) {
marginLeft: 8, marginLeft: 8,
}, },
}, },
colorSuccess: { colorSuccess: ({ theme }) => {
bgcolor: isDark ? 'rgba(102,187,106,0.08)' : '#EDF3EC', const isDark = theme.palette.mode === 'dark'
borderColor: isDark ? 'rgba(102,187,106,0.2)' : '#C5DFC2', const p = theme.palette.success
color: isDark ? '#A5D6A7' : '#346538', return {
'& .MuiAlert-icon': { bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
color: isDark ? '#A5D6A7' : '#346538', borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
}, color: isDark ? p.light : p.dark,
'&.MuiAlert-outlined': { '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
bgcolor: 'transparent', '&.MuiAlert-outlined': {
borderColor: isDark ? 'rgba(102,187,106,0.3)' : '#C5DFC2', bgcolor: 'transparent',
color: isDark ? '#A5D6A7' : '#346538', borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark,
color: isDark ? '#A5D6A7' : '#346538', '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
}, },
}, '&.MuiAlert-filled': {
'&.MuiAlert-filled': { bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
bgcolor: isDark ? 'rgba(102,187,106,0.15)' : '#346538', borderColor: 'transparent',
borderColor: 'transparent', color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
color: isDark ? '#E8F5E9' : '#FFFFFF', },
}, }
}, },
colorError: { colorError: ({ theme }) => {
bgcolor: isDark ? 'rgba(239,83,80,0.08)' : '#FDEBEC', const isDark = theme.palette.mode === 'dark'
borderColor: isDark ? 'rgba(239,83,80,0.2)' : '#F5C6C7', const p = theme.palette.error
color: isDark ? '#EF9A9A' : '#9F2F2D', return {
'& .MuiAlert-icon': { bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
color: isDark ? '#EF9A9A' : '#9F2F2D', borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
}, color: isDark ? p.light : p.dark,
'&.MuiAlert-outlined': { '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
bgcolor: 'transparent', '&.MuiAlert-outlined': {
borderColor: isDark ? 'rgba(239,83,80,0.3)' : '#F5C6C7', bgcolor: 'transparent',
color: isDark ? '#EF9A9A' : '#9F2F2D', borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark,
color: isDark ? '#EF9A9A' : '#9F2F2D', '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
}, },
}, '&.MuiAlert-filled': {
'&.MuiAlert-filled': { bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
bgcolor: isDark ? 'rgba(239,83,80,0.15)' : '#9F2F2D', borderColor: 'transparent',
borderColor: 'transparent', color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
color: isDark ? '#FFEBEE' : '#FFFFFF', },
}, }
}, },
colorWarning: { colorWarning: ({ theme }) => {
bgcolor: isDark ? 'rgba(255,183,77,0.08)' : '#FBF3DB', const isDark = theme.palette.mode === 'dark'
borderColor: isDark ? 'rgba(255,183,77,0.2)' : '#F0DCA0', const p = theme.palette.warning
color: isDark ? '#FFD54F' : '#956400', return {
'& .MuiAlert-icon': { bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
color: isDark ? '#FFD54F' : '#956400', borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
}, color: isDark ? p.light : p.dark,
'&.MuiAlert-outlined': { '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
bgcolor: 'transparent', '&.MuiAlert-outlined': {
borderColor: isDark ? 'rgba(255,183,77,0.3)' : '#F0DCA0', bgcolor: 'transparent',
color: isDark ? '#FFD54F' : '#956400', borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark,
color: isDark ? '#FFD54F' : '#956400', '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
}, },
}, '&.MuiAlert-filled': {
'&.MuiAlert-filled': { bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
bgcolor: isDark ? 'rgba(255,183,77,0.15)' : '#956400', borderColor: 'transparent',
borderColor: 'transparent', color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
color: isDark ? '#FFF8E1' : '#FFFFFF', },
}, }
}, },
colorInfo: { colorInfo: ({ theme }) => {
bgcolor: isDark ? 'rgba(121,134,203,0.08)' : '#E1F3FE', const isDark = theme.palette.mode === 'dark'
borderColor: isDark ? 'rgba(121,134,203,0.2)' : '#B8D8F0', const p = theme.palette.info
color: isDark ? '#9FA8DA' : '#1F6C9F', return {
'& .MuiAlert-icon': { bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
color: isDark ? '#9FA8DA' : '#1F6C9F', borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
}, color: isDark ? p.light : p.dark,
'&.MuiAlert-outlined': { '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
bgcolor: 'transparent', '&.MuiAlert-outlined': {
borderColor: isDark ? 'rgba(121,134,203,0.3)' : '#B8D8F0', bgcolor: 'transparent',
color: isDark ? '#9FA8DA' : '#1F6C9F', borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark,
color: isDark ? '#9FA8DA' : '#1F6C9F', '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
}, },
}, '&.MuiAlert-filled': {
'&.MuiAlert-filled': { bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
bgcolor: isDark ? 'rgba(121,134,203,0.15)' : '#1F6C9F', borderColor: 'transparent',
borderColor: 'transparent', color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
color: isDark ? '#E8EAF6' : '#FFFFFF', },
}, }
}, },
}, },
}, },
client/src/shared/ui/NotificationStack/NotificationStack.tsx
+19 -22
View File
@@ -13,15 +13,16 @@ export function NotificationStack() {
return ( return (
<Stack <Stack
spacing={1} spacing={1.5}
sx={{ sx={{
position: 'fixed', position: 'fixed',
bottom: 80, bottom: 88,
left: '50%', left: '50%',
transform: 'translateX(-50%)', transform: 'translateX(-50%)',
zIndex: 2000, zIndex: 2000,
width: 'auto', width: 'auto',
maxWidth: 400, minWidth: 360,
maxWidth: 440,
}} }}
> >
{notifications.map((n) => ( {notifications.map((n) => (
@@ -31,41 +32,36 @@ export function NotificationStack() {
autoHideDuration={n.autoHideDuration} autoHideDuration={n.autoHideDuration}
onClose={() => dismissNotification(n.id)} onClose={() => dismissNotification(n.id)}
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
sx={{ sx={{ position: 'static' }}
'& .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={n.type} severity={n.type}
variant="standard" variant="standard"
onClose={() => dismissNotification(n.id)} onClose={() => dismissNotification(n.id)}
sx={{ sx={{
bgcolor: 'transparent', width: '100%',
border: 'none', px: 2,
boxShadow: 'none', py: 1.5,
p: 1.5,
alignItems: 'center', alignItems: 'center',
'& .MuiAlert-icon': { '& .MuiAlert-icon': {
padding: 0, py: 0.5,
mr: 1.5, mr: 1.5,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
'& .MuiAlert-message': { '& .MuiAlert-message': {
padding: 0, py: 0.5,
fontSize: '0.875rem', fontSize: '0.875rem',
fontWeight: 600, fontWeight: 600,
lineHeight: 1.5,
}, },
'& .MuiAlert-action': { '& .MuiAlert-action': {
padding: 0, py: 0.5,
mr: 0, pr: 0,
ml: 1, ml: 1.5,
display: 'flex',
alignItems: 'center',
gap: 0.5,
}, },
}} }}
action={ action={
@@ -79,11 +75,12 @@ export function NotificationStack() {
navigate(n.actionPath!) navigate(n.actionPath!)
}} }}
sx={{ sx={{
fontWeight: 600, fontWeight: 700,
fontSize: '0.8125rem', fontSize: '0.8125rem',
px: 1.5, px: 1.5,
py: 0.5, py: 0.5,
borderRadius: 8, borderRadius: 8,
whiteSpace: 'nowrap',
color: 'success.main', color: 'success.main',
'&:hover': { '&:hover': {
bgcolor: 'action.hover', bgcolor: 'action.hover',
server/prisma/prisma/dev.db
BIN
View File
Binary file not shown.