improve theme creation

.github/workflows/mirroring.yaml

@@ -6,7 +6,7 @@ on:
       - main
       - dev
     tags:
-        - '*'
+      - '*'
 
 jobs:
   git-sync:

src/components/app-theme/AppTheme.tsx

@@ -5,181 +5,181 @@ import createTheme from '@mui/material/styles/createTheme';
 interface PropsType {
   children?: ReactNode;
 }
+const BORDER_RADIUS = 12;
+const INPUT_BG_COLOR = '#ffffff88';
+const { shadows } = createTheme();
+shadows[1] =
+  'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px';
+shadows[2] =
+  'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px';
+shadows[3] = 'rgba(0, 0, 0, 0.35) 0px 25px 20px -20px';
 
-const AppTheme = (props: PropsType) => {
-  const BORDER_RADIUS = 12;
-  const INPUT_BG_COLOR = '#ffffff88';
-  const { shadows } = createTheme();
-  shadows[1] =
-    'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px';
-  shadows[2] =
-    'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px';
-  shadows[3] = 'rgba(0, 0, 0, 0.35) 0px 25px 20px -20px';
-
-  const theme = createTheme({
-    palette: {
-      primary: {
-        light: '#3784fa',
-        main: '#0561f0',
-        dark: '#022964',
-        contrastText: '#fff',
-      },
-      secondary: {
-        light: '#fde3a6',
-        main: '#fbae01',
-        dark: '#7a5600',
-        contrastText: '#fff',
-      },
-      success: {
-        light: '#00ff0a',
-        main: '#2f7f57',
-        dark: '#1b5e20',
-        contrastText: '#fff',
-      },
-      error: {
-        light: '#ff2828',
-        main: '#d32f2f',
-        dark: '#c62828',
-        contrastText: '#fff',
-      },
+const theme = createTheme({
+  palette: {
+    primary: {
+      light: '#3784fa',
+      main: '#0561f0',
+      dark: '#022964',
+      contrastText: '#fff',
     },
-    shape: {
-      borderRadius: BORDER_RADIUS,
+    secondary: {
+      light: '#fde3a6',
+      main: '#fbae01',
+      dark: '#7a5600',
+      contrastText: '#fff',
     },
-    typography: {
-      h1: {
-        fontSize: '1.1rem',
-        fontWeight: 600,
-        flexGrow: 1,
-      },
-      h2: {
-        fontSize: '1rem',
-        fontWeight: 600,
-        flexGrow: 1,
-      },
-      h4: {
-        fontSize: '1rem',
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
+    success: {
+      light: '#00ff0a',
+      main: '#2f7f57',
+      dark: '#1b5e20',
+      contrastText: '#fff',
+    },
+    error: {
+      light: '#ff2828',
+      main: '#d32f2f',
+      dark: '#c62828',
+      contrastText: '#fff',
     },
-    shadows,
-    components: {
-      MuiButton: {
-        defaultProps: {
-          variant: 'contained',
-          fullWidth: true,
+  },
+  shape: {
+    borderRadius: BORDER_RADIUS,
+  },
+  typography: {
+    h1: {
+      fontSize: '1.1rem',
+      fontWeight: 600,
+      flexGrow: 1,
+    },
+    h2: {
+      fontSize: '1rem',
+      fontWeight: 600,
+      flexGrow: 1,
+    },
+    h4: {
+      fontSize: '1rem',
+      fontWeight: 600,
+      lineHeight: 1.5,
+    },
+  },
+  shadows,
+  components: {
+    MuiButton: {
+      defaultProps: {
+        variant: 'contained',
+        fullWidth: true,
+      },
+      styleOverrides: {
+        root: {
+          padding: '0.75rem',
+          fontSize: '1rem',
+          textTransform: 'none',
         },
-        styleOverrides: {
-          root: {
-            padding: '0.75rem',
-            fontSize: '1rem',
-            textTransform: 'none',
-          },
-          outlined: {
+        outlined: {
+          backgroundColor: '#eaeaea',
+          border: 0,
+          '&:focus': {
             backgroundColor: '#eaeaea',
             border: 0,
-            '&:focus': {
-              backgroundColor: '#eaeaea',
-              border: 0,
-            },
           },
         },
       },
-      MuiFormControl: {
-        defaultProps: {
-          variant: 'filled',
-          fullWidth: true,
-        },
+    },
+    MuiFormControl: {
+      defaultProps: {
+        variant: 'filled',
+        fullWidth: true,
       },
-      MuiTextField: {
-        defaultProps: {
-          variant: 'filled',
-          fullWidth: true,
-        },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'filled',
+        fullWidth: true,
       },
-      MuiFilledInput: {
-        defaultProps: {
-          disableUnderline: true,
-        },
-        styleOverrides: {
-          root: {
-            backgroundColor: INPUT_BG_COLOR,
-            borderRadius: BORDER_RADIUS,
-            '&.Mui-focused': {
-              backgroundColor: '#fff',
-            },
+    },
+    MuiFilledInput: {
+      defaultProps: {
+        disableUnderline: true,
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: INPUT_BG_COLOR,
+          borderRadius: BORDER_RADIUS,
+          '&.Mui-focused': {
+            backgroundColor: '#fff',
           },
         },
       },
-      MuiToggleButtonGroup: {
-        defaultProps: {
-          fullWidth: true,
+    },
+    MuiToggleButtonGroup: {
+      defaultProps: {
+        fullWidth: true,
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: INPUT_BG_COLOR,
         },
-        styleOverrides: {
-          root: {
-            backgroundColor: INPUT_BG_COLOR,
+        grouped: {
+          border: 0,
+          margin: 4,
+          '&:not(:first-of-type)': {
+            borderRadius: BORDER_RADIUS,
           },
-          grouped: {
-            border: 0,
-            margin: 4,
-            '&:not(:first-of-type)': {
-              borderRadius: BORDER_RADIUS,
-            },
-            '&:first-of-type': {
-              borderRadius: BORDER_RADIUS,
-            },
+          '&:first-of-type': {
+            borderRadius: BORDER_RADIUS,
           },
         },
       },
-      MuiCard: {
-        styleOverrides: {
-          root: {
-            backgroundColor: '#ffffffa8',
-          },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ffffffa8',
         },
       },
-      MuiAlertTitle: {
-        styleOverrides: {
-          root: {
-            fontWeight: 'bold',
-            textTransform: 'uppercase',
-            marginBottom: 0,
-          },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          fontWeight: 'bold',
+          textTransform: 'uppercase',
+          marginBottom: 0,
         },
       },
-      MuiSlider: {
-        styleOverrides: {
-          markActive: {
-            backgroundColor: '#0561f0',
-          },
-          mark: {
-            width: 8,
-            height: 8,
-            borderRadius: 8,
-            backgroundColor: '#9cbff5',
-          },
+    },
+    MuiSlider: {
+      styleOverrides: {
+        markActive: {
+          backgroundColor: '#0561f0',
+        },
+        mark: {
+          width: 8,
+          height: 8,
+          borderRadius: 8,
+          backgroundColor: '#9cbff5',
         },
       },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            textTransform: 'none',
-          },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
         },
       },
-      MuiDrawer: {
-        styleOverrides: {
-          paper: {
-            padding: '8px 24px 24px',
-            borderTopRightRadius: 20,
-            borderTopLeftRadius: 20,
-            maxHeight: 'calc(100vh - 100px)',
-          },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          padding: '8px 24px 24px',
+          borderTopRightRadius: 20,
+          borderTopLeftRadius: 20,
+          maxHeight: 'calc(100vh - 100px)',
         },
       },
     },
-  });
+  },
+});
+
+const AppTheme = (props: PropsType) => {
   return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
 };