🧹

coder · aslilac · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 36af83682d79711db7672eebf4fc5bb733be455a
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
@@ -27,7 +27,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
     <div css={styles.root} className={className}>
       <div css={styles.scrollWrapper}>
         {lines.map((line, idx) => (
-          <div css={[styles.line, line.level]} key={idx}>
+          <div css={styles.line} className={line.level} key={idx}>
             {!hideTimestamps && (
               <>
                 <span css={styles.time}>

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -20,6 +20,7 @@ import { useFormik } from "formik";
 import Link from "@mui/material/Link";
 import { colors } from "theme/colors";
 import { hslToHex } from "utils/colors";
+import { useTheme } from "@emotion/react";
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig;
@@ -37,6 +38,8 @@ export const AppearanceSettingsPageView = ({
   isEntitled,
   onSaveAppearance,
 }: AppearanceSettingsPageViewProps): JSX.Element => {
+  const theme = useTheme();
+
   const applicationNameForm = useFormik<{
     application_name: string;
   }>({
@@ -130,14 +133,14 @@ export const AppearanceSettingsPageView = ({
             endAdornment: (
               <InputAdornment
                 position="end"
-                css={(theme) => ({
+                css={{
                   width: theme.spacing(3),
                   height: theme.spacing(3),
 
                   "& img": {
                     maxWidth: "100%",
                   },
-                })}
+                }}
               >
                 <img
                   alt=""
@@ -246,7 +249,7 @@ export const AppearanceSettingsPageView = ({
                 }}
                 triangle="hide"
                 colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]}
-                css={(theme) => ({
+                styles={{
                   default: {
                     input: {
                       color: "white",
@@ -260,7 +263,7 @@ export const AppearanceSettingsPageView = ({
                       backgroundColor: "black",
                     },
                   },
-                })}
+                }}
               />
             </Stack>
           </Stack>