Refactor style

src/components/NotAuthenticated.tsx

@@ -783,13 +783,11 @@ export const NotAuthenticated = ({
             id="alert-dialog-title"
             sx={{
               textAlign: 'center',
-              color: theme.palette.text.primary,
               fontWeight: 'bold',
               opacity: 1,
             }}
           >
-            {t('auth:node.custom_many', { postProcess: 'capitalizeFirstChar' })}
+            {t('auth:node.custom_many', { postProcess: 'capitalizeAll' })}
-            :
           </DialogTitle>
 
           <DialogContent>
@@ -819,7 +817,6 @@ export const NotAuthenticated = ({
                   >
                     <Typography
                       sx={{
-                        color: theme.palette.text.primary,
                         fontSize: '14px',
                       }}
                     >
@@ -828,10 +825,10 @@ export const NotAuthenticated = ({
 
                     <Box
                       sx={{
+                        alignItems: 'center',
                         display: 'flex',
                         gap: '10px',
                         justifyContent: 'space-between',
-                        alignItems: 'center',
                       }}
                     >
                       <Button
@@ -885,7 +882,6 @@ export const NotAuthenticated = ({
                       >
                         <Typography
                           sx={{
-                            color: theme.palette.text.primary,
                             fontSize: '14px',
                           }}
                         >
@@ -978,10 +974,10 @@ export const NotAuthenticated = ({
               {mode === 'add-node' && (
                 <Box
                   sx={{
+                    alignItems: 'center',
                     display: 'flex',
                     gap: '10px',
                     justifyContent: 'space-between',
-                    alignItems: 'center',
                   }}
                 >
                   <Input
@@ -1071,7 +1067,6 @@ export const NotAuthenticated = ({
             id="alert-dialog-title"
             sx={{
               textAlign: 'center',
-              color: theme.palette.text.primary,
               fontWeight: 'bold',
               opacity: 1,
             }}

src/styles/theme-common.ts

@@ -80,6 +80,14 @@ const commonThemeOptions = {
         },
       },
     },
+
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
   },
 };
 

src/styles/theme-dark.ts

@@ -116,16 +116,21 @@ export const darkThemeOptions: ThemeOptions = {
 
     MuiDialog: {
       styleOverrides: {
+        root: {
+          backgroundColor: 'rgb(77, 80, 85)',
+          color: 'rgb(255, 255, 255)',
+        },
         paper: {
           backgroundImage: 'none',
         },
       },
     },
 
-    MuiPopover: {
+    MuiPaper: {
       styleOverrides: {
-        paper: {
+        root: {
-          backgroundImage: 'none',
+          backgroundColor: 'rgb(77, 80, 85)',
+          color: 'rgb(255, 255, 255)',
         },
       },
     },

src/styles/theme-light.ts

@@ -118,16 +118,21 @@ export const lightThemeOptions: ThemeOptions = {
 
     MuiDialog: {
       styleOverrides: {
+        root: {
+          backgroundColor: 'rgb(220, 220, 220)',
+          color: 'rgba(0, 0, 0, 0.87)',
+        },
         paper: {
           backgroundImage: 'none',
         },
       },
     },
 
-    MuiPopover: {
+    MuiPaper: {
       styleOverrides: {
-        paper: {
+        root: {
-          backgroundImage: 'none',
+          backgroundColor: 'rgb(220, 220, 220)',
+          color: 'rgba(0, 0, 0, 0.87)',
         },
       },
     },