Refactored mui themes into their own files for increased readability

Client/src/App.jsx

@@ -29,7 +29,8 @@ import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWin
 import PageSpeedDetails from "./Pages/PageSpeed/Details";
 import PageSpeedConfigure from "./Pages/PageSpeed/Configure";
 import { ThemeProvider } from "@emotion/react";
-import theme, { darkTheme } from "./Utils/Theme";
+import lightTheme from "./Utils/Theme/lightTheme";
+import darkTheme from "./Utils/Theme/darkTheme";
 import { useSelector } from "react-redux";
 
 function App() {
@@ -42,7 +43,7 @@ function App() {
   const mode = useSelector((state) => state.ui.mode);
 
   return (
-    <ThemeProvider theme={mode === "light" ? theme : darkTheme}>
+    <ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
       <Routes>
         <Route exact path="/" element={<HomeLayout />}>
           <Route

Client/src/Components/BasicTable/index.jsx

@@ -298,11 +298,8 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                   PaperProps: {
                     className: "pagination-dropdown",
                     sx: {
-                      border: 1,
-                      borderColor: theme.palette.border.light,
-                      borderRadius: theme.shape.borderRadius,
-                      boxShadow: theme.shape.boxShadow,
-                      backgroundColor: theme.palette.background.main,
+                      mt: 0,
+                      mb: theme.spacing(2),
                       "& li": {
                         p: theme.spacing(2),
                         color: theme.palette.text.tertiary,

Client/src/Components/Inputs/Select/index.jsx

@@ -78,16 +78,6 @@ const Select = ({
         displayEmpty
         inputProps={{ id: id }}
         MenuProps={{
-          PaperProps: {
-            sx: {
-              marginTop: theme.spacing(2),
-              border: 1,
-              borderColor: theme.palette.border.light,
-              borderRadius: theme.shape.borderRadius,
-              boxShadow: theme.shape.boxShadow,
-              backgroundColor: theme.palette.background.main,
-            },
-          },
           MenuListProps: {
             sx: {
               p: 0,

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -102,19 +102,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
         page={paginationController.page + 1} //0-indexed
         onChange={handlePageChange}
         shape="rounded"
-        sx={{
-          backgroundColor: theme.palette.background.main,
-          border: 1,
-          borderColor: theme.palette.border.light,
-          "& button": {
-            color: theme.palette.text.tertiary,
-            borderRadius: theme.shape.borderRadius,
-          },
-          "& li:first-of-type button, & li:last-of-type button": {
-            border: 1,
-            borderColor: theme.palette.border.light,
-          },
-        }}
         renderItem={(item) => (
           <PaginationItem
             slots={{
@@ -122,18 +109,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
               next: ArrowForwardRoundedIcon,
             }}
             {...item}
-            sx={{
-              "&:focus": {
-                outline: "none",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
-              "&.Mui-selected, &.Mui-selected:hover": {
-                backgroundColor: theme.palette.background.fill,
-              },
-            }}
           />
         )}
       />
@@ -164,30 +139,10 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
         </Box>
       ) : (
         <>
-          <TableContainer
-            component={Paper}
-            sx={{
-              border: `solid 1px ${theme.palette.border.light}`,
-              borderRadius: theme.shape.borderRadius,
-              backgroundColor: theme.palette.background.main,
-              "& .MuiTableCell-root": {
-                borderBottomColor: theme.palette.border.light,
-              },
-            }}
-          >
+          <TableContainer component={Paper}>
             <Table>
-              <TableHead
-                sx={{
-                  backgroundColor: theme.palette.background.accent,
-                }}
-              >
-                <TableRow
-                  sx={{
-                    "& > .MuiTableCell-root": {
-                      color: theme.palette.text.secondary,
-                    },
-                  }}
-                >
+              <TableHead>
+                <TableRow>
                   <TableCell>Monitor Name</TableCell>
                   <TableCell>Status</TableCell>
                   <TableCell>Date & Time</TableCell>

Client/src/Pages/Monitors/Details/PaginationTable/index.jsx

@@ -80,19 +80,6 @@ const PaginationTable = ({ monitorId, dateRange }) => {
         page={paginationController.page + 1} //0-indexed
         onChange={handlePageChange}
         shape="rounded"
-        sx={{
-          backgroundColor: theme.palette.background.main,
-          border: 1,
-          borderColor: theme.palette.border.light,
-          "& button": {
-            color: theme.palette.text.tertiary,
-            borderRadius: theme.shape.borderRadius,
-          },
-          "& li:first-of-type button, & li:last-of-type button": {
-            border: 1,
-            borderColor: theme.palette.border.light,
-          },
-        }}
         renderItem={(item) => (
           <PaginationItem
             slots={{
@@ -100,18 +87,6 @@ const PaginationTable = ({ monitorId, dateRange }) => {
               next: ArrowForwardRoundedIcon,
             }}
             {...item}
-            sx={{
-              "&:focus": {
-                outline: "none",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
-              "&.Mui-selected, &.Mui-selected:hover": {
-                backgroundColor: theme.palette.background.fill,
-              },
-            }}
           />
         )}
       />
@@ -120,45 +95,13 @@ const PaginationTable = ({ monitorId, dateRange }) => {
 
   return (
     <>
-      <TableContainer
-        component={Paper}
-        sx={{
-          border: `solid 1px ${theme.palette.border.light}`,
-          borderRadius: theme.shape.borderRadius,
-          backgroundColor: theme.palette.background.main,
-        }}
-      >
+      <TableContainer component={Paper}>
         <Table>
-          <TableHead
-            sx={{
-              backgroundColor: theme.palette.background.accent,
-            }}
-          >
+          <TableHead>
             <TableRow>
-              <TableCell
-                sx={{
-                  color: theme.palette.text.secondary,
-                  borderBottomColor: theme.palette.border.light,
-                }}
-              >
-                Status
-              </TableCell>
-              <TableCell
-                sx={{
-                  color: theme.palette.text.secondary,
-                  borderBottomColor: theme.palette.border.light,
-                }}
-              >
-                Date & Time
-              </TableCell>
-              <TableCell
-                sx={{
-                  color: theme.palette.text.secondary,
-                  borderBottomColor: theme.palette.border.light,
-                }}
-              >
-                Message
-              </TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Date & Time</TableCell>
+              <TableCell>Message</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -167,31 +110,17 @@ const PaginationTable = ({ monitorId, dateRange }) => {
 
               return (
                 <TableRow key={check._id}>
-                  <TableCell
-                    sx={{
-                      borderBottomColor: theme.palette.border.light,
-                    }}
-                  >
+                  <TableCell>
                     <StatusLabel
                       status={status}
                       text={status}
                       customStyles={{ textTransform: "capitalize" }}
                     />
                   </TableCell>
-                  <TableCell
-                    sx={{
-                      borderBottomColor: theme.palette.border.light,
-                    }}
-                  >
+                  <TableCell>
                     {new Date(check.createdAt).toLocaleString()}
                   </TableCell>
-                  <TableCell
-                    sx={{
-                      borderBottomColor: theme.palette.border.light,
-                    }}
-                  >
-                    {check.statusCode}
-                  </TableCell>
+                  <TableCell>{check.statusCode}</TableCell>
                 </TableRow>
               );
             })}

Client/src/Pages/Monitors/Home/actionsMenu.jsx

@@ -93,11 +93,6 @@ const ActionsMenu = ({ monitor, isAdmin }) => {
         slotProps={{
           paper: {
             sx: {
-              border: 1,
-              borderColor: theme.palette.border.light,
-              borderRadius: theme.shape.borderRadius,
-              boxShadow: theme.shape.boxShadow,
-              backgroundColor: theme.palette.background.main,
               "& ul": {
                 p: theme.spacing(2.5),
                 minWidth: "100px",

Client/src/Utils/Theme.js

@@ -55,7 +55,7 @@ const theme = createTheme({
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     other: {
       icon: "#667085",
-      line: "#d6d9dd"
+      line: "#d6d9dd",
     },
     primary: {
       main: "#1570EF",
@@ -68,7 +68,59 @@ const theme = createTheme({
     },
   },
   spacing: 2,
-  components: {},
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          marginTop: 4,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: "#eaecf0",
+          borderRadius: 4,
+          boxShadow: shadow,
+          backgroundColor: "#FFFFFF",
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomColor: "#eaecf0",
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#f9fafb",
+        },
+      },
+    },
+    MuiPagination: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#FFFFFF",
+          border: 1,
+          borderStyle: "solid",
+          borderColor: "#eaecf0",
+          "& button": {
+            color: "#475467",
+            borderRadius: 4,
+          },
+          "& li:first-of-type button, & li:last-of-type button": {
+            border: 1,
+            borderStyle: "solid",
+            borderColor: "#eaecf0",
+          },
+        },
+      },
+    },
+  },
   shape: {
     borderRadius: 2,
     borderThick: 2,
@@ -123,7 +175,7 @@ export const darkTheme = createTheme({
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     other: {
       icon: "#e6e6e6",
-      line: "#27272a"
+      line: "#27272a",
     },
     primary: {
       main: "#1570ef",
@@ -136,7 +188,59 @@ export const darkTheme = createTheme({
     },
   },
   spacing: 2,
-  components: {},
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          marginTop: 4,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: "#27272a",
+          borderRadius: 4,
+          boxShadow: shadow,
+          backgroundColor: "#151518",
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomColor: "#27272a",
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#18181a",
+        },
+      },
+    },
+    MuiPagination: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "#151518",
+          border: 1,
+          borderStyle: "solid",
+          borderColor: "#27272a",
+          "& button": {
+            color: "#a1a1aa",
+            borderRadius: 4,
+          },
+          "& li:first-of-type button, & li:last-of-type button": {
+            border: 1,
+            borderStyle: "solid",
+            borderColor: "#27272a",
+          },
+        },
+      },
+    },
+  },
   shape: {
     borderRadius: 2,
     borderThick: 2,

Client/src/Utils/Theme/darkTheme.js

@@ -0,0 +1,141 @@
+import { createTheme } from "@mui/material";
+
+const text = {
+  primary: "#fafafa",
+  secondary: "#e6e6e6",
+  tertiary: "#a1a1aa",
+  accent: "#e6e6e6",
+};
+const background = {
+  main: "#151518",
+  alt: "#09090b",
+  fill: "#2e2e2e",
+  accent: "#18181a",
+};
+const border = { light: "#27272a", dark: "#2c2c2c" };
+
+const fontFamilyDefault =
+  '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
+const shadow =
+  "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
+
+const darkTheme = createTheme({
+  typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
+  palette: {
+    common: { main: "#1570ef" },
+    text: text,
+    background: background,
+    border: border,
+    info: {
+      text: "#475467",
+      main: "#475467",
+      bg: "#ffffff",
+      light: "#ffffff",
+      border: "#D0D5DD",
+    },
+    success: {
+      text: "#079455",
+      main: "#45bb7a",
+      light: "#93d5aa",
+      bg: "#27272a",
+    },
+    error: {
+      text: "#f04438",
+      main: "#d32f2f",
+      light: "#f04438",
+      bg: "#27272a",
+      border: "#f04438",
+    },
+    warning: {
+      text: "#DC6803",
+      main: "#e88c30",
+      light: "#fffcf5",
+      bg: "#ffecbc",
+      border: "#fec84b",
+    },
+    unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
+    other: {
+      icon: "#e6e6e6",
+      line: "#27272a",
+    },
+    primary: {
+      main: "#1570ef",
+    },
+    secondary: {
+      main: "#e6e6e6",
+    },
+    tertiary: {
+      main: "#e6e6e6",
+    },
+  },
+  spacing: 2,
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          marginTop: 4,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: border.light,
+          borderRadius: 4,
+          boxShadow: shadow,
+          backgroundColor: background.main,
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomColor: border.light,
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: background.accent,
+        },
+      },
+    },
+    MuiPagination: {
+      styleOverrides: {
+        root: {
+          backgroundColor: background.main,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: border.light,
+          "& button": {
+            color: text.tertiary,
+            borderRadius: 4,
+          },
+          "& li:first-of-type button, & li:last-of-type button": {
+            border: 1,
+            borderStyle: "solid",
+            borderColor: border.light,
+          },
+        },
+      },
+    },
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
+            backgroundColor: background.fill,
+          },
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 2,
+    borderThick: 2,
+    boxShadow: shadow,
+  },
+});
+
+export default darkTheme;

Client/src/Utils/Theme/lightTheme.js

@@ -0,0 +1,141 @@
+import { createTheme } from "@mui/material";
+
+const text = {
+  primary: "#1c2130",
+  secondary: "#344054",
+  tertiary: "#475467",
+  accent: "#838c99",
+};
+const background = {
+  main: "#FFFFFF",
+  alt: "#FCFCFD",
+  fill: "#F4F4F4",
+  accent: "#f9fafb",
+};
+const border = { light: "#eaecf0", dark: "#d0d5dd" };
+
+const fontFamilyDefault =
+  '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
+const shadow =
+  "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
+
+const lightTheme = createTheme({
+  typography: { fontFamily: fontFamilyDefault, fontSize: 13 },
+  palette: {
+    common: { main: "#1570ef" },
+    text: text,
+    background: background,
+    border: border,
+    info: {
+      text: "#475467",
+      main: "#475467",
+      bg: "#ffffff",
+      light: "#ffffff",
+      border: "#D0D5DD",
+    },
+    success: {
+      text: "#079455",
+      main: "#17b26a",
+      light: "#d4f4e1",
+      bg: "#ecfdf3",
+    },
+    error: {
+      text: "#f04438",
+      main: "#d32f2f",
+      light: "#fbd1d1",
+      bg: "#f9eced",
+      border: "#f04438",
+    },
+    warning: {
+      text: "#DC6803",
+      main: "#fdb022",
+      light: "#fffcf5",
+      bg: "#ffecbc",
+      border: "#fec84b",
+    },
+    unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
+    other: {
+      icon: "#667085",
+      line: "#d6d9dd",
+    },
+    primary: {
+      main: "#1570EF",
+    },
+    secondary: {
+      main: "#475467",
+    },
+    tertiary: {
+      main: "#475467",
+    },
+  },
+  spacing: 2,
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          marginTop: 4,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: border.light,
+          borderRadius: 4,
+          boxShadow: shadow,
+          backgroundColor: background.main,
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottomColor: border.light,
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: background.accent,
+        },
+      },
+    },
+    MuiPagination: {
+      styleOverrides: {
+        root: {
+          backgroundColor: background.main,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: border.light,
+          "& button": {
+            color: text.tertiary,
+            borderRadius: 4,
+          },
+          "& li:first-of-type button, & li:last-of-type button": {
+            border: 1,
+            borderStyle: "solid",
+            borderColor: border.light,
+          },
+        },
+      },
+    },
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
+            backgroundColor: background.fill,
+          },
+        },
+      },
+    },
+  },
+  shape: {
+    borderRadius: 2,
+    borderThick: 2,
+    boxShadow: shadow,
+  },
+});
+
+export default lightTheme;