From 8b27bc2ab27013587eacfb70d8750b8f8206a7b2 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 27 Aug 2024 12:18:25 -0400
Subject: [PATCH] Refactored components styling 1/?

---
 Client/src/Components/Alert/index.jsx         | 24 +++---
 Client/src/Components/BasicTable/index.css    | 56 +-----------
 Client/src/Components/BasicTable/index.jsx    | 85 ++++++++++++++++---
 Client/src/Components/Breadcrumbs/index.css   | 11 +--
 Client/src/Components/Breadcrumbs/index.jsx   | 29 +++++--
 Client/src/Components/Button/index.jsx        |  1 +
 Client/src/Components/ButtonSpinner/index.jsx |  3 +-
 .../src/Components/Charts/BarChart/index.css  | 19 -----
 .../src/Components/Charts/BarChart/index.jsx  | 53 ++++++++----
 .../Charts/MonitorDetails60MinChart/index.jsx | 11 ++-
 .../Charts/MonitorDetailsAreaChart/index.css  | 19 -----
 .../Charts/MonitorDetailsAreaChart/index.jsx  | 37 ++++++--
 .../Charts/ResponseTimeChart/index.css        |  7 --
 .../Charts/ResponseTimeChart/index.jsx        | 13 ++-
 .../TabPanels/Account/PasswordPanel.jsx       |  2 +-
 Client/src/Layouts/HomeLayout/index.css       |  2 +-
 .../Details/PaginationTable/index.jsx         | 44 ++++++++--
 Client/src/Pages/Monitors/Details/index.css   | 14 +--
 Client/src/Pages/Monitors/index.jsx           | 14 ++-
 Client/src/Utils/Theme.js                     | 31 +++++--
 20 files changed, 278 insertions(+), 197 deletions(-)

diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx
index 61c3b6bc3..cd9dcc18e 100644
--- a/Client/src/Components/Alert/index.jsx
+++ b/Client/src/Components/Alert/index.jsx
@@ -32,7 +32,7 @@ const icons = {
 
 const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
   const theme = useTheme();
-  const { bg, border, color } = theme.alert[variant];
+  const { text, light, border } = theme.palette[variant];
   const icon = icons[variant];
 
   return (
@@ -41,23 +41,25 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
       justifyContent="flex-start"
       alignItems={hasIcon ? "" : "center"}
       className="alert row-stack"
-      gap={theme.gap.ml}
+      gap={theme.spacing(8)}
       sx={{
-        padding: hasIcon ? theme.gap.ml : `${theme.gap.small} ${theme.gap.ml}`,
-        backgroundColor: bg,
+        padding: hasIcon
+          ? theme.spacing(8)
+          : `${theme.spacing(4)} ${theme.spacing(8)}`,
+        backgroundColor: light,
         border: `solid 1px ${border}`,
-        borderRadius: `${theme.shape.borderRadius}px`,
+        borderRadius: theme.shape.borderRadius,
       }}
     >
-      {hasIcon && <Box sx={{ color: color }}>{icon}</Box>}
+      {hasIcon && <Box sx={{ color: text }}>{icon}</Box>}
       <Stack direction="column" gap="2px" sx={{ flex: 1 }}>
         {title && (
-          <Typography sx={{ fontWeight: "700", color: `${color} !important` }}>
+          <Typography sx={{ fontWeight: "700", color: `${text}` }}>
             {title}
           </Typography>
         )}
         {body && (
-          <Typography sx={{ fontWeight: "400", color: `${color} !important` }}>
+          <Typography sx={{ fontWeight: "400", color: `${text}` }}>
             {body}
           </Typography>
         )}
@@ -69,7 +71,7 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
             sx={{
               fontWeight: "600",
               width: "fit-content",
-              mt: theme.gap.small,
+              mt: theme.spacing(4),
               padding: 0,
               minWidth: 0,
               "&:hover": {
@@ -95,10 +97,6 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
             "&:focus": {
               outline: "none",
             },
-            "& .MuiTouchRipple-root": {
-              pointerEvents: "none",
-              display: "none",
-            },
           }}
         >
           <CloseIcon
diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 69562d661..4839c7dcb 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -17,8 +17,6 @@
 
 .MuiPaper-root:has(table.MuiTable-root) {
   box-shadow: none;
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
 }
 .MuiTable-root
   .MuiTableBody-root
@@ -26,10 +24,7 @@
   .MuiTableCell-root {
   border: none;
 }
-.MuiTable-root .MuiTableHead-root,
-.MuiTable-root .MuiTableRow-root:hover {
-  background-color: var(--primary-bg-accent);
-}
+
 .MuiTable-root .MuiTableHead-root .MuiTableCell-root,
 .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
   font-size: var(--env-var-font-size-medium);
@@ -37,7 +32,6 @@
 .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
   font-weight: 500;
-  color: var(--secondary-color-light);
 }
 .MuiTable-root .MuiTableHead-root span {
   display: inline-block;
@@ -52,7 +46,6 @@
   height: 20px;
 }
 .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
-  color: var(--secondary-color);
   padding: 6px var(--env-var-spacing-2);
 }
 .MuiTable-root .MuiTableBody-root .MuiTableRow-root {
@@ -61,21 +54,14 @@
 
 .MuiPaper-root + .MuiPagination-root {
   margin-top: 24px;
-  background-color: var(--primary-bg);
-  border: solid 1px var(--border-color);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
 }
 .MuiPaper-root + .MuiPagination-root ul {
   justify-content: center;
 }
-.MuiPaper-root
-  + .MuiPagination-root
-  ul
-  li:not(:first-child):not(:last-child)
-  button {
+.MuiPaper-root + .MuiPagination-root button {
   font-size: var(--env-var-font-size-medium);
-  color: var(--secondary-color);
   font-weight: 500;
 }
 .MuiPaper-root + .MuiPagination-root ul li:first-child {
@@ -84,11 +70,6 @@
 .MuiPaper-root + .MuiPagination-root ul li:last-child {
   margin-left: auto;
 }
-.MuiPaper-root + .MuiPagination-root ul li:first-child button,
-.MuiPaper-root + .MuiPagination-root ul li:last-child button {
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-}
 .MuiPaper-root + .MuiPagination-root ul li:first-child button {
   padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus);
 }
@@ -108,23 +89,14 @@
   content: "Next";
   margin-right: 15px;
 }
-.MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
-  background-color: var(--primary-bg-fill);
-}
 .MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
   user-select: none;
 }
 
 .MuiTablePagination-root p {
-  color: var(--secondary-color-light);
   font-weight: 500;
   font-size: var(--env-var-font-size-small-plus);
 }
-.MuiTablePagination-root button,
-.MuiTablePagination-root .MuiSelect-select {
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-}
 .MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
   text-align: left;
   text-align-last: left;
@@ -138,10 +110,6 @@
   width: 22px;
   height: 22px;
 }
-.MuiTablePagination-root svg path {
-  stroke: var(--secondary-color-light);
-  stroke-width: 1.3;
-}
 .MuiTablePagination-root .MuiSelect-icon {
   width: 16px;
   height: 16px;
@@ -152,30 +120,13 @@
 .MuiTablePagination-root button.Mui-disabled {
   opacity: 0.4;
 }
-.MuiTablePagination-root button:not(.Mui-disabled):hover {
-  background-color: var(--primary-bg-fill);
-  border-color: var(--primary-bg-fill);
-}
 
-.pagination-dropdown.MuiPaper-root {
-  box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-}
 .pagination-dropdown ul {
   padding: 4px;
   min-width: 100px;
 }
-.pagination-dropdown li,
-body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
+.pagination-dropdown li {
   font-size: var(--env-var-font-size-medium);
-  color: var(--secondary-color-light);
-  padding: 4px;
-}
-.pagination-dropdown li.Mui-selected,
-.pagination-dropdown li.Mui-selected.Mui-focusVisible,
-.pagination-dropdown li.Mui-selected:hover {
-  background-color: var(--primary-bg-fill);
 }
 body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-small-plus);
