From 0bfff541a3c68453a199cfb13c9d7d6a2d321c70 Mon Sep 17 00:00:00 2001 From: Kirill Date: Wed, 27 May 2026 23:23:55 +0500 Subject: [PATCH] fix: make Alert colors scheme-aware using palette tokens for berry/ocean/craft/forest compatibility --- client/src/app/providers/AppProviders.tsx | 154 +++++++++--------- .../NotificationStack/NotificationStack.tsx | 41 +++-- server/prisma/prisma/dev.db | Bin 352256 -> 352256 bytes 3 files changed, 96 insertions(+), 99 deletions(-) diff --git a/client/src/app/providers/AppProviders.tsx b/client/src/app/providers/AppProviders.tsx index 344264a..293f057 100644 --- a/client/src/app/providers/AppProviders.tsx +++ b/client/src/app/providers/AppProviders.tsx @@ -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', + }, + } }, }, }, diff --git a/client/src/shared/ui/NotificationStack/NotificationStack.tsx b/client/src/shared/ui/NotificationStack/NotificationStack.tsx index 7ab3c73..bd1fef7 100644 --- a/client/src/shared/ui/NotificationStack/NotificationStack.tsx +++ b/client/src/shared/ui/NotificationStack/NotificationStack.tsx @@ -13,15 +13,16 @@ export function NotificationStack() { return ( {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' }} > 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', diff --git a/server/prisma/prisma/dev.db b/server/prisma/prisma/dev.db index 1ef69fbda3b67c968ddc7bfdadca507c2a212add..4c1a5c9385248278d832d0c77858d529261182bb 100644 GIT binary patch delta 321 zcmZoTAlh(1bb>Tv&_o$$#-PT8tqF_^`?(ny7?}9|82Fd-`)w99aN<`F=V7zwWVN?X z&MnAKHP0(BHZU+Q%rUpj%&RacF*V3dW1N?@cH@re=jJoYO@HmrB%&V9jjY4m&>W~E z8>Az-B0aq_H9H5SBQ^%4!;FK8{|E#B5&lP;1q){LPhY;CQPxJ5*`5(%8y3CX2w5y{ z;n}u5qT}D_AqgUP)daF0fB0Fz`>{KLPZqFaPvNeS^=R_H2M$X2BtqF_^`?>j-GcfY|G4T8G`)w99aN<`FXJNDFWVN?X z&MnAKDbG)?GB7aA&oQ^mEG#rODbCNxVw{(?^g;0SbMqPHroZ-Q65(KAV2A|in7(>F zqa+(hT3Z?MA5&xsjf(5hrr!Qa6C~LzER4ofOyTsJo2xxXH$n2u5jJ!hg z%2HWodq$iVvuxYI$kKprs6CS`E7(wwm6Fqs0QtNuTtHhG`A;zLpWr_M^p-FG^hkdu jb2gAVb4G;Ir%&)_QU-g1k)