From 4dc48b5622ebe34b5aaeccab8235a27ef08fce91 Mon Sep 17 00:00:00 2001 From: anna Date: Fri, 9 Oct 2026 14:43:25 -0500 Subject: [PATCH 1/7] feat: add a hover to the slider pagination text button to indicate to first time users that it is clickable --- .../mui/tables/components/SliderPagination.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index fc80ab61..a9b3b870 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -93,9 +93,16 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi border: "none", background: "none", px: 1.5, - height: 40, + height: 34, + borderRadius: "17px", cursor: "pointer", - whiteSpace: "nowrap" + whiteSpace: "nowrap", + transition: (theme) => + theme.transitions.create("background-color", { + duration: theme.transitions.duration.shortest + }), + "&:hover": { bgcolor: "action.hover" }, + "@media (hover: none)": { "&:hover": { bgcolor: "transparent" } } }} > {T.translate("mui_table.page_of", { From 7935c908b77c9d0dbbce66ab1e53a1ee5177fd6f Mon Sep 17 00:00:00 2001 From: anna Date: Fri, 23 Oct 2026 16:40:05 -0500 Subject: [PATCH 2/7] fix: revert button size to 40px --- src/components/mui/tables/components/SliderPagination.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index a9b3b870..1a662c40 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -93,7 +93,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi border: "none", background: "none", px: 1.5, - height: 34, + height: 40, borderRadius: "17px", cursor: "pointer", whiteSpace: "nowrap", From 6508aca68f78512a42d9d8b06bfa46fa6a273d62 Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 27 Oct 2026 16:13:49 -0500 Subject: [PATCH 3/7] fix: use the same styling for page dropdown, pagination slider, and pagination chevrons --- .../mui/tables/components/CustomTablePagination.js | 6 ++++++ .../mui/tables/components/SliderPagination.js | 12 ++++++------ src/components/mui/tables/components/table-styles.js | 11 +++++++++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/mui/tables/components/CustomTablePagination.js b/src/components/mui/tables/components/CustomTablePagination.js index 0ea1ce2c..e97a9b89 100644 --- a/src/components/mui/tables/components/CustomTablePagination.js +++ b/src/components/mui/tables/components/CustomTablePagination.js @@ -20,6 +20,7 @@ import MenuItem from "@mui/material/MenuItem"; import PropTypes from "prop-types"; import { DEFAULT_PER_PAGE, FIFTY_PER_PAGE, TWENTY_PER_PAGE } from "../../../../utils/constants"; import SliderPagination from "./SliderPagination"; +import { PAGINATION_BUTTON_SX } from "./table-styles"; const BASE_PER_PAGE_OPTIONS = [DEFAULT_PER_PAGE, TWENTY_PER_PAGE, FIFTY_PER_PAGE]; @@ -91,7 +92,12 @@ const CustomTablePagination = ({ borderRadius: "20px", minWidth: 80, bgcolor: "background.paper", + ...PAGINATION_BUTTON_SX, + // keep the border grey on hover and focus (the base theme turns it black) + "--TextField-brandBorderHoverColor": (theme) => theme.palette.divider, + "--TextField-brandBorderFocusedColor": (theme) => theme.palette.divider, "& .MuiOutlinedInput-notchedOutline": { borderColor: "divider" }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderWidth: 1 }, "& .MuiSelect-select": { color: "text.secondary" } }} inputProps={{ "aria-label": T.translate("mui_table.rows_per_page") }} diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index 1a662c40..76450698 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -22,6 +22,7 @@ import ClickAwayListener from "@mui/material/ClickAwayListener"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import PropTypes from "prop-types"; +import { PAGINATION_BUTTON_SX } from "./table-styles"; const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initialExpanded }) => { const totalPages = Math.max(1, Math.ceil((totalRows ?? 0) / perPage)); @@ -79,6 +80,8 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi onClick={prev} disabled={currentPage <= 1} aria-label={T.translate("mui_table.previous_page")} + disableFocusRipple + sx={PAGINATION_BUTTON_SX} > {/* explicit px so a host page's root font-size reset can't shrink this */} @@ -97,12 +100,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi borderRadius: "17px", cursor: "pointer", whiteSpace: "nowrap", - transition: (theme) => - theme.transitions.create("background-color", { - duration: theme.transitions.duration.shortest - }), - "&:hover": { bgcolor: "action.hover" }, - "@media (hover: none)": { "&:hover": { bgcolor: "transparent" } } + ...PAGINATION_BUTTON_SX }} > {T.translate("mui_table.page_of", { @@ -137,6 +135,8 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi onClick={next} disabled={currentPage >= totalPages} aria-label={T.translate("mui_table.next_page")} + disableFocusRipple + sx={PAGINATION_BUTTON_SX} > diff --git a/src/components/mui/tables/components/table-styles.js b/src/components/mui/tables/components/table-styles.js index 004713e8..eb36bcde 100644 --- a/src/components/mui/tables/components/table-styles.js +++ b/src/components/mui/tables/components/table-styles.js @@ -19,6 +19,17 @@ export const RESPONSIVE_TABLE_SX = { tableLayout: "auto" }; +// grey on hover, darker grey on keyboard focus; shared by the pagination arrows, page button and per-page select +export const PAGINATION_BUTTON_SX = { + transition: (theme) => + theme.transitions.create("background-color", { + duration: theme.transitions.duration.shortest + }), + "&:hover": { bgcolor: "action.hover" }, + "@media (hover: none)": { "&:hover": { bgcolor: "transparent" } }, + "&:focus-visible, &:has(:focus-visible)": { bgcolor: "action.focus", outline: "none" } +}; + export const getActionsMenuBreakpoint = (dataColumnCount) => dataColumnCount <= SMALL_TABLE_MAX_COLUMNS ? "md" : "lg"; From a27adb8a4f5c5c5cb5065471d20bc2fab97bc602 Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 27 Oct 2026 16:19:49 -0500 Subject: [PATCH 4/7] fix: if the slider is hidden screen reader and tab don't reveal it --- src/components/mui/tables/components/SliderPagination.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index 76450698..93d7ae31 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -109,6 +109,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi })} From 773e278ef113de1ee92786cab921e406adff1704 Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 27 Oct 2026 16:48:35 -0500 Subject: [PATCH 5/7] fix: remove focus from slider if its hidden and corresponding test --- .../__tests__/mui-table-custom-pagination.test.js | 14 +++++++++++++- .../mui/tables/components/SliderPagination.js | 15 +++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/mui/__tests__/mui-table-custom-pagination.test.js b/src/components/mui/__tests__/mui-table-custom-pagination.test.js index 59dccf72..ff75ed3a 100644 --- a/src/components/mui/__tests__/mui-table-custom-pagination.test.js +++ b/src/components/mui/__tests__/mui-table-custom-pagination.test.js @@ -17,7 +17,7 @@ jest.mock("i18n-react/dist/i18n-react", () => ({ })); import React from "react"; -import { render, screen, fireEvent } from "@testing-library/react"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import "@testing-library/jest-dom"; import CustomTablePagination from "../tables/components/CustomTablePagination"; @@ -84,4 +84,16 @@ describe("CustomTablePagination", () => { expect(onPageChange).toHaveBeenCalledWith(4); }); + + test("returns keyboard focus to the page button when the slider collapses", async () => { + setup({ currentPage: 3, totalRows: 100, perPage: 10 }); + const pageButton = screen.getByRole("button", { name: "mui_table.page_of" }); + await userEvent.click(pageButton); + + await userEvent.tab(); + expect(screen.getByRole("slider")).toHaveFocus(); + await userEvent.keyboard("{ArrowRight}"); + + await waitFor(() => expect(pageButton).toHaveFocus()); + }); }); diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index 93d7ae31..0393203e 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -12,7 +12,7 @@ * */ import * as React from "react"; -import { useCallback, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import T from "i18n-react/dist/i18n-react"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; @@ -29,6 +29,11 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi const [expanded, setExpanded] = useState(initialExpanded); const [dragValue, setDragValue] = useState(currentPage); const timeoutRef = useRef(null); + const pageButtonRef = useRef(null); + const sliderBoxRef = useRef(null); + + // cancel a pending collapse if the component unmounts first + useEffect(() => () => clearTimeout(timeoutRef.current), []); const togglePill = () => { if (expanded) { @@ -44,7 +49,11 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi const onSliderCommit = useCallback( (_ev, value) => { onPageChange(value); - timeoutRef.current = setTimeout(() => setExpanded(false), 150); + timeoutRef.current = setTimeout(() => { + // don't leave keyboard focus on the slider once it's hidden + if (sliderBoxRef.current?.contains(document.activeElement)) pageButtonRef.current?.focus(); + setExpanded(false); + }, 150); }, [onPageChange] ); @@ -88,6 +97,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi Date: Wed, 28 Oct 2026 19:25:22 -0500 Subject: [PATCH 6/7] fix: move pagination styling into custom theme base --- src/components/mui/MuiBaseCustomTheme.js | 42 ++++++++++++++++++- .../components/CustomTablePagination.js | 9 +--- .../mui/tables/components/SliderPagination.js | 10 ++--- .../mui/tables/components/table-styles.js | 11 ----- 4 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/components/mui/MuiBaseCustomTheme.js b/src/components/mui/MuiBaseCustomTheme.js index 240b8ade..c3a4434e 100644 --- a/src/components/mui/MuiBaseCustomTheme.js +++ b/src/components/mui/MuiBaseCustomTheme.js @@ -13,6 +13,26 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +// opt-in class for the pagination hover/focus overrides below +export const PAGINATION_BUTTON_CLASS = "pagination-button"; + +// grey on hover, darker grey on keyboard focus; shared by the pagination arrows, page button and per-page select +const paginationButtonStyles = (theme) => ({ + transition: theme.transitions.create("background-color", { + duration: theme.transitions.duration.shortest + }), + "&:hover": { backgroundColor: theme.palette.action.hover }, + "@media (hover: none)": { "&:hover": { backgroundColor: "transparent" } }, + "&:focus-visible, &:has(:focus-visible)": { + backgroundColor: theme.palette.action.focus, + outline: "none" + } +}); + +const paginationButtonOverride = ({ theme }) => ({ + [`&.${PAGINATION_BUTTON_CLASS}`]: paginationButtonStyles(theme) +}); + export const MuiBaseCustomTheme = { // must match the apps' html font-size so MUI's rem values render at their designed px typography: { @@ -21,7 +41,7 @@ export const MuiBaseCustomTheme = { components: { MuiOutlinedInput: { styleOverrides: { - root: { + root: ({ theme }) => ({ "--TextField-brandBorderColor": "#000", "--TextField-brandBorderHoverColor": "#000", "--TextField-brandBorderFocusedColor": "#000", @@ -33,8 +53,26 @@ export const MuiBaseCustomTheme = { }, "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--TextField-brandBorderFocusedColor)" + }, + // per-page select: keep the border grey on rest, hover and focus + [`&.${PAGINATION_BUTTON_CLASS}`]: { + ...paginationButtonStyles(theme), + "--TextField-brandBorderColor": theme.palette.divider, + "--TextField-brandBorderHoverColor": theme.palette.divider, + "--TextField-brandBorderFocusedColor": theme.palette.divider, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderWidth: 1 } } - } + }) + } + }, + MuiIconButton: { + styleOverrides: { + root: paginationButtonOverride + } + }, + MuiTypography: { + styleOverrides: { + root: paginationButtonOverride } }, MuiSelect: { diff --git a/src/components/mui/tables/components/CustomTablePagination.js b/src/components/mui/tables/components/CustomTablePagination.js index e97a9b89..6dbe3d47 100644 --- a/src/components/mui/tables/components/CustomTablePagination.js +++ b/src/components/mui/tables/components/CustomTablePagination.js @@ -20,7 +20,7 @@ import MenuItem from "@mui/material/MenuItem"; import PropTypes from "prop-types"; import { DEFAULT_PER_PAGE, FIFTY_PER_PAGE, TWENTY_PER_PAGE } from "../../../../utils/constants"; import SliderPagination from "./SliderPagination"; -import { PAGINATION_BUTTON_SX } from "./table-styles"; +import { PAGINATION_BUTTON_CLASS } from "../../MuiBaseCustomTheme"; const BASE_PER_PAGE_OPTIONS = [DEFAULT_PER_PAGE, TWENTY_PER_PAGE, FIFTY_PER_PAGE]; @@ -87,17 +87,12 @@ const CustomTablePagination = ({ size="small" value={perPage} onChange={handleRowsPerPageChange} + className={PAGINATION_BUTTON_CLASS} sx={{ height: 40, borderRadius: "20px", minWidth: 80, bgcolor: "background.paper", - ...PAGINATION_BUTTON_SX, - // keep the border grey on hover and focus (the base theme turns it black) - "--TextField-brandBorderHoverColor": (theme) => theme.palette.divider, - "--TextField-brandBorderFocusedColor": (theme) => theme.palette.divider, - "& .MuiOutlinedInput-notchedOutline": { borderColor: "divider" }, - "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderWidth: 1 }, "& .MuiSelect-select": { color: "text.secondary" } }} inputProps={{ "aria-label": T.translate("mui_table.rows_per_page") }} diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index 0393203e..70313cea 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -22,7 +22,7 @@ import ClickAwayListener from "@mui/material/ClickAwayListener"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import PropTypes from "prop-types"; -import { PAGINATION_BUTTON_SX } from "./table-styles"; +import { PAGINATION_BUTTON_CLASS } from "../../MuiBaseCustomTheme"; const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initialExpanded }) => { const totalPages = Math.max(1, Math.ceil((totalRows ?? 0) / perPage)); @@ -90,7 +90,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi disabled={currentPage <= 1} aria-label={T.translate("mui_table.previous_page")} disableFocusRipple - sx={PAGINATION_BUTTON_SX} + className={PAGINATION_BUTTON_CLASS} > {/* explicit px so a host page's root font-size reset can't shrink this */} @@ -102,6 +102,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi onClick={togglePill} variant="body1" color="text.secondary" + className={PAGINATION_BUTTON_CLASS} sx={{ border: "none", background: "none", @@ -109,8 +110,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi height: 40, borderRadius: "17px", cursor: "pointer", - whiteSpace: "nowrap", - ...PAGINATION_BUTTON_SX + whiteSpace: "nowrap" }} > {T.translate("mui_table.page_of", { @@ -150,7 +150,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi disabled={currentPage >= totalPages} aria-label={T.translate("mui_table.next_page")} disableFocusRipple - sx={PAGINATION_BUTTON_SX} + className={PAGINATION_BUTTON_CLASS} > diff --git a/src/components/mui/tables/components/table-styles.js b/src/components/mui/tables/components/table-styles.js index eb36bcde..004713e8 100644 --- a/src/components/mui/tables/components/table-styles.js +++ b/src/components/mui/tables/components/table-styles.js @@ -19,17 +19,6 @@ export const RESPONSIVE_TABLE_SX = { tableLayout: "auto" }; -// grey on hover, darker grey on keyboard focus; shared by the pagination arrows, page button and per-page select -export const PAGINATION_BUTTON_SX = { - transition: (theme) => - theme.transitions.create("background-color", { - duration: theme.transitions.duration.shortest - }), - "&:hover": { bgcolor: "action.hover" }, - "@media (hover: none)": { "&:hover": { bgcolor: "transparent" } }, - "&:focus-visible, &:has(:focus-visible)": { bgcolor: "action.focus", outline: "none" } -}; - export const getActionsMenuBreakpoint = (dataColumnCount) => dataColumnCount <= SMALL_TABLE_MAX_COLUMNS ? "md" : "lg"; From 9e6479d5facb1f93251342d9c71264a7bdcb4a2e Mon Sep 17 00:00:00 2001 From: anna Date: Wed, 28 Oct 2026 19:29:50 -0500 Subject: [PATCH 7/7] fix: adjust slider custom theme and match hover radius to pill radius --- src/components/mui/MuiBaseCustomTheme.js | 15 ++++----------- .../tables/components/CustomTablePagination.js | 3 +-- .../mui/tables/components/SliderPagination.js | 9 ++++----- 3 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/mui/MuiBaseCustomTheme.js b/src/components/mui/MuiBaseCustomTheme.js index c3a4434e..68c82cb3 100644 --- a/src/components/mui/MuiBaseCustomTheme.js +++ b/src/components/mui/MuiBaseCustomTheme.js @@ -13,10 +13,7 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -// opt-in class for the pagination hover/focus overrides below -export const PAGINATION_BUTTON_CLASS = "pagination-button"; - -// grey on hover, darker grey on keyboard focus; shared by the pagination arrows, page button and per-page select +// pagination controls: grey on hover, darker grey on keyboard focus const paginationButtonStyles = (theme) => ({ transition: theme.transitions.create("background-color", { duration: theme.transitions.duration.shortest @@ -29,10 +26,6 @@ const paginationButtonStyles = (theme) => ({ } }); -const paginationButtonOverride = ({ theme }) => ({ - [`&.${PAGINATION_BUTTON_CLASS}`]: paginationButtonStyles(theme) -}); - export const MuiBaseCustomTheme = { // must match the apps' html font-size so MUI's rem values render at their designed px typography: { @@ -55,7 +48,7 @@ export const MuiBaseCustomTheme = { borderColor: "var(--TextField-brandBorderFocusedColor)" }, // per-page select: keep the border grey on rest, hover and focus - [`&.${PAGINATION_BUTTON_CLASS}`]: { + "&.pagination-button": { ...paginationButtonStyles(theme), "--TextField-brandBorderColor": theme.palette.divider, "--TextField-brandBorderHoverColor": theme.palette.divider, @@ -67,12 +60,12 @@ export const MuiBaseCustomTheme = { }, MuiIconButton: { styleOverrides: { - root: paginationButtonOverride + root: ({ theme }) => ({ "&.pagination-button": paginationButtonStyles(theme) }) } }, MuiTypography: { styleOverrides: { - root: paginationButtonOverride + root: ({ theme }) => ({ "&.pagination-button": paginationButtonStyles(theme) }) } }, MuiSelect: { diff --git a/src/components/mui/tables/components/CustomTablePagination.js b/src/components/mui/tables/components/CustomTablePagination.js index 6dbe3d47..244f3d23 100644 --- a/src/components/mui/tables/components/CustomTablePagination.js +++ b/src/components/mui/tables/components/CustomTablePagination.js @@ -20,7 +20,6 @@ import MenuItem from "@mui/material/MenuItem"; import PropTypes from "prop-types"; import { DEFAULT_PER_PAGE, FIFTY_PER_PAGE, TWENTY_PER_PAGE } from "../../../../utils/constants"; import SliderPagination from "./SliderPagination"; -import { PAGINATION_BUTTON_CLASS } from "../../MuiBaseCustomTheme"; const BASE_PER_PAGE_OPTIONS = [DEFAULT_PER_PAGE, TWENTY_PER_PAGE, FIFTY_PER_PAGE]; @@ -87,7 +86,7 @@ const CustomTablePagination = ({ size="small" value={perPage} onChange={handleRowsPerPageChange} - className={PAGINATION_BUTTON_CLASS} + className="pagination-button" sx={{ height: 40, borderRadius: "20px", diff --git a/src/components/mui/tables/components/SliderPagination.js b/src/components/mui/tables/components/SliderPagination.js index 70313cea..f00c4418 100644 --- a/src/components/mui/tables/components/SliderPagination.js +++ b/src/components/mui/tables/components/SliderPagination.js @@ -22,7 +22,6 @@ import ClickAwayListener from "@mui/material/ClickAwayListener"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import PropTypes from "prop-types"; -import { PAGINATION_BUTTON_CLASS } from "../../MuiBaseCustomTheme"; const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initialExpanded }) => { const totalPages = Math.max(1, Math.ceil((totalRows ?? 0) / perPage)); @@ -90,7 +89,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi disabled={currentPage <= 1} aria-label={T.translate("mui_table.previous_page")} disableFocusRipple - className={PAGINATION_BUTTON_CLASS} + className="pagination-button" > {/* explicit px so a host page's root font-size reset can't shrink this */} @@ -102,13 +101,13 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi onClick={togglePill} variant="body1" color="text.secondary" - className={PAGINATION_BUTTON_CLASS} + className="pagination-button" sx={{ border: "none", background: "none", px: 1.5, height: 40, - borderRadius: "17px", + borderRadius: "20px", cursor: "pointer", whiteSpace: "nowrap" }} @@ -150,7 +149,7 @@ const SliderPagination = ({ currentPage, totalRows, perPage, onPageChange, initi disabled={currentPage >= totalPages} aria-label={T.translate("mui_table.next_page")} disableFocusRipple - className={PAGINATION_BUTTON_CLASS} + className="pagination-button" >