Refactored buttons

Client/src/Components/BasicTable/index.jsx

@@ -13,6 +13,7 @@ import {
   Box,
   Typography,
   Stack,
+  Button,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
 import { setRowsPerPage } from "../../Features/UI/uiSlice";
@@ -21,7 +22,6 @@ 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 SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
-import Button from "../Button";
 import "./index.css";
 /**
  * Component for pagination actions (first, previous, next, last).
@@ -54,37 +54,37 @@ const TablePaginationActions = (props) => {
   return (
     <Box sx={{ flexShrink: 0, ml: "24px" }}>
       <Button
-        level="secondary"
-        label=""
-        img={<LeftArrowDouble />}
+        variant="group"
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
-      />
+      >
+        <LeftArrowDouble />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<LeftArrow />}
+        variant="group"
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label="previous page"
-      />
+      >
+        <LeftArrow />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<RightArrow />}
+        variant="group"
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
-      />
+      >
+        <RightArrow />
+      </Button>
       <Button
-        level="secondary"
-        label=""
-        img={<RightArrowDouble />}
+        variant="group"
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
-      />
+      >
+        <RightArrowDouble />
+      </Button>
     </Box>
   );
 };
@@ -293,19 +293,10 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
             sx={{
               mt: theme.spacing(6),
               color: theme.palette.text.secondary,
-              "& button.MuiButtonBase-root, & .MuiSelect-select": {
-                border: 1,
-                borderColor: theme.palette.border.light,
-                borderRadius: theme.shape.borderRadius,
-              },
               "& svg path": {
                 stroke: theme.palette.text.tertiary,
                 strokeWidth: 1.3,
               },
-              "& button:not(.Mui-disabled):hover": {
-                backgroundColor: theme.palette.background.fill,
-                borderColor: theme.palette.background.fill,
-              },
             }}
           />
         </Stack>