Added darkmode warning palette

Client/src/Components/BasicTable/index.jsx

@@ -200,31 +200,12 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
 
   return (
     <>
-      <TableContainer
-        component={Paper}
-        sx={{
-          backgroundColor: theme.palette.background.main,
-          border: `solid 1px ${theme.palette.border.light}`,
-          borderRadius: theme.shape.borderRadius,
-        }}
-      >
+      <TableContainer component={Paper}>
         <Table>
-          <TableHead
-            sx={{
-              backgroundColor: theme.palette.background.accent,
-            }}
-          >
+          <TableHead>
             <TableRow>
               {data.cols.map((col) => (
-                <TableCell
-                  key={col.id}
-                  sx={{
-                    color: theme.palette.text.secondary,
-                    borderBottomColor: theme.palette.border.light,
-                  }}
-                >
-                  {col.name}
-                </TableCell>
+                <TableCell key={col.id}>{col.name}</TableCell>
               ))}
             </TableRow>
           </TableHead>
@@ -242,17 +223,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                   onClick={row.handleClick ? row.handleClick : null}
                 >
                   {row.data.map((cell) => {
-                    return (
-                      <TableCell
-                        key={cell.id}
-                        sx={{
-                          color: theme.palette.text.secondary,
-                          borderBottomColor: theme.palette.border.light,
-                        }}
-                      >
-                        {cell.data}
-                      </TableCell>
-                    );
+                    return <TableCell key={cell.id}>{cell.data}</TableCell>;
                   })}
                 </TableRow>
               );

Client/src/Components/Sidebar/index.jsx

@@ -598,8 +598,9 @@ function Sidebar() {
           MenuListProps={{
             sx: {
               p: 2,
+              "& li": { m: 0 },
               "& li:has(.MuiBox-root):hover": {
-                backgroundColor: theme.palette.background.main,
+                backgroundColor: "transparent",
               },
             },
           }}
@@ -620,8 +621,22 @@ function Sidebar() {
             </MenuItem>
           )}
           {collapsed && <Divider />}
-          <MenuItem onClick={() => dispatch(setMode("light"))}>Light</MenuItem>
-          <MenuItem onClick={() => dispatch(setMode("dark"))}>Dark</MenuItem>
+          <MenuItem
+            onClick={() => {
+              dispatch(setMode("light"));
+              closePopup();
+            }}
+          >
+            Light
+          </MenuItem>
+          <MenuItem
+            onClick={() => {
+              dispatch(setMode("dark"));
+              closePopup();
+            }}
+          >
+            Dark
+          </MenuItem>
           <Divider />
           <MenuItem
             onClick={logout}

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

@@ -93,17 +93,8 @@ const ActionsMenu = ({ monitor, isAdmin }) => {
         slotProps={{
           paper: {
             sx: {
-              "& ul": {
-                p: theme.spacing(2.5),
-                minWidth: "100px",
-              },
-              "& li": {
-                color: theme.palette.text.secondary,
-                fontSize: 13,
-                px: theme.spacing(4),
-                py: theme.spacing(2.5),
-                borderRadius: theme.shape.borderRadius,
-              },
+              "& ul": { p: theme.spacing(2.5) },
+              "& li": { m: 0 },
               "& li:last-of-type": {
                 color: theme.palette.error.text,
               },

Client/src/Utils/Theme/darkTheme.js

@@ -38,22 +38,22 @@ const darkTheme = createTheme({
     success: {
       text: "#079455",
       main: "#45bb7a",
-      light: "#93d5aa",
+      light: "#1e1e1e",
       bg: "#27272a",
     },
     error: {
       text: "#f04438",
       main: "#d32f2f",
-      light: "#f04438",
+      light: "#1e1e1e",
       bg: "#27272a",
       border: "#f04438",
     },
     warning: {
-      text: "#DC6803",
-      main: "#e88c30",
-      light: "#fffcf5",
-      bg: "#ffecbc",
-      border: "#fec84b",
+      text: "#e88c30",
+      main: "#FF9F00",
+      light: "#27272a",
+      bg: "#1E1E1E",
+      border: "#e88c30",
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     divider: border.light,
@@ -102,6 +102,7 @@ const darkTheme = createTheme({
           borderRadius: 4,
           boxShadow: shadow,
           backgroundColor: background.main,
+          backgroundImage: "none",
         },
       },
     },