port a couple more!

coder · aslilac · Sep 29, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023
commit ec9d32e6301a3a9f7b6dfbdf8296fedbd6427fd7
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,35 +1,58 @@
 // This is the only place MuiAvatar can be used
 // eslint-disable-next-line no-restricted-imports -- Read above
 import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
-import { makeStyles } from "@mui/styles";
 import { FC } from "react";
-import { combineClasses } from "utils/combineClasses";
+import { css, type Theme } from "@emotion/react";
 
 export type AvatarProps = MuiAvatarProps & {
   size?: "sm" | "md" | "xl";
   colorScheme?: "light" | "darken";
   fitImage?: boolean;
 };
 
+const sizeStyles = {
+  sm: (theme: Theme) => ({
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    fontSize: theme.spacing(1.5),
+  }),
+  md: {},
+  xl: (theme: Theme) => ({
+    width: theme.spacing(6),
+    height: theme.spacing(6),
+    fontSize: theme.spacing(3),
+  }),
+};
+
+const colorStyles = {
+  light: {},
+  darken: (theme: Theme) => ({
+    background: theme.palette.divider,
+    color: theme.palette.text.primary,
+  }),
+};
+
+const fitImageStyles = css`
+  & .MuiAvatar-img {
+    object-fit: contain;
+  }
+`;
+
 export const Avatar: FC<AvatarProps> = ({
   size = "md",
   colorScheme = "light",
   fitImage,
-  className,
   children,
   ...muiProps
 }) => {
-  const styles = useStyles();
-
   return (
     <MuiAvatar
       {...muiProps}
-      className={combineClasses([
-        className,
-        styles[size],
-        styles[colorScheme],
-        fitImage && styles.fitImage,
-      ])}
+      css={[
+        sizeStyles[size],
+        colorStyles[colorScheme],
+        fitImage && fitImageStyles,
+      ]}
     >
       {typeof children === "string" ? firstLetter(children) : children}
     </MuiAvatar>
@@ -40,8 +63,15 @@ export const Avatar: FC<AvatarProps> = ({
  * Use it to make an img element behaves like a MaterialUI Icon component
  */
 export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
-  const styles = useStyles();
-  return <img src={src} alt="" className={styles.avatarIcon} />;
+  return (
+    <img
+      src={src}
+      alt=""
+      css={{
+        maxWidth: "50%",
+      }}
+    />
+  );
 };
 
 const firstLetter = (str: string): string => {
@@ -51,36 +81,3 @@ const firstLetter = (str: string): string => {
 
   return "";
 };
-
-const useStyles = makeStyles((theme) => ({
-  // Size styles
-  sm: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(1.5),
-  },
-  // Just use the default value from theme
-  md: {},
-  xl: {
-    width: theme.spacing(6),
-    height: theme.spacing(6),
-    fontSize: theme.spacing(3),
-  },
-  // Colors
-  // Just use the default value from theme
-  light: {},
-  darken: {
-    background: theme.palette.divider,
-    color: theme.palette.text.primary,
-  },
-  // Avatar icon
-  avatarIcon: {
-    maxWidth: "50%",
-  },
-  // Fit image
-  fitImage: {
-    "& .MuiAvatar-img": {
-      objectFit: "contain",
-    },
-  },
-}));
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -1,22 +1,26 @@
 import { FC, PropsWithChildren, useState } from "react";
 import { Section } from "components/SettingsLayout/Section";
 import { TokensPageView } from "./TokensPageView";
-import makeStyles from "@mui/styles/makeStyles";
 import { useTokensData } from "./hooks";
 import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
 import { Stack } from "components/Stack/Stack";
 import Button from "@mui/material/Button";
 import { Link as RouterLink } from "react-router-dom";
 import AddIcon from "@mui/icons-material/AddOutlined";
 import { APIKeyWithOwner } from "api/typesGenerated";
+import { css } from "@emotion/react";
 
 export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
-  const styles = useStyles();
-
   const cliCreateCommand = "coder tokens create";
 
   const TokenActions = () => (
-    <Stack direction="row" justifyContent="end" className={styles.tokenActions}>
+    <Stack
+      direction="row"
+      justifyContent="end"
+      css={(theme) => ({
+        marginBottom: theme.spacing(1),
+      })}
+    >
       <Button startIcon={<AddIcon />} component={RouterLink} to="new">
         Add token
       </Button>
@@ -43,7 +47,15 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
     <>
       <Section
         title="Tokens"
-        className={styles.section}
+        css={(theme) => css`
+          & code {
+            background: ${theme.palette.divider};
+            fontsize: 12px;
+            padding: 2px 4px;
+            color: ${theme.palette.text.primary};
+            borderradius: 2px;
+          }
+        `}
         description={
           <>
             Tokens are used to authenticate with the Coder API. You can create a
@@ -73,19 +85,4 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  section: {
-    "& code": {
-      background: theme.palette.divider,
-      fontSize: 12,
-      padding: "2px 4px",
-      color: theme.palette.text.primary,
-      borderRadius: 2,
-    },
-  },
-  tokenActions: {
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 export default TokensPage;