� Removed old color variables

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

@@ -194,8 +194,8 @@ const ActionsMenu = ({ monitor, isAdmin }) => {
           </Typography>
           <Stack
             direction="row"
-            gap={theme.gap.small}
-            mt={theme.gap.large}
+            gap={theme.spacing(4)}
+            mt={theme.spacing(12)}
             justifyContent="flex-end"
           >
             <Button

Client/src/Utils/Theme.js

@@ -1,26 +1,5 @@
 import { createTheme } from "@mui/material";
 
-// Colors for MUI theme
-const primaryMain = "#1570EF";
-const secondaryMain = "#475467";
-const tertiaryMain = "#475467";
-const tertiaryLinkHover = "#eff8ff";
-
-// Section colors
-const sectionBorder = "#D0D5DD";
-const sectionBg = "#F8F9F8";
-
-// Other Colors
-const otherColorsBlackish = "#101828";
-const otherColorsBluishGray = "#344054";
-const otherColorsGraishWhite = "#eaecf0";
-const otherColorsPurple = "#7f56d9";
-const otherColorsWhite = "#fff";
-const otherColorsGraishWhiteLight = "#f2f2f2";
-const otherColorsStrongBlue = "#f2f2f2";
-const otherColorsSlateGray = "#667085";
-const otherColorsFillGray = "#f4f4f4";
-
 //box shadow
 const shadow =
   "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
@@ -75,31 +54,6 @@ const theme = createTheme({
     },
     unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" },
     other: {},
-    primary: {
-      main: primaryMain,
-    },
-    secondary: {
-      main: secondaryMain,
-    },
-    tertiary: {
-      main: tertiaryMain,
-      linkHover: tertiaryLinkHover,
-    },
-    section: {
-      borderColor: sectionBorder,
-      bgColor: sectionBg,
-    },
-    otherColors: {
-      blackish: otherColorsBlackish,
-      bluishGray: otherColorsBluishGray,
-      graishWhite: otherColorsGraishWhite,
-      purple: otherColorsPurple,
-      white: otherColorsWhite,
-      graishWhiteLight: otherColorsGraishWhiteLight,
-      strongBlue: otherColorsStrongBlue,
-      slateGray: otherColorsSlateGray,
-      fillGray: otherColorsFillGray,
-    },
   },
   spacing: 2,
   components: {},
@@ -108,83 +62,6 @@ const theme = createTheme({
     borderThick: 2,
     boxShadow: shadow,
   },
-  gap: {
-    xs: "4px",
-    small: "8px",
-    medium: "12px",
-    ml: "16px",
-    mlplus: "20px",
-    large: "24px",
-    lgplus: "32px",
-    xl: "40px",
-    xxl: "60px",
-    triplexl: "120px",
-  },
-  alert: {
-    info: {
-      color: secondaryMain,
-      bg: otherColorsWhite,
-      border: sectionBorder,
-    },
-    error: {
-      color: "#d92d20",
-      bg: "hsla(0, 100%, 52%, 0.03)",
-      border: "#f04438",
-    },
-    warning: {
-      color: "#DC6803",
-      bg: "#fffcf5",
-      border: "#fec84b",
-    },
-  },
-  //add more as needed
-  label: {
-    up: {
-      borderColor: "#D4F4E1",
-      bgColor: "#ecfdf3",
-      dotColor: "#17B26A",
-    },
-    down: {
-      borderColor: "#fbd1d1",
-      bgColor: "#f9eced",
-      dotColor: "#f04438",
-    },
-    "cannot resolve": {
-      borderColor: "#e2eaf7",
-      bgColor: "#f2f4f7",
-      dotColor: "#4e5ba6",
-    },
-  },
-  pie: {
-    green: {
-      stroke: "#17b26a",
-      strokeBg: "#d4f4e1",
-      text: "#079455",
-      bg: "#ecfdf3",
-      shape: "circle",
-    },
-    yellow: {
-      stroke: "#fdb022",
-      strokeBg: "rgba(255, 192, 34, 0.3)",
-      text: "#dc6803",
-      bg: "#fffcf5",
-      shape: "square",
-    },
-    red: {
-      stroke: "#f04438",
-      strokeBg: "#ffecea",
-      text: "#f04438",
-      bg: "#ffeaea",
-      shape: "triangle",
-    },
-    default: {
-      stroke: "#4e5ba6",
-      strokeBg: "#f2f4f7",
-      text: "#4e5ba6",
-      bg: "#f2f4f7",
-      shape: "",
-    },
-  },
 });
 
 export default theme;

Client/src/index.css

@@ -13,36 +13,6 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* Generalized Stylings */
-  --theme-main: #1570ef;
-
-  --primary-color: #1c2130;
-  --secondary-color: #344054;
-  --secondary-color-light: #475467;
-  --secondary-color-light-accent: #838c99;
-
-  --primary-bg: #ffffff;
-  --primary-bg-fill: #f4f4f4;
-  --primary-bg-accent: #f9fafb;
-  --secondary-bg: #fcfcfd;
-
-  --border-color: #eaecf0;
-  --border-color-dark: #d0d5dd;
-
-  /* OTHER COLORS */
-  --success-color: #17b26a;
-  --success-color-light: #d4f4e1;
-  --success-bg: #ecfdf3;
-  --error-color: #f04438;
-  --error-color-light: #fbd1d1;
-  --error-bg: #f9eced;
-  --warning-color: #fdb022;
-  --warning-color-light: #fffcf5;
-  --warning-bg: #ffecbc;
-  --unresolved-color: #4e5ba6;
-  --unresolved-color-light: #e2eaf7;
-  --unresolved-bg: #f2f4f7;
-
-  /*  */
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;