emotion: GroupsPageView

aslilac · aslilac · commit 0587497d873a · 2023-11-01T18:51:16.000Z
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -1,6 +1,6 @@
+import { type Interpolation, type Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
-import { makeStyles } from "@mui/styles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -20,10 +20,10 @@ import {
   TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
-import { FC } from "react";
+import { type FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { Paywall } from "components/Paywall/Paywall";
-import { Group } from "api/typesGenerated";
+import type { Group } from "api/typesGenerated";
 import { GroupAvatar } from "components/GroupAvatar/GroupAvatar";
 import { docs } from "utils/docs";
 import Skeleton from "@mui/material/Skeleton";
@@ -44,7 +44,6 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
   const isLoading = Boolean(groups === undefined);
   const isEmpty = Boolean(groups && groups.length === 0);
   const navigate = useNavigate();
-  const styles = useStyles();
 
   return (
     <>
@@ -137,7 +136,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                               navigate(groupPageLink);
                             }
                           }}
-                          className={styles.clickableTableRow}
+                          css={styles.clickableTableRow}
                         >
                           <TableCell>
                             <AvatarData
@@ -170,10 +169,8 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
                           </TableCell>
 
                           <TableCell>
-                            <div className={styles.arrowCell}>
-                              <KeyboardArrowRight
-                                className={styles.arrowRight}
-                              />
+                            <div css={styles.arrowCell}>
+                              <KeyboardArrowRight css={styles.arrowRight} />
                             </div>
                           </TableCell>
                         </TableRow>
@@ -210,8 +207,8 @@ const TableLoader = () => {
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  clickableTableRow: {
+const styles = {
+  clickableTableRow: (theme) => ({
     cursor: "pointer",
 
     "&:hover td": {
@@ -225,15 +222,15 @@ const useStyles = makeStyles((theme) => ({
     "& .MuiTableCell-root:last-child": {
       paddingRight: theme.spacing(2),
     },
-  },
-  arrowRight: {
+  }),
+  arrowRight: (theme) => ({
     color: theme.palette.text.secondary,
     width: 20,
     height: 20,
-  },
+  }),
   arrowCell: {
     display: "flex",
   },
-}));
+} satisfies Record<string, Interpolation<Theme>>;
 
 export default GroupsPageView;
