coder · aslilac · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
diff --git a/site/src/components/Stats/Stats.tsx b/site/src/components/Stats/Stats.tsx
@@ -1,40 +1,28 @@
-import Box from "@mui/material/Box"
-import { makeStyles } from "@mui/styles"
-import { ComponentProps, FC, PropsWithChildren } from "react"
-import { combineClasses } from "utils/combineClasses"
+import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
+import Box from "@mui/material/Box";
+import { type ComponentProps, type FC } from "react";
 
 export const Stats: FC<ComponentProps<typeof Box>> = (props) => {
-  const styles = useStyles()
-  return (
-    <Box
-      {...props}
-      className={combineClasses([styles.stats, props.className])}
-    />
-  )
-}
+  return <Box {...props} css={styles.stats} />;
+};
 
 export const StatsItem: FC<
   {
-    label: string
-    value: string | number | JSX.Element
+    label: string;
+    value: string | number | JSX.Element;
   } & ComponentProps<typeof Box>
 > = ({ label, value, ...divProps }) => {
-  const styles = useStyles()
-
   return (
-    <Box
-      {...divProps}
-      className={combineClasses([styles.statItem, divProps.className])}
-    >
-      <span className={styles.statsLabel}>{label}:</span>
-      <span className={styles.statsValue}>{value}</span>
+    <Box {...divProps} css={styles.statItem}>
+      <span css={styles.statsLabel}>{label}:</span>
+      <span css={styles.statsValue}>{value}</span>
     </Box>
-  )
-}
+  );
+};
 
-const useStyles = makeStyles((theme) => ({
-  stats: {
-    ...theme.typography.body2,
+const styles = {
+  stats: (theme) => ({
+    ...(theme.typography.body2 as CSSObject),
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     borderRadius: theme.shape.borderRadius,
@@ -49,9 +37,9 @@ const useStyles = makeStyles((theme) => ({
       display: "block",
       padding: theme.spacing(2),
     },
-  },
+  }),
 
-  statItem: {
+  statItem: (theme) => ({
     padding: theme.spacing(1.75),
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
@@ -62,14 +50,14 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.down("md")]: {
       padding: theme.spacing(1),
     },
-  },
+  }),
 
   statsLabel: {
     display: "block",
     wordWrap: "break-word",
   },
 
-  statsValue: {
+  statsValue: (theme) => ({
     marginTop: theme.spacing(0.25),
     display: "flex",
     wordWrap: "break-word",
@@ -85,5 +73,5 @@ const useStyles = makeStyles((theme) => ({
         textDecoration: "underline",
       },
     },
-  },
-}))
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/WorkspaceBuildLogs/Logs.tsx b/site/src/components/WorkspaceBuildLogs/Logs.tsx
@@ -1,10 +1,9 @@
-import { makeStyles } from "@mui/styles";
-import { LogLevel } from "api/typesGenerated";
+import { type Interpolation, type Theme } from "@emotion/react";
+import type { LogLevel } from "api/typesGenerated";
 import dayjs from "dayjs";
-import { FC, useMemo } from "react";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
+import { type FC, type ReactNode, useMemo } from "react";
 import AnsiToHTML from "ansi-to-html";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 export interface Line {
   time: string;
@@ -24,19 +23,17 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
   lines,
   className = "",
 }) => {
-  const styles = useStyles();
-
   return (
-    <div className={combineClasses([className, styles.root])}>
-      <div className={styles.scrollWrapper}>
+    <div css={styles.root} className={className}>
+      <div css={styles.scrollWrapper}>
         {lines.map((line, idx) => (
-          <div className={combineClasses([styles.line, line.level])} key={idx}>
+          <div css={styles.line} className={line.level} key={idx}>
             {!hideTimestamps && (
               <>
-                <span className={styles.time}>
+                <span css={styles.time}>
                   {dayjs(line.time).format(`HH:mm:ss.SSS`)}
                 </span>
-                <span className={styles.space} />
+                <span css={styles.space} />
               </>
             )}
             <span>{line.output}</span>
@@ -56,39 +53,32 @@ export const LogLine: FC<{
   hideTimestamp?: boolean;
   number?: number;
   style?: React.CSSProperties;
-  sourceIcon?: JSX.Element;
+  sourceIcon?: ReactNode;
   maxNumber?: number;
 }> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
-  const styles = useStyles();
   const output = useMemo(() => {
     return convert.toHtml(line.output.split(/\r/g).pop() as string);
   }, [line.output]);
   const isUsingLineNumber = number !== undefined;
 
   return (
     <div
-      className={combineClasses([
-        styles.line,
-        line.level,
-        isUsingLineNumber && styles.lineNumber,
-      ])}
+      css={[styles.line, isUsingLineNumber && styles.lineNumber]}
+      className={line.level}
       style={style}
     >
       {sourceIcon}
       {!hideTimestamp && (
         <>
           <span
-            className={combineClasses([
-              styles.time,
-              isUsingLineNumber && styles.number,
-            ])}
+            css={[styles.time, isUsingLineNumber && styles.number]}
             style={{
               minWidth: `${maxNumber ? maxNumber.toString().length - 1 : 0}em`,
             }}
           >
             {number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
           </span>
-          <span className={styles.space} />
+          <span css={styles.space} />
         </>
       )}
       <span
@@ -100,8 +90,8 @@ export const LogLine: FC<{
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const styles = {
+  root: (theme) => ({
     minHeight: 156,
     padding: theme.spacing(1, 0),
     borderRadius: theme.shape.borderRadius,
@@ -112,11 +102,11 @@ const useStyles = makeStyles((theme) => ({
       borderBottom: `1px solid ${theme.palette.divider}`,
       borderRadius: 0,
     },
-  },
+  }),
   scrollWrapper: {
     minWidth: "fit-content",
   },
-  line: {
+  line: (theme) => ({
     wordBreak: "break-all",
     display: "flex",
     alignItems: "center",
@@ -139,24 +129,24 @@ const useStyles = makeStyles((theme) => ({
     "&.warn": {
       backgroundColor: theme.palette.warning.dark,
     },
-  },
-  lineNumber: {
+  }),
+  lineNumber: (theme) => ({
     paddingLeft: theme.spacing(2),
-  },
-  space: {
+  }),
+  space: (theme) => ({
     userSelect: "none",
     width: theme.spacing(3),
     display: "block",
     flexShrink: 0,
-  },
-  time: {
+  }),
+  time: (theme) => ({
     userSelect: "none",
     whiteSpace: "pre",
     display: "inline-block",
     color: theme.palette.text.secondary,
-  },
-  number: {
+  }),
+  number: (theme) => ({
     width: theme.spacing(4),
     textAlign: "right",
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
@@ -1,34 +1,30 @@
-import { makeStyles } from "@mui/styles";
 import Typography from "@mui/material/Typography";
-import { FC } from "react";
+import { type FC } from "react";
 
 export const NotFoundPage: FC = () => {
-  const styles = useStyles();
-
   return (
-    <div className={styles.root}>
-      <div className={styles.headingContainer}>
+    <div
+      css={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <div
+        css={(theme) => ({
+          margin: theme.spacing(1),
+          padding: theme.spacing(1),
+          borderRight: theme.palette.divider,
+        })}
+      >
         <Typography variant="h4">404</Typography>
       </div>
       <Typography variant="body2">This page could not be found.</Typography>
     </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  headingContainer: {
-    margin: theme.spacing(1),
-    padding: theme.spacing(1),
-    borderRight: theme.palette.divider,
-  },
-}));
-
 export default NotFoundPage;