emotion: SelectedTemplate

aslilac · aslilac · commit 739245f3b4aa · 2023-10-30T18:43:27.000Z
diff --git a/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx b/site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
@@ -1,21 +1,20 @@
-import { makeStyles } from "@mui/styles";
-import { Template, TemplateExample } from "api/typesGenerated";
+import { type FC } from "react";
+import type { Template, TemplateExample } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Stack } from "components/Stack/Stack";
-import { FC } from "react";
+import { Interpolation } from "@emotion/react";
+import { Theme } from "@emotion/react";
 
 export interface SelectedTemplateProps {
   template: Template | TemplateExample;
 }
 
 export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
-  const styles = useStyles();
-
   return (
     <Stack
       direction="row"
       spacing={3}
-      className={styles.template}
+      css={styles.template}
       alignItems="center"
     >
       <Avatar
@@ -27,35 +26,33 @@ export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
       </Avatar>
 
       <Stack direction="column" spacing={0}>
-        <span className={styles.templateName}>
+        <span css={styles.templateName}>
           {"display_name" in template && template.display_name.length > 0
             ? template.display_name
             : template.name}
         </span>
         {template.description && (
-          <span className={styles.templateDescription}>
-            {template.description}
-          </span>
+          <span css={styles.templateDescription}>{template.description}</span>
         )}
       </Stack>
     </Stack>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  template: {
+const styles = {
+  template: (theme) => ({
     padding: theme.spacing(2.5, 3),
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.paper,
     border: `1px solid ${theme.palette.divider}`,
-  },
+  }),
 
   templateName: {
     fontSize: 16,
   },
 
-  templateDescription: {
+  templateDescription: (theme) => ({
     fontSize: 14,
     color: theme.palette.text.secondary,
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
