fix: make Alert colors scheme-aware using palette tokens for berry/ocean/craft/forest compatibility
This commit is contained in:
Kirill
@@ -1,6 +1,6 @@
|
||||
import { type PropsWithChildren, useMemo } from 'react'
|
||||
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 { ThemeControllerProvider, useThemeController } from '@/app/providers/theme-controller'
|
||||
import { SseProvider } from './SseProvider'
|
||||
@@ -223,89 +223,89 @@ function AppThemeInner({ children }: PropsWithChildren) {
|
||||
marginLeft: 8,
|
||||
},
|
||||
},
|
||||
colorSuccess: {
|
||||
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',
|
||||
},
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? 'rgba(102,187,106,0.3)' : '#C5DFC2',
|
||||
color: isDark ? '#A5D6A7' : '#346538',
|
||||
'& .MuiAlert-icon': {
|
||||
color: isDark ? '#A5D6A7' : '#346538',
|
||||
colorSuccess: ({ theme }) => {
|
||||
const isDark = theme.palette.mode === 'dark'
|
||||
const p = theme.palette.success
|
||||
return {
|
||||
bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
|
||||
borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
},
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? 'rgba(102,187,106,0.15)' : '#346538',
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? '#E8F5E9' : '#FFFFFF',
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
|
||||
},
|
||||
}
|
||||
},
|
||||
colorError: {
|
||||
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',
|
||||
},
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? 'rgba(239,83,80,0.3)' : '#F5C6C7',
|
||||
color: isDark ? '#EF9A9A' : '#9F2F2D',
|
||||
'& .MuiAlert-icon': {
|
||||
color: isDark ? '#EF9A9A' : '#9F2F2D',
|
||||
colorError: ({ theme }) => {
|
||||
const isDark = theme.palette.mode === 'dark'
|
||||
const p = theme.palette.error
|
||||
return {
|
||||
bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
|
||||
borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
},
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? 'rgba(239,83,80,0.15)' : '#9F2F2D',
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? '#FFEBEE' : '#FFFFFF',
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
|
||||
},
|
||||
}
|
||||
},
|
||||
colorWarning: {
|
||||
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',
|
||||
},
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? 'rgba(255,183,77,0.3)' : '#F0DCA0',
|
||||
color: isDark ? '#FFD54F' : '#956400',
|
||||
'& .MuiAlert-icon': {
|
||||
color: isDark ? '#FFD54F' : '#956400',
|
||||
colorWarning: ({ theme }) => {
|
||||
const isDark = theme.palette.mode === 'dark'
|
||||
const p = theme.palette.warning
|
||||
return {
|
||||
bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
|
||||
borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
},
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? 'rgba(255,183,77,0.15)' : '#956400',
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? '#FFF8E1' : '#FFFFFF',
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
|
||||
},
|
||||
}
|
||||
},
|
||||
colorInfo: {
|
||||
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',
|
||||
},
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? 'rgba(121,134,203,0.3)' : '#B8D8F0',
|
||||
color: isDark ? '#9FA8DA' : '#1F6C9F',
|
||||
'& .MuiAlert-icon': {
|
||||
color: isDark ? '#9FA8DA' : '#1F6C9F',
|
||||
colorInfo: ({ theme }) => {
|
||||
const isDark = theme.palette.mode === 'dark'
|
||||
const p = theme.palette.info
|
||||
return {
|
||||
bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
|
||||
borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
'&.MuiAlert-outlined': {
|
||||
bgcolor: 'transparent',
|
||||
borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
|
||||
color: isDark ? p.light : p.dark,
|
||||
'& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
|
||||
},
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? 'rgba(121,134,203,0.15)' : '#1F6C9F',
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? '#E8EAF6' : '#FFFFFF',
|
||||
},
|
||||
'&.MuiAlert-filled': {
|
||||
bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
|
||||
borderColor: 'transparent',
|
||||
color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -13,15 +13,16 @@ export function NotificationStack() {
|
||||
|
||||
return (
|
||||
<Stack
|
||||
spacing={1}
|
||||
spacing={1.5}
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: 80,
|
||||
bottom: 88,
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
zIndex: 2000,
|
||||
width: 'auto',
|
||||
maxWidth: 400,
|
||||
minWidth: 360,
|
||||
maxWidth: 440,
|
||||
}}
|
||||
>
|
||||
{notifications.map((n) => (
|
||||
@@ -31,41 +32,36 @@ export function NotificationStack() {
|
||||
autoHideDuration={n.autoHideDuration}
|
||||
onClose={() => dismissNotification(n.id)}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
||||
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)',
|
||||
},
|
||||
}}
|
||||
sx={{ position: 'static' }}
|
||||
>
|
||||
<Alert
|
||||
severity={n.type}
|
||||
variant="standard"
|
||||
onClose={() => dismissNotification(n.id)}
|
||||
sx={{
|
||||
bgcolor: 'transparent',
|
||||
border: 'none',
|
||||
boxShadow: 'none',
|
||||
p: 1.5,
|
||||
width: '100%',
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
alignItems: 'center',
|
||||
'& .MuiAlert-icon': {
|
||||
padding: 0,
|
||||
py: 0.5,
|
||||
mr: 1.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
'& .MuiAlert-message': {
|
||||
padding: 0,
|
||||
py: 0.5,
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 600,
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
'& .MuiAlert-action': {
|
||||
padding: 0,
|
||||
mr: 0,
|
||||
ml: 1,
|
||||
py: 0.5,
|
||||
pr: 0,
|
||||
ml: 1.5,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
},
|
||||
}}
|
||||
action={
|
||||
@@ -79,11 +75,12 @@ export function NotificationStack() {
|
||||
navigate(n.actionPath!)
|
||||
}}
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
fontWeight: 700,
|
||||
fontSize: '0.8125rem',
|
||||
px: 1.5,
|
||||
py: 0.5,
|
||||
borderRadius: 8,
|
||||
whiteSpace: 'nowrap',
|
||||
color: 'success.main',
|
||||
'&:hover': {
|
||||
bgcolor: 'action.hover',
|
||||
|
||||
Binary file not shown.
Reference in New Issue
Block a user