Small styling changes

Client/src/Components/BasicTable/index.css

@@ -148,7 +148,7 @@
   height: 22px;
 }
 .MuiTablePagination-root svg path {
-  stroke: var(--env-var-color-5);
+  stroke: var(--env-var-color-2);
   stroke-width: 1.3;
 }
 .MuiTablePagination-root .MuiSelect-icon {
@@ -175,7 +175,8 @@
   padding: 4px;
   min-width: 100px;
 }
-.pagination-dropdown li {
+.pagination-dropdown li,
+body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   padding: 4px;

Client/src/Components/BasicTable/index.jsx

@@ -211,7 +211,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
+      {paginated && <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography sx={{ opacity: 0.7 }}>
           Showing {getRange()} of {data.rows.length} monitor(s)
         </Typography>
@@ -254,7 +254,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           }}
           sx={{ mt: theme.gap.medium }}
         />
-      </Stack>
+      </Stack>}
     </>
   );
 };

Client/src/Components/Sidebar/index.css

@@ -58,7 +58,7 @@ aside
   height: 100%;
   width: 100%;
   border-left: solid 1px var(--env-var-color-5);
-  opacity: 0.3;
+  opacity: 0.2;
 }
 aside
   .MuiCollapse-wrapperInner
@@ -75,13 +75,13 @@ aside .MuiList-root .MuiListItemText-root + svg {
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
-  left: -7px;
+  left: -8px;
   top: 50%;
-  height: 1px;
-  width: 6px;
+  transform: translateY(-50%);
+  height: 3px;
+  width: 3px;
   border-radius: 50%;
-  background-color: var(--env-var-color-5);
-  opacity: 0.3;
+  background-color: #d6d9dd;
 }
 
 aside {

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -322,13 +322,13 @@ const ProfilePanel = () => {
       <Divider aria-hidden="true" />
       <form className="delete-profile-form" noValidate spellCheck="false">
         <div className="delete-profile-form__wrapper">
-          <Stack direction="column" gap="15px">
+          <Stack direction="column" gap="8px">
             <Typography component="h1">Delete account</Typography>
             <Typography component="p">
               Note that deleting your account will remove all data from our
               system. This is permanent and non-recoverable.
             </Typography>
-            <Box sx={{ mt: theme.spacing(1) }}>
+            <Box sx={{ mt: theme.spacing(2) }}>
               <Button
                 level="error"
                 label="Delete account"
@@ -399,7 +399,7 @@ const ProfilePanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 400,
+            width: 450,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
             borderRadius: `${theme.shape.borderRadius}px`,

Client/src/Pages/Account/index.jsx

@@ -1,14 +1,13 @@
 import PropTypes from "prop-types";
-import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
-import "./index.css";
 import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
 import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
+import "./index.css";
 
 /**
  * Account component renders a settings page with tabs for Profile, Password, and Team settings.

Client/src/Pages/Monitors/index.css

@@ -11,8 +11,6 @@
 }
 .monitors p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-}
-.monitors p.MuiTypography-root {
   color: var(--env-var-color-5);
 }
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {

Client/src/Pages/Monitors/index.jsx

@@ -376,7 +376,7 @@ const Monitors = () => {
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
-    <Stack className="monitors" pt={theme.gap.xl} gap={theme.gap.large}>
+    <Stack className="monitors" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -395,10 +395,11 @@ const Monitors = () => {
             {monitorState.monitors?.length !== 0 && (
               <Button
                 level="primary"
-                label="Create new monitor"
+                label="Create monitor"
                 onClick={() => {
                   navigate("/monitors/create");
                 }}
+                sx={{ fontWeight: 500 }}
               />
             )}
           </Stack>