Refactored sx styling to theme file style overrides

Client/src/Components/BasicTable/index.css

@@ -120,17 +120,6 @@
   opacity: 0.4;
 }
 
-.pagination-dropdown ul {
-  padding: 4px;
-  min-width: 100px;
-}
-.pagination-dropdown li {
-  font-size: var(--env-var-font-size-medium);
-}
-body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
-  font-size: var(--env-var-font-size-small-plus);
-}
-
 .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
   text-transform: uppercase;
   opacity: 0.8;

Client/src/Components/BasicTable/index.jsx

@@ -272,7 +272,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
             },
           }}
         >
-          <Typography px={theme.spacing(2)} sx={{ opacity: 0.7 }}>
+          <Typography px={theme.spacing(2)} fontSize={12} sx={{ opacity: 0.7 }}>
             Showing {getRange()} of {data.rows.length} monitor(s)
           </Typography>
           <TablePagination
@@ -300,19 +300,11 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                     sx: {
                       mt: 0,
                       mb: theme.spacing(2),
-                      "& 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" },
-                  sx: { mt: "-4px" },
+                  sx: { mt: theme.spacing(-2) },
                 },
                 inputProps: { id: "pagination-dropdown" },
                 IconComponent: SelectorVertical,