From 3c5882f687de8e8799deec952d376d6871397aac Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 19:28:58 -0400
Subject: [PATCH] Replaced hardcoded values with theme variables

---
 Client/src/Components/BasicTable/index.css |  3 ++-
 Client/src/Components/BasicTable/index.jsx | 18 ++++++++++--------
 Client/src/Pages/Monitors/index.jsx        |  7 +++----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 9003ce7b6..821726cf4 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -177,10 +177,11 @@
 }
 .pagination-dropdown li {
   font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   padding: 4px;
 }
 .pagination-dropdown li.Mui-selected,
 .pagination-dropdown li.Mui-selected.Mui-focusVisible,
-.pagination-dropdown li.Mui-selected:hover  {
+.pagination-dropdown li.Mui-selected:hover {
   background-color: #f4f4f4;
 }
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 5228c68fb..b9bbb795e 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
+import { useTheme } from "@emotion/react";
 import {
   TableContainer,
   Paper,
@@ -20,7 +21,6 @@ import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
 import Button from "../Button";
 import "./index.css";
-
 /**
  * Component for pagination actions (first, previous, next, last).
  *
@@ -50,7 +50,7 @@ const TablePaginationActions = (props) => {
   };
 
   return (
-    <Box sx={{ flexShrink: 0, ml: "25px" }}>
+    <Box sx={{ flexShrink: 0, ml: "24px" }}>
       <Button
         level="secondary"
         label=""
@@ -141,8 +141,7 @@ const TablePaginationActions = (props) => {
  */
 
 const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
-  // Add headers to props validation
-
+  const theme = useTheme();
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(rows);
 
@@ -243,14 +242,17 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
               inputProps: { id: "pagination-dropdown" },
               IconComponent: SelectorVertical,
               sx: {
-                ml: "8px",
-                mr: "25px",
-                minWidth: "50px",
+                ml: theme.gap.small,
+                mr: theme.gap.large,
+                minWidth: theme.gap.xl,
                 textAlign: "left",
-                "&.Mui-focused > div": { backgroundColor: "white" },
+                "&.Mui-focused > div": {
+                  backgroundColor: theme.palette.otherColors.white,
+                },
               },
             },
           }}
+          sx={{ mt: theme.gap.medium }}
         />
       </Stack>
     </>
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 394ab9a45..af4cb7429 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -436,8 +436,7 @@ const Monitors = () => {
                 <ServerStatus title="Down" value={down} state="down" />
                 <ServerStatus title="Paused" value={0} state="pause" />
               </Stack>
-              <Stack
-                gap={theme.gap.large}
+              <Box
                 p={theme.gap.lgplus}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
@@ -446,7 +445,7 @@ const Monitors = () => {
                   borderRadius: `${theme.shape.borderRadius}px`,
                 }}
               >
-                <Stack direction="row" alignItems="center">
+                <Stack direction="row" alignItems="center" mb={theme.gap.large}>
                   <Typography component="h2">Current monitors</Typography>
                   <Box className="current-monitors-counter">
                     {monitorState.monitors.length}
@@ -454,7 +453,7 @@ const Monitors = () => {
                   {/* TODO - add search bar */}
                 </Stack>
                 <BasicTable data={data} paginated={true} />
-              </Stack>{" "}
+              </Box>
             </>
           )}
         </>