fix pagination

aslilac · aslilac · commit 00c9f74adcc6 · 2023-12-19T23:21:52.000Z
diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/site/src/components/PaginationWidget/PageButtons.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import Button from "@mui/material/Button";
 import { useTheme } from "@emotion/react";
 
@@ -11,13 +11,13 @@ type NumberedPageButtonProps = {
   disabled?: boolean;
 };
 
-export function NumberedPageButton({
+export const NumberedPageButton: FC<NumberedPageButtonProps> = ({
   pageNumber,
   totalPages,
   onClick,
   highlighted = false,
   disabled = false,
-}: NumberedPageButtonProps) {
+}) => {
   return (
     <BasePageButton
       name="Page button"
@@ -29,16 +29,16 @@ export function NumberedPageButton({
       {pageNumber}
     </BasePageButton>
   );
-}
+};
 
 type PlaceholderPageButtonProps = PropsWithChildren<{
   pagesOmitted: number;
 }>;
 
-export function PlaceholderPageButton({
+export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
   pagesOmitted,
   children = <>&hellip;</>,
-}: PlaceholderPageButtonProps) {
+}) => {
   return (
     <BasePageButton
       disabled
@@ -48,7 +48,7 @@ export function PlaceholderPageButton({
       {children}
     </BasePageButton>
   );
-}
+};
 
 type BasePageButtonProps = PropsWithChildren<{
   name: string;
@@ -59,22 +59,29 @@ type BasePageButtonProps = PropsWithChildren<{
   disabled?: boolean;
 }>;
 
-function BasePageButton({
+const BasePageButton: FC<BasePageButtonProps> = ({
   children,
   onClick,
   name,
   "aria-label": ariaLabel,
   highlighted = false,
   disabled = false,
-}: BasePageButtonProps) {
+}) => {
   const theme = useTheme();
 
   return (
     <Button
       css={
         highlighted && {
-          borderColor: `${theme.palette.info.main}`,
-          backgroundColor: `${theme.palette.info.dark}`,
+          borderColor: theme.experimental.roles.active.outline,
+          backgroundColor: theme.experimental.roles.active.background,
+
+          // Override the hover state with active colors, but not hover
+          // colors because clicking won't do anything.
+          "&:hover": {
+            borderColor: theme.experimental.roles.active.outline,
+            backgroundColor: theme.experimental.roles.active.background,
+          },
         }
       }
       aria-label={ariaLabel}
@@ -85,7 +92,7 @@ function BasePageButton({
       {children}
     </Button>
   );
-}
+};
 
 function getNumberedButtonLabel(
   page: number,
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -1,6 +1,6 @@
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTheme } from "@emotion/react";
-
+import { type FC } from "react";
 import { PlaceholderPageButton, NumberedPageButton } from "./PageButtons";
 import { buildPagedList } from "./utils";
 import { PaginationNavButton } from "./PaginationNavButton";
@@ -17,14 +17,14 @@ export type PaginationWidgetBaseProps = {
   hasNextPage?: boolean;
 };
 
-export const PaginationWidgetBase = ({
+export const PaginationWidgetBase: FC<PaginationWidgetBaseProps> = ({
   currentPage,
   pageSize,
   totalRecords,
   onPageChange,
   hasPreviousPage,
   hasNextPage,
-}: PaginationWidgetBaseProps) => {
+}) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const totalPages = Math.ceil(totalRecords / pageSize);
@@ -99,11 +99,11 @@ type PaginationRowProps = {
   onChange: (newPage: number) => void;
 };
 
-function PaginationRow({
+const PaginationRow: FC<PaginationRowProps> = ({
   currentPage,
   totalPages,
   onChange,
-}: PaginationRowProps) {
+}) => {
   const pageInfo = buildPagedList(totalPages, currentPage);
   const pagesOmitted = totalPages - pageInfo.length - 1;
 
@@ -131,4 +131,4 @@ function PaginationRow({
       })}
     </>
   );
-}
+};
diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts
@@ -120,8 +120,8 @@ export default {
         text: colors.sky[200],
       },
       hover: {
-        background: colors.sky[100],
-        outline: colors.sky[500],
+        background: colors.sky[200],
+        outline: colors.sky[400],
         fill: colors.sky[500],
         text: colors.black,
       },
