emotion: AppearanceSettingsPageView

aslilac · aslilac · commit 0eee16e4f14c · 2023-10-31T18:32:24.000Z
diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -12,13 +12,11 @@ import { getFormHelpers } from "utils/formUtils";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { BlockPicker } from "react-color";
-import makeStyles from "@mui/styles/makeStyles";
 import Switch from "@mui/material/Switch";
 import TextField from "@mui/material/TextField";
-import { UpdateAppearanceConfig } from "api/typesGenerated";
+import type { UpdateAppearanceConfig } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { useFormik } from "formik";
-import { useTheme } from "@mui/styles";
 import Link from "@mui/material/Link";
 import { colors } from "theme/colors";
 import { hslToHex } from "utils/colors";
@@ -39,9 +37,6 @@ export const AppearanceSettingsPageView = ({
   isEntitled,
   onSaveAppearance,
 }: AppearanceSettingsPageViewProps): JSX.Element => {
-  const styles = useStyles();
-  const theme = useTheme();
-
   const applicationNameForm = useFormik<{
     application_name: string;
   }>({
@@ -133,7 +128,17 @@ export const AppearanceSettingsPageView = ({
           disabled={!isEntitled}
           InputProps={{
             endAdornment: (
-              <InputAdornment position="end" className={styles.logoAdornment}>
+              <InputAdornment
+                position="end"
+                css={(theme) => ({
+                  width: theme.spacing(3),
+                  height: theme.spacing(3),
+
+                  "& img": {
+                    maxWidth: "100%",
+                  },
+                })}
+              >
                 <img
                   alt=""
                   src={logoForm.values.logo_url}
@@ -241,7 +246,7 @@ export const AppearanceSettingsPageView = ({
                 }}
                 triangle="hide"
                 colors={["#004852", "#D65D0F", "#4CD473", "#D94A5D", "#5A00CF"]}
-                styles={{
+                css={(theme) => ({
                   default: {
                     input: {
                       color: "white",
@@ -255,7 +260,7 @@ export const AppearanceSettingsPageView = ({
                       backgroundColor: "black",
                     },
                   },
-                }}
+                })}
               />
             </Stack>
           </Stack>
@@ -264,17 +269,3 @@ export const AppearanceSettingsPageView = ({
     </>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  form: {
-    maxWidth: "500px",
-  },
-  logoAdornment: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-
-    "& img": {
-      maxWidth: "100%",
-    },
-  },
-}));