@@ -183,7 +134,6 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
 
 .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   text-transform: uppercase;
-  color: var(--secondary-color);
   opacity: 0.8;
   font-size: var(--env-var-font-size-small-plus);
   font-weight: 400;
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index c723d2bec..95abfc05f 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -200,12 +200,29 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
 
   return (
     <>
-      <TableContainer component={Paper}>
+      <TableContainer
+        component={Paper}
+        sx={{
+          border: `solid 1px ${theme.palette.border.light}`,
+          borderRadius: theme.shape.borderRadius,
+        }}
+      >
         <Table>
-          <TableHead>
+          <TableHead
+            sx={{
+              backgroundColor: theme.palette.background.accent,
+            }}
+          >
             <TableRow>
               {data.cols.map((col) => (
-                <TableCell key={col.id}>{col.name}</TableCell>
+                <TableCell
+                  key={col.id}
+                  sx={{
+                    color: theme.palette.text.secondary,
+                  }}
+                >
+                  {col.name}
+                </TableCell>
               ))}
             </TableRow>
           </TableHead>
@@ -215,12 +232,24 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                 <TableRow
                   sx={{
                     cursor: row.handleClick ? "pointer" : "default",
+                    "&:hover": {
+                      backgroundColor: theme.palette.background.accent,
+                    },
                   }}
                   key={row.id}
                   onClick={row.handleClick ? row.handleClick : null}
                 >
                   {row.data.map((cell) => {
-                    return <TableCell key={cell.id}>{cell.data}</TableCell>;
+                    return (
+                      <TableCell
+                        key={cell.id}
+                        sx={{
+                          color: theme.palette.text.secondary,
+                        }}
+                      >
+                        {cell.data}
+                      </TableCell>
+                    );
                   })}
                 </TableRow>
               );
@@ -233,9 +262,14 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
           direction="row"
           alignItems="center"
           justifyContent="space-between"
-          px={theme.gap.small}
+          px={theme.spacing(4)}
+          sx={{
+            "& p": {
+              color: theme.palette.text.tertiary,
+            },
+          }}
         >
-          <Typography sx={{ opacity: 0.7 }}>
+          <Typography px={theme.spacing(2)} sx={{ opacity: 0.7 }}>
             Showing {getRange()} of {data.rows.length} monitor(s)
           </Typography>
           <TablePagination
@@ -260,6 +294,20 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                   keepMounted: true,
                   PaperProps: {
                     className: "pagination-dropdown",
+                    sx: {
+                      border: 1,
+                      borderColor: theme.palette.border.light,
+                      borderRadius: theme.shape.borderRadius,
+                      boxShadow: theme.shape.boxShadow,
+                      "& li": {
+                        p: theme.spacing(2),
+                        color: theme.palette.text.tertiary,
+                      },
+                      "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover":
+                        {
+                          backgroundColor: theme.palette.background.fill,
+                        },
+                    },
                   },
                   transformOrigin: { vertical: "bottom", horizontal: "left" },
                   anchorOrigin: { vertical: "top", horizontal: "left" },
