coder · aslilac · Nov 2, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -1,9 +1,9 @@
+import { css, Global, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { makeStyles } from "@mui/styles";
+import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Picker from "@emoji-mart/react";
-import { FC } from "react";
+import { type FC } from "react";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
@@ -48,7 +48,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
     throw new Error(`Invalid icon value "${typeof textFieldProps.value}"`);
   }
 
-  const styles = useStyles();
+  const theme = useTheme();
   const hasIcon = textFieldProps.value && textFieldProps.value !== "";
 
   return (
@@ -59,7 +59,21 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
         label="Icon"
         InputProps={{
           endAdornment: hasIcon ? (
-            <InputAdornment position="end" className={styles.adornment}>
+            <InputAdornment
+              position="end"
+              css={{
+                width: theme.spacing(3),
+                height: theme.spacing(3),
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+
+                "& img": {
+                  maxWidth: "100%",
+                  objectFit: "contain",
+                },
+              }}
+            >
               <img
                 alt=""
                 src={textFieldProps.value}
@@ -85,6 +99,18 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
               id="emoji"
               css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
             >
+              <Global
+                styles={css`
+                  em-emoji-picker {
+                    --rgb-background: ${theme.palette.background.paper};
+                    --rgb-input: ${colors.gray[17]};
+                    --rgb-color: ${colors.gray[4]};
+
+                    // Hack to prevent the right side from being cut off
+                    width: 350px;
+                  }
+                `}
+              />
               <Picker
                 set="twitter"
                 theme="dark"
@@ -104,29 +130,4 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  "@global": {
-    "em-emoji-picker": {
-      "--rgb-background": theme.palette.background.paper,
-      "--rgb-input": colors.gray[17],
-      "--rgb-color": colors.gray[4],
-
-      // Hack to prevent the right side from being cut off
-      width: 350,
-    },
-  },
-  adornment: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-
-    "& img": {
-      maxWidth: "100%",
-      objectFit: "contain",
-    },
-  },
-}));
-
 export default IconField;
diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx
@@ -5,7 +5,7 @@ import Skeleton from "@mui/material/Skeleton";
 export const TableToolbar = styled(Box)(({ theme }) => ({
   fontSize: 13,
   marginBottom: theme.spacing(1),
-  marginTop: theme.spacing(0),
+  marginTop: 0,
   height: 36, // The size of a small button
   color: theme.palette.text.secondary,
   "& strong": { color: theme.palette.text.primary },

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -1,11 +1,17 @@
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
-import { makeStyles } from "@mui/styles";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { User } from "api/typesGenerated";
+import type { User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import { ChangeEvent, ComponentProps, FC, useState } from "react";
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type FC,
+  useState,
+} from "react";
 import Box from "@mui/material/Box";
 import { useDebouncedFunction } from "hooks/debounce";
 import { useQuery } from "react-query";
@@ -27,7 +33,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   className,
   size = "small",
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
     open: boolean;
@@ -101,7 +107,11 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
           size={size}
           label={label}
           placeholder="User email or username"
-          className={styles.textField}
+          css={{
+            "&:not(:has(label))": {
+              margin: 0,
+            },
+          }}
           InputProps={{
             ...params.InputProps,
             onChange: debouncedInputOnChange,
@@ -119,7 +129,12 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
               </>
             ),
             classes: {
-              root: styles.inputRoot,
+              root: css`
+                padding-left: ${theme.spacing(
+                  1.75,
+                )} !important; // Same padding left as input
+                gap: ${theme.spacing(0.5)};
+              `,
             },
           }}
           InputLabelProps={{
@@ -130,15 +145,3 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
     />
   );
 };
-
-export const useStyles = makeStyles((theme) => ({
-  textField: {
-    "&:not(:has(label))": {
-      margin: 0,
-    },
-  },
-  inputRoot: {
-    paddingLeft: `${theme.spacing(1.75)} !important`, // Same padding left as input
-    gap: theme.spacing(0.5),
-  },
-}));
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -1,11 +1,10 @@
-import { makeStyles } from "@mui/styles";
 import dayjs from "dayjs";
-import { ComponentProps, FC, Fragment } from "react";
-import { ProvisionerJobLog } from "api/typesGenerated";
+import { type ComponentProps, type FC, Fragment } from "react";
+import type { ProvisionerJobLog } from "api/typesGenerated";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { Logs } from "./Logs";
 import Box from "@mui/material/Box";
-import { combineClasses } from "utils/combineClasses";
+import { type Interpolation, type Theme } from "@emotion/react";
 
 const Language = {
   seconds: "seconds",
@@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
 }) => {
   const groupedLogsByStage = groupLogsByStage(logs);
   const stages = Object.keys(groupedLogsByStage);
-  const styles = useStyles();
 
   return (
     <Box
@@ -79,15 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
 
         return (
           <Fragment key={stage}>
-            <div
-              className={combineClasses([
-                styles.header,
-                sticky ? styles.sticky : "",
-              ])}
-            >
+            <div css={[styles.header, sticky && styles.sticky]}>
               <div>{stage}</div>
               {shouldDisplayDuration && (
-                <div className={styles.duration}>
+                <div css={styles.duration}>
                   {duration} {Language.seconds}
                 </div>
               )}
@@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  header: {
+const styles = {
+  header: (theme) => ({
     fontSize: 13,
     fontWeight: 600,
     padding: theme.spacing(0.5, 3),
@@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({
     "&:first-child": {
       borderRadius: "8px 8px 0 0",
     },
-  },
+  }),
 
   sticky: {
     position: "sticky",
     top: 0,
   },
 
-  duration: {
+  duration: (theme) => ({
     marginLeft: "auto",
     color: theme.palette.text.secondary,
     fontSize: 12,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -1,15 +1,17 @@
-import { Workspace } from "api/typesGenerated";
+import type { Workspace } from "api/typesGenerated";
 import { Pill } from "components/Pill/Pill";
-import { FC, PropsWithChildren } from "react";
-import { makeStyles } from "@mui/styles";
-import { combineClasses } from "utils/combineClasses";
+import { type FC, type PropsWithChildren } from "react";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { DormantDeletionText } from "components/WorkspaceDeletion";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
-import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
+import Tooltip, {
+  type TooltipProps,
+  tooltipClasses,
+} from "@mui/material/Tooltip";
 import { styled } from "@mui/material/styles";
 import Box from "@mui/material/Box";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import { type Interpolation, type Theme } from "@emotion/react";
 
 export type WorkspaceStatusBadgeProps = {
   workspace: Workspace;
@@ -56,7 +58,6 @@ export const WorkspaceStatusBadge: FC<
 export const WorkspaceStatusText: FC<
   PropsWithChildren<WorkspaceStatusBadgeProps>
 > = ({ workspace, className }) => {
-  const styles = useStyles();
   const { text, type } = getDisplayWorkspaceStatus(
     workspace.latest_build.status,
   );
@@ -71,11 +72,8 @@ export const WorkspaceStatusText: FC<
         <span
           role="status"
           data-testid="build-status"
-          className={combineClasses([
-            className,
-            styles.root,
-            styles[`type-${type}`],
-          ])}
+          className={className}
+          css={[styles.root, styles[`type-${type}`]]}
         >
           {text}
         </span>
@@ -95,27 +93,22 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
   },
 }));
 
-const useStyles = makeStyles((theme) => ({
+const styles = {
   root: { fontWeight: 600 },
-  "type-error": {
+
+  "type-error": (theme) => ({
     color: theme.palette.error.light,
-  },
-  "type-warning": {
+  }),
+  "type-warning": (theme) => ({
     color: theme.palette.warning.light,
-  },
-  "type-success": {
+  }),
+  "type-success": (theme) => ({
     color: theme.palette.success.light,
-  },
-  "type-info": {
+  }),
+  "type-info": (theme) => ({
     color: theme.palette.info.light,
-  },
-  "type-undefined": {
+  }),
+  "type-undefined": (theme) => ({
     color: theme.palette.text.secondary,
-  },
-  "type-primary": {
-    color: theme.palette.text.primary,
-  },
-  "type-secondary": {
-    color: theme.palette.text.secondary,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts
@@ -1,11 +1,11 @@
+import { useTheme, type CSSObject } from "@emotion/react";
 import { type MouseEventHandler } from "react";
 import { type TableRowProps } from "@mui/material/TableRow";
-import { makeStyles } from "@mui/styles";
 import { useClickable, type UseClickableResult } from "./useClickable";
 
 type UseClickableTableRowResult = UseClickableResult<HTMLTableRowElement> &
   TableRowProps & {
-    className: string;
+    css: CSSObject;
     hover: true;
     onAuxClick: MouseEventHandler<HTMLTableRowElement>;
   };
@@ -28,12 +28,24 @@ export const useClickableTableRow = ({
   onDoubleClick,
   onMiddleClick,
 }: UseClickableTableRowConfig): UseClickableTableRowResult => {
-  const styles = useStyles();
   const clickableProps = useClickable(onClick);
+  const theme = useTheme();
 
   return {
     ...clickableProps,
-    className: styles.row,
+    css: {
+      cursor: "pointer",
+
+      "&:focus": {
+        outline: `1px solid ${theme.palette.secondary.dark}`,
+        outlineOffset: -1,
+      },
+
+      "&:last-of-type": {
+        borderBottomLeftRadius: theme.shape.borderRadius,
+        borderBottomRightRadius: theme.shape.borderRadius,
+      },
+    },
     hover: true,
     onDoubleClick,
     onAuxClick: (event) => {
@@ -46,19 +58,3 @@ export const useClickableTableRow = ({
     },
   };
 };
-
-const useStyles = makeStyles((theme) => ({
-  row: {
-    cursor: "pointer",
-
-    "&:focus": {
-      outline: `1px solid ${theme.palette.secondary.dark}`,
-      outlineOffset: -1,
-    },
-
-    "&:last-of-type": {
-      borderBottomLeftRadius: theme.shape.borderRadius,
-      borderBottomRightRadius: theme.shape.borderRadius,
-    },
-  },
-}));