Update pagination buttons

BrunoQuaresma · BrunoQuaresma · commit ebe7c0f12e9f · 2025-05-15T18:36:13.000Z
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -1,12 +1,9 @@
-import { useTheme } from "@emotion/react";
 import { Button } from "components/Button/Button";
 import type { FC, ReactNode } from "react";
-import { cn } from "utils/cn";
 
 type NumberedPageButtonProps = {
 	pageNumber: number;
 	totalPages: number;
-
 	onClick?: () => void;
 	highlighted?: boolean;
 	disabled?: boolean;
@@ -69,27 +66,10 @@ const BasePageButton: FC<BasePageButtonProps> = ({
 	highlighted = false,
 	disabled = false,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Button
-			variant="outline"
-			size="sm"
-			style={
-				highlighted ? {
-					borderColor: theme.roles.active.outline,
-					backgroundColor: theme.roles.active.background,
-					// Define CSS variables to use in hover styles
-					"--active-border-color": theme.roles.active.outline,
-					"--active-bg-color": theme.roles.active.background,
-				} : undefined
-			}
-			className={
-				highlighted ? cn(
-					// Override default hover styles for highlighted buttons
-					"hover:!border-[color:var(--active-border-color)] hover:!bg-[color:var(--active-bg-color)]"
-				) : undefined
-			}
+			variant={highlighted ? "default" : "outline"}
+			size="icon"
 			aria-label={ariaLabel}
 			name={name}
 			disabled={disabled}
@@ -118,4 +98,4 @@ function getNumberedButtonLabel(
 	}
 
 	return `Page ${page}`;
-}
+}
diff --git a/site/src/components/PaginationWidget/PaginationNavButton.tsx b/site/src/components/PaginationWidget/PaginationNavButton.tsx
@@ -62,16 +62,9 @@ function PaginationNavButtonCore({
 			 */}
 			<Button
 				variant="outline"
-				size="sm"
-				aria-disabled={disabled}
-				className={disabled ? "cursor-default" : undefined}
-				onClick={() => {
-					if (disabled) {
-						setShowDisabledMessage(true);
-					} else {
-						onClick();
-					}
-				}}
+				size="icon"
+				disabled={disabled}
+				onClick={onClick}
 				{...delegatedProps}
 			/>
 		</Tooltip>
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<ChevronLeftIcon className="size-icon-sm" />
+				<ChevronLeftIcon />
 			</PaginationNavButton>
 
 			{isMobile ? (
@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
 					}
 				}}
 			>
-				<ChevronRightIcon className="size-icon-sm" />
+				<ChevronRightIcon />
 			</PaginationNavButton>
 		</div>
 	);

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({`
`59`	`59`	`}`
`60`	`60`	`}}`
`61`	`61`	`>`
`62`		`- <ChevronLeftIcon className="size-icon-sm" />`
	`62`	`+ <ChevronLeftIcon />`
`63`	`63`	`</PaginationNavButton>`
`64`	`64`
`65`	`65`	`{isMobile ? (`
`@@ -86,7 +86,7 @@ export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({`
`86`	`86`	`}`
`87`	`87`	`}}`
`88`	`88`	`>`
`89`		`- <ChevronRightIcon className="size-icon-sm" />`
	`89`	`+ <ChevronRightIcon />`
`90`	`90`	`</PaginationNavButton>`
`91`	`91`	`</div>`
`92`	`92`	`);`