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`,