chore: use emotion for styling (pt. 2) (#9951)

site/src/components/DeploySettingsLayout/Header.tsx

@@ -1,8 +1,8 @@
 import Button from "@mui/material/Button";
-import { makeStyles } from "@mui/styles";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
+import type { FC } from "react";
+import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
-import { FC } from "react";
 
 export const Header: FC<{
   title: string | JSX.Element;
@@ -10,16 +10,41 @@ export const Header: FC<{
   secondary?: boolean;
   docsHref?: string;
 }> = ({ title, description, docsHref, secondary }) => {
-  const styles = useStyles();
+  const theme = useTheme();
 
   return (
     <Stack alignItems="baseline" direction="row" justifyContent="space-between">
-      <div className={styles.headingGroup}>
-        <h1 className={`${styles.title} ${secondary ? "secondary" : ""}`}>
+      <div css={{ maxWidth: 420, marginBottom: theme.spacing(3) }}>
+        <h1
+          css={[
+            {
+              fontSize: 32,
+              fontWeight: 700,
+              display: "flex",
+              alignItems: "center",
+              lineHeight: "initial",
+              margin: 0,
+              marginBottom: theme.spacing(0.5),
+              gap: theme.spacing(1),
+            },
+            secondary && {
+              fontSize: 24,
+              fontWeight: 500,
+            },
+          ]}
+        >
           {title}
         </h1>
         {description && (
-          <span className={styles.description}>{description}</span>
+          <span
+            css={{
+              fontSize: 14,
+              color: theme.palette.text.secondary,
+              lineHeight: "160%",
+            }}
+          >
+            {description}
+          </span>
         )}
       </div>
 
@@ -36,32 +61,3 @@ export const Header: FC<{
     </Stack>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  headingGroup: {
-    maxWidth: 420,
-    marginBottom: theme.spacing(3),
-  },
-
-  title: {
-    fontSize: 32,
-    fontWeight: 700,
-    display: "flex",
-    alignItems: "center",
-    lineHeight: "initial",
-    margin: 0,
-    marginBottom: theme.spacing(0.5),
-    gap: theme.spacing(1),
-
-    "&.secondary": {
-      fontSize: 24,
-      fontWeight: 500,
-    },
-  },
-
-  description: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    lineHeight: "160%",
-  },
-}));