initialised commit on the ui converted in mui to astryx and changed the design to doormile

src/components/third-party/Notistack.js

@@ -1,8 +1,5 @@
 import PropTypes from 'prop-types';
 
-//material-ui
-import { styled } from '@mui/material/styles';
-
 // third-party
 import { SnackbarProvider } from 'notistack';
 
@@ -12,24 +9,16 @@ import { useSelector } from 'store';
 // assets
 import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
 
-// custom styles
-const StyledSnackbarProvider = styled(SnackbarProvider)(({ theme }) => ({
-  '&.notistack-MuiContent-default': {
-    backgroundColor: theme.palette.primary.main
-  },
-  '&.notistack-MuiContent-error': {
-    backgroundColor: theme.palette.error.main
-  },
-  '&.notistack-MuiContent-success': {
-    backgroundColor: theme.palette.success.main
-  },
-  '&.notistack-MuiContent-info': {
-    backgroundColor: theme.palette.info.main
-  },
-  '&.notistack-MuiContent-warning': {
-    backgroundColor: theme.palette.warning.main
-  }
-}));
+// Semantic notification colors — static (this app runs light-mode only), matching the
+// brand palette used across the Astryx-converted pages (BRAND red for the default/
+// primary notistack variant, standard semantic tones for error/success/info/warning).
+const notistackColors = `
+  .notistack-MuiContent-default { background-color: #C01227 !important; }
+  .notistack-MuiContent-error { background-color: #ef4444 !important; }
+  .notistack-MuiContent-success { background-color: #10b981 !important; }
+  .notistack-MuiContent-info { background-color: #3b82f6 !important; }
+  .notistack-MuiContent-warning { background-color: #f59e0b !important; }
+`;
 
 // ===========================|| SNACKBAR - NOTISTACK ||=========================== //
 
@@ -38,23 +27,26 @@ const Notistack = ({ children }) => {
   const iconSX = { marginRight: 8, fontSize: '1.15rem' };
 
   return (
-    <StyledSnackbarProvider
-      maxSnack={snackbar.maxStack}
-      dense={snackbar.dense}
-      iconVariant={
-        snackbar.iconVariant === 'useemojis'
-          ? {
-              success: <CheckCircleOutlined style={iconSX} />,
-              error: <CloseCircleOutlined style={iconSX} />,
-              warning: <WarningOutlined style={iconSX} />,
-              info: <InfoCircleOutlined style={iconSX} />
-            }
-          : undefined
-      }
-      hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
-    >
-      {children}
-    </StyledSnackbarProvider>
+    <>
+      <style>{notistackColors}</style>
+      <SnackbarProvider
+        maxSnack={snackbar.maxStack}
+        dense={snackbar.dense}
+        iconVariant={
+          snackbar.iconVariant === 'useemojis'
+            ? {
+                success: <CheckCircleOutlined style={iconSX} />,
+                error: <CloseCircleOutlined style={iconSX} />,
+                warning: <WarningOutlined style={iconSX} />,
+                info: <InfoCircleOutlined style={iconSX} />
+              }
+            : undefined
+        }
+        hideIconVariant={snackbar.iconVariant === 'hide' ? true : false}
+      >
+        {children}
+      </SnackbarProvider>
+    </>
   );
 };