Merge pull request #928 from getmaxun/alert-theme

feat(ui): match theme of standard & outlined alerts

src/components/ui/AlertSnackbar.tsx

@@ -7,7 +7,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
   ref,
 ) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+  return <MuiAlert elevation={6} ref={ref} variant="outlined" {...props} />;
 });
 
 export interface AlertSnackbarProps {

src/context/theme-provider.tsx

@@ -65,6 +65,13 @@ const lightTheme = createTheme({
             color: "#ff00c3",
           },
         },
+        outlinedInfo: {
+          color: '#000000ff',
+          borderColor: '#000000ff',
+          "& .MuiAlert-icon": {
+            color: "#000000ff",
+          },
+        },
       },
     },
     MuiAlertTitle: {
@@ -185,6 +192,13 @@ const darkTheme = createTheme({
             color: "#ff66d9",
           },
         },
+        outlinedInfo: {
+          color: '#ffffff',
+          borderColor: '#ffffff',
+          "& .MuiAlert-icon": {
+            color: "#ffffff",
+          },
+        },
       },
     },
     MuiAlertTitle: {
@@ -196,7 +210,6 @@ const darkTheme = createTheme({
         },
       },
     },
-    // Additional dark mode specific components
     MuiPaper: {
       styleOverrides: {
         root: {
@@ -233,14 +246,6 @@ const darkTheme = createTheme({
         },
       },
     },
-    //   MuiTextField:{
-    //     styleOverrides: {
-    //       root: {
-    //         '& .MuiInputBase-root': {
-    //           backgroundColor: '#1d1c1cff',
-    //         },
-    //   }
-    // }}
   },
 });
 
@@ -280,4 +285,4 @@ const ThemeModeProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ThemeModeProvider;
+export default ThemeModeProvider;