emotion: PageButton

aslilac · aslilac · commit 57b1f6874491 · 2023-10-13T17:22:37.000Z
diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx
@@ -1,5 +1,5 @@
 import Button from "@mui/material/Button";
-import { makeStyles } from "@mui/styles";
+import { css, useTheme } from "@emotion/react";
 
 interface PageButtonProps {
   activePage?: number;
@@ -18,14 +18,20 @@ export const PageButton = ({
   onPageClick,
   disabled = false,
 }: PageButtonProps): JSX.Element => {
-  const styles = useStyles();
+  const theme = useTheme();
   return (
     <Button
-      className={
-        activePage === page
-          ? `${styles.pageButton} ${styles.activePageButton}`
-          : styles.pageButton
-      }
+      css={[
+        css`
+          &:not(:last-of-type) {
+            margin-right: ${theme.spacing(0.5)};
+          }
+        `,
+        activePage === page && {
+          borderColor: `${theme.palette.info.main}`,
+          backgroundColor: `${theme.palette.info.dark}`,
+        },
+      ]}
       aria-label={`${page === activePage ? "Current Page" : ""} ${
         page === numPages ? "Last Page" : ""
       } Page${page}`}
@@ -37,16 +43,3 @@ export const PageButton = ({
     </Button>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  pageButton: {
-    "&:not(:last-of-type)": {
-      marginRight: theme.spacing(0.5),
-    },
-  },
-
-  activePageButton: {
-    borderColor: `${theme.palette.info.main}`,
-    backgroundColor: `${theme.palette.info.dark}`,
-  },
-}));
