Styled rows per page select component

Client/src/Components/BasicTable/index.css

@@ -10,7 +10,6 @@
 }
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  font-weight: 500;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -127,13 +126,22 @@
 }
 
 .MuiTablePagination-root p {
-  color: var(--env-var-color-5);
+  color: var(--env-var-color-2);
+  font-weight: 500;
+}
+.MuiTablePagination-root button,
+.MuiTablePagination-root .MuiSelect-select {
+  border: solid 1px #ebebeb;
+  border-radius: var(--env-var-radius-1);
+}
+.MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
+  text-align: left;
+  text-align-last: left;
 }
 .MuiTablePagination-root button {
   min-width: 0;
   padding: 4px;
   margin-left: 5px;
-  border-color: #ebebeb;
 }
 .MuiTablePagination-root svg {
   width: 22px;
@@ -143,6 +151,13 @@
   stroke: var(--env-var-color-5);
   stroke-width: 1.3;
 }
+.MuiTablePagination-root .MuiSelect-icon {
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  right: 8%;
+  transform: translateY(-50%);
+}
 .MuiTablePagination-root button.Mui-disabled {
   opacity: 0.4;
 }
@@ -150,3 +165,21 @@
   background-color: #f4f4f4;
   border-color: #f4f4f4;
 }
+
+.pagination-dropdown.MuiPaper-root {
+  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+}
+.pagination-dropdown ul {
+  padding: 4px;
+  min-width: 100px;
+}
+.pagination-dropdown li {
+  font-size: var(--env-var-font-size-medium);
+  padding: 4px;
+}
+.pagination-dropdown li.Mui-selected,
+.pagination-dropdown li.Mui-selected:hover  {
+  background-color: #f4f4f4;
+}

Client/src/Components/BasicTable/index.jsx

@@ -10,14 +10,14 @@ import {
   TableBody,
   TablePagination,
   Box,
-  IconButton,
 } from "@mui/material";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
 import RightArrow from "../../assets/icons/right-arrow.svg?react";
-import "./index.css";
+import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
 import Button from "../Button";
+import "./index.css";
 
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
@@ -36,9 +36,10 @@ const TablePaginationActions = (props) => {
   };
 
   return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+    <Box sx={{ flexShrink: 0, ml: "25px" }}>
       <Button
         level="secondary"
+        label=""
         img={<LeftArrowDouble />}
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
@@ -46,6 +47,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<LeftArrow />}
         onClick={handleBackButtonClick}
         disabled={page === 0}
@@ -53,6 +55,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<RightArrow />}
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
@@ -60,6 +63,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<RightArrowDouble />}
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
@@ -122,7 +126,7 @@ const TablePaginationActions = (props) => {
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
+const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
@@ -193,9 +197,31 @@ const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
         rowsPerPageOptions={[5, 10, 15, 25]}
         onRowsPerPageChange={handleChangeRowsPerPage}
         ActionsComponent={TablePaginationActions}
+        labelRowsPerPage="Rows per page"
         labelDisplayedRows={({ page, count }) =>
           `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
         }
+        slotProps={{
+          select: {
+            MenuProps: {
+              PaperProps: {
+                className: "pagination-dropdown",
+              },
+              transformOrigin: { vertical: "bottom", horizontal: "left" },
+              anchorOrigin: { vertical: "top", horizontal: "left" },
+              sx: { mt: "-4px" },
+            },
+            inputProps: { id: "pagination-dropdown" },
+            IconComponent: SelectorVertical,
+            sx: {
+              ml: "8px",
+              mr: "25px",
+              minWidth: "50px",
+              textAlign: "left",
+              "&.Mui-focused > div": { backgroundColor: "white" },
+            },
+          },
+        }}
       />
     </>
   );

Client/src/Pages/Monitors/index.css

@@ -1,7 +1,7 @@
 .monitors h1.MuiTypography-root,
 .monitors h2.MuiTypography-root {
   color: var(--env-var-color-1);
-  font-weight: 500;
+  font-weight: 600;
 }
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);

Client/src/Pages/Monitors/index.jsx

@@ -439,7 +439,6 @@ const Monitors = () => {
               <Stack
                 gap={theme.gap.large}
                 p={theme.gap.lgplus}
-                flex={1}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
                 backgroundColor={theme.palette.otherColors.white}

Client/src/assets/icons/selector-vertical.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 15L12 20L17 15M7 9L12 4L17 9" stroke="#667085" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>