diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 038d3786a..cf8b86b23 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -9,8 +9,9 @@ import { TableCell, TableContainer, TableHead, - TablePagination, TableRow, + // TablePagination, + // Typography, } from "@mui/material"; import { Heading } from "../../Components/Heading"; import { useTheme } from "@emotion/react"; @@ -217,7 +218,77 @@ function Infrastructure() { - + {/* + + Showing {getRange()} of {monitorCount} monitor(s) + + + `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}` + } + slotProps={{ + select: { + MenuProps: { + keepMounted: true, + disableScrollLock: true, + PaperProps: { + className: "pagination-dropdown", + sx: { + mt: 0, + mb: theme.spacing(2), + }, + }, + transformOrigin: { vertical: "bottom", horizontal: "left" }, + anchorOrigin: { vertical: "top", horizontal: "left" }, + sx: { + mt: theme.spacing(-2), + }, + }, + inputProps: { id: "pagination-dropdown" }, + IconComponent: SelectorVertical, + sx: { + ml: theme.spacing(4), + mr: theme.spacing(12), + minWidth: theme.spacing(20), + textAlign: "left", + "&.Mui-focused > div": { + backgroundColor: theme.palette.background.main, + }, + }, + }, + }} + sx={{ + color: theme.palette.text.secondary, + "& svg path": { + stroke: theme.palette.text.tertiary, + strokeWidth: 1.3, + }, + "& .MuiSelect-select": { + border: 1, + borderColor: theme.palette.border.light, + borderRadius: theme.shape.borderRadius, + }, + }} + /> + */} ); diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/Skeleton/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/Skeleton/index.jsx index e30e0a255..22d885c97 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/Skeleton/index.jsx +++ b/Client/src/Pages/Monitors/Home/MonitorTable/Skeleton/index.jsx @@ -3,6 +3,7 @@ const ROWS_NUMBER = 7; const ROWS_ARRAY = Array.from({ length: ROWS_NUMBER }, (_, i) => i); const TableBodySkeleton = () => { + /* TODO Skeleton does not follow light and dark theme */ return ( <> {ROWS_ARRAY.map((row) => ( diff --git a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx index 145e0c58e..4f2181a3d 100644 --- a/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx +++ b/Client/src/Pages/Monitors/Home/MonitorTable/index.jsx @@ -452,7 +452,6 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => { }, }} sx={{ - /* mt: theme.spacing(6), */ color: theme.palette.text.secondary, "& svg path": { stroke: theme.palette.text.tertiary,