emotion: CreateWorkspacePageView

coder · aslilac · Nov 2, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit 3212c58354d4fe67736d0fb2c134fa75339b6467
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,8 +1,10 @@
+import { css } from "@emotion/css";
+import { useTheme, type Interpolation, type Theme } from "@emotion/react";
 import TextField from "@mui/material/TextField";
-import * as TypesGen from "api/typesGenerated";
+import type * as TypesGen from "api/typesGenerated";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { FormikContextType, useFormik } from "formik";
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import {
   getFormHelpers,
   nameValidator,
@@ -17,7 +19,6 @@ import {
   FormFooter,
   HorizontalForm,
 } from "components/Form/Form";
-import { makeStyles } from "@mui/styles";
 import {
   getInitialRichParameterValues,
   useValidationSchemaForRichParameters,
@@ -31,7 +32,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Stack } from "components/Stack/Stack";
 import { type ExternalAuthPollingState } from "./CreateWorkspacePage";
 import { useSearchParams } from "react-router-dom";
-import { CreateWSPermissions } from "./permissions";
+import type { CreateWSPermissions } from "./permissions";
 
 export interface CreateWorkspacePageViewProps {
   error: unknown;
@@ -69,7 +70,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
   onSubmit,
   onCancel,
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
   const [owner, setOwner] = useState(defaultOwner);
   const { verifyExternalAuth, externalAuthErrors } =
     useExternalAuthVerification(externalAuth);
@@ -123,14 +124,14 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
           <FormFields>
             <SelectedTemplate template={template} />
             {versionId && versionId !== template.active_version_id && (
-              <Stack spacing={1} className={styles.hasDescription}>
+              <Stack spacing={1} css={styles.hasDescription}>
                 <TextField
                   disabled
                   fullWidth
                   value={versionId}
                   label="Version ID"
                 />
-                <span className={styles.description}>
+                <span css={styles.description}>
                   This parameter has been preset, and cannot be modified.
                 </span>
               </Stack>
@@ -210,7 +211,16 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
             />
             <ImmutableTemplateParametersSection
               templateParameters={parameters}
-              classes={{ root: styles.warningSection }}
+              classes={{
+                root: css`
+                  border: 1px solid ${theme.palette.warning.light};
+                  border-radius: 8px;
+                  background-color: ${theme.palette.background.paper};
+                  padding: ${theme.spacing(10)};
+                  margin-left: ${theme.spacing(-10)};
+                  margin-right: ${theme.spacing(-10)};
+                `,
+              }}
               getInputProps={(parameter, index) => {
                 return {
                   ...getFieldHelpers(
@@ -279,23 +289,12 @@ const useExternalAuthVerification = (
   };
 };
 
-const useStyles = makeStyles((theme) => ({
-  hasDescription: {
+const styles = {
+  hasDescription: (theme) => ({
     paddingBottom: theme.spacing(2),
-  },
-  description: {
+  }),
+  description: (theme) => ({
     fontSize: 13,
     color: theme.palette.text.secondary,
-  },
-  warningText: {
-    color: theme.palette.warning.light,
-  },
-  warningSection: {
-    border: `1px solid ${theme.palette.warning.light}`,
-    borderRadius: 8,
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(10),
-    marginLeft: theme.spacing(-10),
-    marginRight: theme.spacing(-10),
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;