@@ -268,19 +316,32 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                 inputProps: { id: "pagination-dropdown" },
                 IconComponent: SelectorVertical,
                 sx: {
-                  ml: theme.gap.small,
-                  mr: theme.gap.large,
-                  minWidth: theme.gap.xl,
+                  ml: theme.spacing(4),
+                  mr: theme.spacing(12),
+                  minWidth: theme.spacing(20),
                   textAlign: "left",
                   "&.Mui-focused > div": {
-                    backgroundColor: theme.palette.otherColors.white,
+                    backgroundColor: theme.palette.background.main,
                   },
                 },
               },
             }}
             sx={{
-              mt: theme.gap.medium,
-              color: theme.palette.otherColors.bluishGray,
+              mt: theme.spacing(6),
+              color: theme.palette.text.secondary,
+              "& button, & .MuiSelect-select": {
+                border: 1,
+                borderColor: theme.palette.border.light,
+                borderRadius: theme.shape.borderRadius,
+              },
+              "& svg path": {
+                stroke: theme.palette.text.tertiary,
+                strokeWidth: 1.3,
+              },
+              "& button:not(.Mui-disabled):hover": {
+                backgroundColor: theme.palette.background.fill,
+                borderColor: theme.palette.background.fill,
+              },
             }}
           />
         </Stack>
diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
index 1d1454b3d..a425946e8 100644
--- a/Client/src/Components/Breadcrumbs/index.css
+++ b/Client/src/Components/Breadcrumbs/index.css
@@ -1,5 +1,5 @@
 .MuiBreadcrumbs-root {
-  height: 36px;
+  height: 34px;
 }
 .MuiBreadcrumbs-root svg {
   width: 16px;
@@ -7,17 +7,8 @@
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
   font-size: var(--env-var-font-size-medium);
-  color: var(--secondary-color-light);
-  opacity: 0.8;
   font-weight: 400;
 }
-.MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a {
-  color: var(--secondary-color-light);
-}
-.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a {
-  opacity: 1;
-  background-color: #e3e3e3;
-}
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
   cursor: pointer;
 }
diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
index 506263fce..c54b4c4a6 100644
--- a/Client/src/Components/Breadcrumbs/index.jsx
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -25,23 +25,36 @@ const Breadcrumbs = ({ list }) => {
     <MUIBreadcrumbs
       separator={<ArrowRight />}
       aria-label="breadcrumb"
-      p={theme.gap.small}
+      px={theme.spacing(2)}
+      py={theme.spacing(3.5)}
       width="fit-content"
-      backgroundColor={theme.palette.otherColors.fillGray}
-      borderRadius={`${theme.shape.borderRadius}px`}
+      backgroundColor={theme.palette.background.fill}
+      borderRadius={theme.shape.borderRadius}
       lineHeight="18px"
+      sx={{
+        "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
+          backgroundColor: "#e3e3e3",
+          opacity: 1,
+        },
+      }}
     >
       {list.map((item, index) => {
         return (
           <Box
             component="a"
             key={`${item.name}-${index}`}
-            px={theme.gap.small}
-            pt={theme.gap.xs}
-            pb="6px"
-            sx={{ textTransform: "capitalize" }}
-            borderRadius={`${theme.shape.borderRadius}px`}
+            px={theme.spacing(4)}
+            pt={theme.spacing(2)}
+            pb={theme.spacing(3)}
+            borderRadius={theme.shape.borderRadius}
             onClick={() => navigate(item.path)}
+            sx={{
+              opacity: 0.8,
+              textTransform: "capitalize",
+              "&, &:hover": {
+                color: theme.palette.text.tertiary,
+              },
+            }}
           >
             {item.name}
           </Box>
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 485973498..4c59f8b47 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -77,6 +77,7 @@ const Button = ({
         fontWeight: 400,
         boxShadow: "none",
         textTransform: "none",
+        borderRadius: "4px",
         "&:focus": {
           outline: "none",
         },
diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx
index 62cfae477..8c6d1deb8 100644
--- a/Client/src/Components/ButtonSpinner/index.jsx
+++ b/Client/src/Components/ButtonSpinner/index.jsx
@@ -74,12 +74,13 @@ const ButtonSpinner = ({
       sx={{
         boxShadow: "none",
         textTransform: "none",
+        borderRadius: "4px",
         "&:focus": {
           outline: "none",
         },
         "&:hover": {
           boxShadow: "none",
-          transition: "none"
+          transition: "none",
         },
         ...sx,
       }}
diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css
index ed22f8bd7..e69de29bb 100644
--- a/Client/src/Components/Charts/BarChart/index.css
+++ b/Client/src/Components/Charts/BarChart/index.css
@@ -1,19 +0,0 @@
-.bar-tooltip .MuiTooltip-tooltip {
-  background-color: white;
-  border: solid 1px black;
-  box-shadow: var(--env-var-shadow-1);
-  border: solid 1px var(--env-var-color-6);
-  border-radius: var(--env-var-radius-1);
-  padding: 4px 8px;
-}
-
-.bar-tooltip .MuiTooltip-tooltip p {
-  font-size: var(--env-var-font-size-small-plus);
-  color: var(--secondary-color-light);
-  font-weight: 500;
-}
-.bar-tooltip .MuiTooltip-tooltip span {
-  font-size: var(--env-var-font-size-small);
-  color: var(--secondary-color-light);
-  font-weight: 600;
-}
diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx
index 9238374c2..54a9524af 100644
--- a/Client/src/Components/Charts/BarChart/index.jsx
+++ b/Client/src/Components/Charts/BarChart/index.jsx
@@ -26,7 +26,7 @@ const BarChart = ({ checks = [] }) => {
     <Stack
       direction="row"
       flexWrap="nowrap"
-      gap="3px"
+      gap={theme.spacing(1.5)}
       height="50px"
       width="fit-content"
       onClick={(event) => event.stopPropagation()}
@@ -39,11 +39,11 @@ const BarChart = ({ checks = [] }) => {
           <Box
             key={`${check}-${index}`}
             position="relative"
-            width="9px"
+            width={theme.spacing(4.5)}
             height="100%"
-            backgroundColor={theme.palette.otherColors.fillGray}
+            backgroundColor={theme.palette.background.fill}
             sx={{
-              borderRadius: "3px",
+              borderRadius: theme.spacing(1.5),
             }}
           />
         ) : (
@@ -53,15 +53,15 @@ const BarChart = ({ checks = [] }) => {
                 <Typography>
                   {formatDate(new Date(check.createdAt), { year: undefined })}
                 </Typography>
-                <Box mt={theme.gap.xs}>
+                <Box mt={theme.spacing(2)}>
                   <Box
                     display="inline-block"
-                    width={theme.gap.small}
-                    height={theme.gap.small}
+                    width={theme.spacing(4)}
+                    height={theme.spacing(4)}
                     backgroundColor={
                       check.status
-                        ? theme.label.up.dotColor
-                        : theme.label.down.dotColor
+                        ? theme.palette.success.main
+                        : theme.palette.error.text
                     }
                     sx={{ borderRadius: "50%" }}
                   />
@@ -69,8 +69,8 @@ const BarChart = ({ checks = [] }) => {
                     display="inline-flex"
                     direction="row"
                     justifyContent="space-between"
-                    ml={theme.gap.xs}
-                    gap={theme.gap.large}
+                    ml={theme.spacing(2)}
+                    gap={theme.spacing(12)}
                   >
                     <Typography component="span" sx={{ opacity: 0.8 }}>
                       Response Time
@@ -99,6 +99,27 @@ const BarChart = ({ checks = [] }) => {
                     },
                   },
                 ],
+                sx: {
+                  "& .MuiTooltip-tooltip": {
+                    backgroundColor: theme.palette.background.main,
+                    border: 1,
+                    borderColor: theme.palette.border.dark,
+                    borderRadius: theme.shape.borderRadius,
+                    boxShadow: theme.shape.boxShadow,
+                    px: theme.spacing(4),
+                    py: theme.spacing(2),
+                  },
+                  "& .MuiTooltip-tooltip p": {
+                    fontSize: 12,
+                    color: theme.palette.text.tertiary,
+                    fontWeight: 500,
+                  },
+                  "& .MuiTooltip-tooltip span": {
+                    fontSize: 11,
+                    color: theme.palette.text.tertiary,
+                    fontWeight: 600,
+                  },
+                },
               },
             }}
           >
@@ -107,10 +128,10 @@ const BarChart = ({ checks = [] }) => {
               width="9px"
               height="100%"
               backgroundColor={
-                check.status ? theme.label.up.bgColor : theme.label.down.bgColor
+                check.status ? theme.palette.success.bg : theme.palette.error.bg
               }
               sx={{
-                borderRadius: "3px",
+                borderRadius: theme.spacing(1.5),
                 "&:hover > .MuiBox-root": {
                   filter: "brightness(0.8)",
                 },
@@ -123,11 +144,11 @@ const BarChart = ({ checks = [] }) => {
                 height={`${animate ? check.responseTime : 0}%`}
                 backgroundColor={
                   check.status
-                    ? theme.label.up.dotColor
-                    : theme.label.down.dotColor
+                    ? theme.palette.success.main
+                    : theme.palette.error.text
                 }
                 sx={{
-                  borderRadius: "3px",
+                  borderRadius: theme.spacing(1.5),
                   transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
                 }}
               />
diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
index dbb45f109..57cb344e7 100644
--- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -1,17 +1,20 @@
 import { BarChart, Bar, Cell, ReferenceLine, Label } from "recharts";
 
 import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
 
 const MonitorDetails60MinChart = ({ data }) => {
+  const theme = useTheme();
+
   const labelStyle = {
     fontSize: "10px",
-    fill: "#475467",
+    fill: theme.palette.text.tertiary,
   };
 
   const color = {
-    true: "var(--success-color)",
-    false: "var(--error-color)",
-    undefined: "var(--unresolved-color)",
+    true: theme.palette.success.main,
+    false: theme.palette.error.text,
+    undefined: theme.palette.unresolved.main,
   };
   return (
     <BarChart
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
index 1a611171a..e69de29bb 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.css
@@ -1,19 +0,0 @@
-.area-tooltip {
-  background-color: white;
-  border: solid 1px var(--border-color);
-  border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
-}
-.area-tooltip p {
-  margin: 0;
-  padding: 0;
-}
-.area-tooltip p:first-of-type {
-  color: var(--theme-main);
-  font-size: var(--env-var-font-size-medium);
-}
-.area-tooltip p:last-of-type {
-  margin-top: 5px;
-  color: var(--secondary-color);
-  font-size: var(--env-var-font-size-small);
-}
diff --git a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
index c37e467f6..3e69c0d60 100644
--- a/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx
@@ -1,12 +1,31 @@
 import PropTypes from "prop-types";
 import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer } from "recharts";
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
 import "./index.css";
 
 const CustomToolTip = ({ active, payload, label }) => {
+  const theme = useTheme();
+
   if (active && payload && payload.length) {
     return (
-      <div className="area-tooltip">
-        <p>
+      <Box
+        className="area-tooltip"
+        sx={{
+          backgroundColor: theme.palette.background.main,
+          border: 1,
+          borderColor: theme.palette.border.dark,
+          borderRadius: theme.shape.borderRadius,
+          py: theme.spacing(6),
+          px: theme.spacing(8),
+        }}
+      >
+        <Typography
+          sx={{
+            color: theme.palette.common.main,
+            fontSize: 13,
+          }}
+        >
           {new Date(label).toLocaleDateString("en-US", {
             weekday: "short", // Mon
             month: "long", // July
@@ -18,10 +37,18 @@ const CustomToolTip = ({ active, payload, label }) => {
               minute: "2-digit", // 15
               hour12: true, // AM/PM format
             })}
-        </p>
-        <p>Response Time (ms): {payload[0].payload.originalResponseTime}</p>{" "}
+        </Typography>
+        <Typography
+          mt={theme.spacing(2.5)}
+          sx={{
+            color: theme.palette.text.secondary,
+            fontSize: 13,
+          }}
+        >
+          Response Time (ms): {payload[0].payload.originalResponseTime}
+        </Typography>{" "}
         {/* Display original value */}
-      </div>
+      </Box>
     );
   }
   return null;
diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.css b/Client/src/Components/Charts/ResponseTimeChart/index.css
index 86b7a1d1b..e69de29bb 100644
--- a/Client/src/Components/Charts/ResponseTimeChart/index.css
+++ b/Client/src/Components/Charts/ResponseTimeChart/index.css
@@ -1,7 +0,0 @@
-.chart-container {
-  display: flex;
-  justify-content: space-around;
-  align-items: flex-end;
-  height: 50px;
-  width: 300px;
-}
diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
index 3c57daf1a..fd6c0f41e 100644
--- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx
+++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx
@@ -1,10 +1,17 @@
-import "./index.css";
 import PropTypes from "prop-types";
+import { Stack } from "@mui/material";
 import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts";
+import "./index.css";
 
 const ResponseTimeChart = ({ checks = [] }) => {
   return (
-    <div className="chart-container">
+    <Stack
+      flexDirection="row"
+      justifyContent="space-around"
+      alignItems="flex-end"
+      height="50px"
+      width="300px"
+    >
       <ResponsiveContainer width="100%" height="100%">
         <BarChart
           width={150}
@@ -26,7 +33,7 @@ const ResponseTimeChart = ({ checks = [] }) => {
           </Bar>
         </BarChart>
       </ResponsiveContainer>
-    </div>
+    </Stack>
   );
 };
 
diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index 602816e6c..f921aa1ed 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -1,7 +1,7 @@
 import TabPanel from "@mui/lab/TabPanel";
 import React, { useState } from "react";
 import { useTheme } from "@emotion/react";
-import { Box, Divider, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import ButtonSpinner from "../../ButtonSpinner";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index 75a1925f3..c5407eda6 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -22,7 +22,7 @@
 
   border: 1px solid var(--border-color);
   border-radius: var(--env-var-radius-1);
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 
   padding: var(--env-var-spacing-1) 0;
 }
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index ad8248ab0..e484b01ae 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -18,8 +18,10 @@ import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 import { logger } from "../../../../Utils/Logger";
+import { useTheme } from "@emotion/react";
 
 const PaginationTable = ({ monitorId, dateRange }) => {
+  const theme = useTheme();
   const { authToken } = useSelector((state) => state.auth);
   const [checks, setChecks] = useState([]);
   const [checksCount, setChecksCount] = useState(0);
@@ -78,6 +80,19 @@ 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={{
@@ -93,6 +108,9 @@ const PaginationTable = ({ monitorId, dateRange }) => {
                 pointerEvents: "none",
                 display: "none",
               },
+              "&.Mui-selected, &.Mui-selected:hover": {
+                backgroundColor: theme.palette.background.fill,
+              },
             }}
           />
         )}
@@ -102,13 +120,29 @@ const PaginationTable = ({ monitorId, dateRange }) => {
 
   return (
     <>
-      <TableContainer component={Paper}>
+      <TableContainer
+        component={Paper}
+        sx={{
+          border: `solid 1px ${theme.palette.border.light}`,
+          borderRadius: theme.shape.borderRadius,
+        }}
+      >
         <Table>
-          <TableHead>
+          <TableHead
+            sx={{
+              backgroundColor: theme.palette.background.accent,
+            }}
+          >
             <TableRow>
-              <TableCell>Status</TableCell>
-              <TableCell>Date & Time</TableCell>
-              <TableCell>Message</TableCell>
+              <TableCell sx={{ color: theme.palette.text.secondary }}>
+                Status
+              </TableCell>
+              <TableCell sx={{ color: theme.palette.text.secondary }}>
+                Date & Time
+              </TableCell>
+              <TableCell sx={{ color: theme.palette.text.secondary }}>
+                Message
+              </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 127b7377a..0ebad73e3 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -1,6 +1,6 @@
 .monitor-details h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
-  color: var(--env-var-color-1);
+  color: var(--primary-color);
   font-weight: 600;
 }
 .monitor-details h2.MuiTypography-root {
@@ -11,10 +11,10 @@
 }
 .monitor-details h2.MuiTypography-root,
 .monitor-details h4.MuiTypography-root {
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
 }
 .monitor-details h6.MuiTypography-root {
-  color: var(--env-var-color-3);
+  color: var(--theme-main);
 }
 .monitor-details button.MuiButtonBase-root,
 .monitor-details h4.MuiTypography-root {
@@ -29,7 +29,7 @@
   font-size: var(--env-var-font-size-small-plus);
 }
 .monitor-details p.MuiTypography-root {
-  color: var(--env-var-color-2);
+  color: var(--secondary-color-light);
 }
 
 .monitor-details .stat-box {
@@ -38,7 +38,7 @@
   border: solid 1px;
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1) 16px;
-  background-color: var(--env-var-color-8);
+  background-color: var(--primary-bg);
 }
 .monitor-details h6.MuiTypography-root {
   font-size: var(--env-var-font-size-medium-plus);
@@ -46,10 +46,10 @@
 .monitor-details h6.MuiTypography-root span.MuiTypography-root {
   font-style: italic;
   font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
+  color: var(--secondary-color);
   opacity: 0.7;
 }
 .monitor-details button.MuiButtonBase-root,
 .monitor-details .stat-box {
-  border-color: var(--env-var-color-16);
+  border-color: var(--border-color);
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 44101b332..b1f4c05c1 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -309,11 +309,11 @@ const StatusBox = ({ title, value }) => {
       position="relative"
       flex={1}
       border={1}
-      borderColor={theme.palette.otherColors.graishWhite}
-      borderRadius={`${theme.shape.borderRadius}px`}
-      backgroundColor={theme.palette.otherColors.white}
-      px={theme.gap.large}
-      py={theme.gap.ml}
+      borderColor={theme.palette.border.light}
+      borderRadius={theme.shape.borderRadius}
+      backgroundColor={theme.palette.background.main}
+      px={theme.spacing(12)}
+      py={theme.spacing(8)}
       overflow="hidden"
       sx={{
         "&:hover": {
@@ -447,9 +447,7 @@ const Monitors = () => {
       title: monitor.name,
       percentage: 100,
       percentageColor:
-        monitor.status === true
-          ? "var(--success-color)"
-          : "var(--error-color)",
+        monitor.status === true ? "var(--success-color)" : "var(--error-color)",
       status: monitor.status === true ? "up" : "down",
     };
 
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 7b6535bfa..3a8282dd0 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -40,15 +40,34 @@ const theme = createTheme({
       accent: "#838c99",
     },
     background: {
-      primary: "#FFFFFF",
-      secondary: "#FCFCFD",
+      main: "#FFFFFF",
+      alt: "#FCFCFD",
       fill: "#F4F4F4",
       accent: "#f9fafb",
     },
     border: { light: "#eaecf0", dark: "#d0d5dd" },
+    info: {
+      text: "#475467",
+      main: "#475467",
+      bg: "#ffffff",
+      light: "#ffffff",
+      border: "#D0D5DD",
+    },
     success: { main: "#17b26a", light: "#d4f4e1", bg: "#ecfdf3" },
-    error: { main: "#f04438", light: "#fbd1d1", bg: "#f9eced" },
-    warning: { main: "#fdb022", light: "#fffcf5", bg: "#ffecbc" },
+    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: {},
     primary: {
@@ -77,8 +96,10 @@ const theme = createTheme({
       fillGray: otherColorsFillGray,
     },
   },
+  spacing: 2,
+  components: {},
   shape: {
-    borderRadius: 4,
+    borderRadius: 2,
     borderThick: 2,
     boxShadow: shadow,
   },