emotion: FileUpload

aslilac · aslilac · commit c455b381e5c9 · 2023-10-13T16:56:50.000Z
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
@@ -1,13 +1,12 @@
-import { makeStyles } from "@mui/styles";
 import { Stack } from "components/Stack/Stack";
-import { FC, DragEvent, useRef, ReactNode } from "react";
+import { type FC, type DragEvent, useRef, type ReactNode } from "react";
 import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
 import { useClickable } from "hooks/useClickable";
 import CircularProgress from "@mui/material/CircularProgress";
-import { combineClasses } from "utils/combineClasses";
 import IconButton from "@mui/material/IconButton";
 import RemoveIcon from "@mui/icons-material/DeleteOutline";
 import FileIcon from "@mui/icons-material/FolderOutlined";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 
 const useFileDrop = (
   callback: (file: File) => void,
@@ -62,7 +61,6 @@ export const FileUpload: FC<FileUploadProps> = ({
   extension,
   fileTypeRequired,
 }) => {
-  const styles = useStyles();
   const inputRef = useRef<HTMLInputElement>(null);
   const tarDrop = useFileDrop(onUpload, fileTypeRequired);
 
@@ -75,7 +73,7 @@ export const FileUpload: FC<FileUploadProps> = ({
   if (!isUploading && file) {
     return (
       <Stack
-        className={styles.file}
+        css={styles.file}
         direction="row"
         justifyContent="space-between"
         alignItems="center"
@@ -95,23 +93,20 @@ export const FileUpload: FC<FileUploadProps> = ({
   return (
     <>
       <div
-        className={combineClasses({
-          [styles.root]: true,
-          [styles.disabled]: isUploading,
-        })}
+        css={[styles.root, isUploading && styles.disabled]}
         {...clickable}
         {...tarDrop}
       >
         <Stack alignItems="center" spacing={1}>
           {isUploading ? (
             <CircularProgress size={32} />
           ) : (
-            <UploadIcon className={styles.icon} />
+            <UploadIcon css={styles.icon} />
           )}
 
           <Stack alignItems="center" spacing={0.5}>
-            <span className={styles.title}>{title}</span>
-            <span className={styles.description}>{description}</span>
+            <span css={styles.title}>{title}</span>
+            <span css={styles.description}>{description}</span>
           </Stack>
         </Stack>
       </div>
@@ -120,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
         type="file"
         data-testid="file-upload"
         ref={inputRef}
-        className={styles.input}
+        css={styles.input}
         accept={extension}
         onChange={(event) => {
           const file = event.currentTarget.files?.[0];
@@ -133,48 +128,48 @@ export const FileUpload: FC<FileUploadProps> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.shape.borderRadius,
-    border: `2px dashed ${theme.palette.divider}`,
-    padding: theme.spacing(6),
-    cursor: "pointer",
-
-    "&:hover": {
-      backgroundColor: theme.palette.background.paper,
-    },
-  },
+const styles = {
+  root: (theme) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${theme.shape.borderRadius};
+    border: 2px dashed ${theme.palette.divider};
+    padding: ${theme.spacing(6)};
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.palette.background.paper};
+    }
+  `,
 
   disabled: {
     pointerEvents: "none",
     opacity: 0.75,
   },
 
-  icon: {
+  icon: (theme) => ({
     fontSize: theme.spacing(8),
-  },
+  }),
 
-  title: {
+  title: (theme) => ({
     fontSize: theme.spacing(2),
-  },
+  }),
 
-  description: {
+  description: (theme) => ({
     color: theme.palette.text.secondary,
     textAlign: "center",
     maxWidth: theme.spacing(50),
-  },
+  }),
 
   input: {
     display: "none",
   },
 
-  file: {
+  file: (theme) => ({
     borderRadius: theme.shape.borderRadius,
     border: `1px solid ${theme.palette.divider}`,
     padding: theme.spacing(2),
     background: theme.palette.background.paper,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
