From 781b73fa69ff889d1c1472585f92d10bbd06886f Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:00:45 +0000
Subject: [PATCH 01/15] emotion: `CodeExample`

---
 .../components/CodeExample/CodeExample.tsx    | 74 +++++++++----------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index abfdf3b206d0a..aaf5aca6432a0 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,9 +1,7 @@
-import { makeStyles } from "@mui/styles";
-import { FC } from "react";
+import { type FC } from "react";
+import { useTheme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
 import { CopyButton } from "../CopyButton/CopyButton";
-import { Theme } from "@mui/material/styles";
 
 export interface CodeExampleProps {
   code: string;
@@ -14,46 +12,40 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<CodeExampleProps> = ({
-  code,
-  password,
-  className,
-}) => {
-  const styles = useStyles({ password });
+export const CodeExample: FC<CodeExampleProps> = (props) => {
+  const { code, password, className } = props;
+  const theme = useTheme();
 
   return (
-    <div className={combineClasses([styles.root, className])}>
-      <code className={styles.code}>{code}</code>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        background: "rgb(0 0 0 / 30%)",
+        color: theme.palette.primary.contrastText,
+        fontFamily: MONOSPACE_FONT_FAMILY,
+        fontSize: 14,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(1),
+        lineHeight: "150%",
+        border: `1px solid ${theme.palette.divider}`,
+      }}
+      className={className}
+    >
+      <code
+        css={{
+          padding: theme.spacing(0, 1),
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          wordBreak: "break-all",
+          "-webkit-text-security": password ? "disc" : undefined,
+        }}
+      >
+        {code}
+      </code>
       <CopyButton text={code} />
     </div>
   );
 };
-
-interface styleProps {
-  inline?: boolean;
-  password?: boolean;
-}
-
-const useStyles = makeStyles<Theme, styleProps>((theme) => ({
-  root: (props) => ({
-    display: props.inline ? "inline-flex" : "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    background: "rgb(0 0 0 / 30%)",
-    color: theme.palette.primary.contrastText,
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    fontSize: 14,
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(1),
-    lineHeight: "150%",
-    border: `1px solid ${theme.palette.divider}`,
-  }),
-  code: {
-    padding: theme.spacing(0, 1),
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    wordBreak: "break-all",
-    "-webkit-text-security": (props) => (props.password ? "disc" : undefined),
-  },
-}));

From 20b1b7396a79015facf9cddde56b9ccac79ce8c8 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:26:09 +0000
Subject: [PATCH 02/15] emotion + refactor: `DropdownArrow`

---
 .../Navbar/UserDropdown/UserDropdown.tsx      | 11 +----
 .../DropdownArrow/DropdownArrow.tsx           | 28 +++++++++++++
 .../DropdownArrows/DropdownArrows.tsx         | 42 -------------------
 site/src/components/Expander/Expander.tsx     | 13 +++---
 site/src/components/IconField/IconField.tsx   |  4 +-
 site/src/components/Resources/AgentRow.tsx    |  9 ++--
 .../src/components/Resources/ResourceCard.tsx | 11 +----
 site/src/components/Resources/Resources.tsx   | 16 ++-----
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     |  7 +---
 9 files changed, 47 insertions(+), 94 deletions(-)
 create mode 100644 site/src/components/DropdownArrow/DropdownArrow.tsx
 delete mode 100644 site/src/components/DropdownArrows/DropdownArrows.tsx

diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
index c285cbc61fa00..50143eeecf217 100644
--- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
+++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
 import * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { BorderedMenu } from "./BorderedMenu";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
 import { BUTTON_SM_HEIGHT } from "theme/theme";
@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
               avatarURL={user.avatar_url}
             />
           </Badge>
-          {anchorEl ? (
-            <CloseDropdown color={colors.gray[6]} />
-          ) : (
-            <OpenDropdown color={colors.gray[6]} />
-          )}
+          <DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
         </div>
       </MenuItem>
 
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
new file mode 100644
index 0000000000000..1e769692ccc24
--- /dev/null
+++ b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -0,0 +1,28 @@
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { type FC } from "react";
+import { type Theme } from "@emotion/react";
+
+interface ArrowProps {
+  margin?: boolean;
+  color?: string;
+  close?: boolean;
+}
+
+export const DropdownArrow: FC<ArrowProps> = (props) => {
+  const { margin = true, color, close } = props;
+
+  const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
+
+  return (
+    <Arrow
+      aria-label={close ? "close-dropdown" : "open-dropdown"}
+      css={(theme: Theme) => ({
+        color: color ?? theme.palette.primary.contrastText,
+        marginLeft: margin ? theme.spacing(1) : 0,
+        width: 16,
+        height: 16,
+      })}
+    />
+  );
+};
diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
deleted file mode 100644
index af0f73ea5052e..0000000000000
--- a/site/src/components/DropdownArrows/DropdownArrows.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { makeStyles } from "@mui/styles";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
-import { FC } from "react";
-import { Theme } from "@mui/material/styles";
-
-const useStyles = makeStyles<Theme, ArrowProps>((theme: Theme) => ({
-  arrowIcon: {
-    color: ({ color }) => color ?? theme.palette.primary.contrastText,
-    marginLeft: ({ margin }) => (margin ? theme.spacing(1) : 0),
-    width: 16,
-    height: 16,
-  },
-  arrowIconUp: {
-    color: ({ color }) => color ?? theme.palette.primary.contrastText,
-  },
-}));
-
-interface ArrowProps {
-  margin?: boolean;
-  color?: string;
-}
-
-export const OpenDropdown: FC<ArrowProps> = ({ margin = true, color }) => {
-  const styles = useStyles({ margin, color });
-  return (
-    <KeyboardArrowDown
-      aria-label="open-dropdown"
-      className={styles.arrowIcon}
-    />
-  );
-};
-
-export const CloseDropdown: FC<ArrowProps> = ({ margin = true, color }) => {
-  const styles = useStyles({ margin, color });
-  return (
-    <KeyboardArrowUp
-      aria-label="close-dropdown"
-      className={`${styles.arrowIcon} ${styles.arrowIconUp}`}
-    />
-  );
-};
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index 5fb61376786c7..25fac1d7ad2ec 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -1,11 +1,8 @@
+import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
 import makeStyles from "@mui/styles/makeStyles";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
-import { PropsWithChildren, FC } from "react";
-import Collapse from "@mui/material/Collapse";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { type FC, type PropsWithChildren } from "react";
 import { combineClasses } from "utils/combineClasses";
 
 export interface ExpanderProps {
@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         <Link onClick={toggleExpanded} className={styles.expandLink}>
           <span className={styles.text}>
             Click here to learn more
-            <OpenDropdown margin={false} />
+            <DropdownArrow margin={false} />
           </span>
         </Link>
       )}
@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         >
           <span className={styles.text}>
             Click here to hide
-            <CloseDropdown margin={false} />
+            <DropdownArrow margin={false} close />
           </span>
         </Link>
       )}
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 0d11665257f07..2e5e0ba606a1a 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -2,7 +2,7 @@ import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { OpenDropdown } from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { useRef, FC, useState } from "react";
 import Picker from "@emoji-mart/react";
 import { makeStyles } from "@mui/styles";
@@ -52,7 +52,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        endIcon={<OpenDropdown />}
+        endIcon={<DropdownArrow />}
         onClick={() => {
           setIsEmojiPickerOpen((v) => !v);
         }}
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 2b6de44ac4b75..d77160b5cc07b 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -9,10 +9,7 @@ import {
   WorkspaceAgentLogSource,
   WorkspaceAgentMetadata,
 } from "api/typesGenerated";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { VSCodeDesktopButton } from "components/Resources/VSCodeDesktopButton/VSCodeDesktopButton";
 import {
@@ -443,7 +440,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                   setShowLogs((v) => !v);
                 }}
               >
-                <CloseDropdown />
+                <DropdownArrow close />
                 Hide logs
               </button>
             ) : (
@@ -456,7 +453,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                   setShowLogs((v) => !v);
                 }}
               >
-                <OpenDropdown />
+                <DropdownArrow />
                 Show logs
               </button>
             )}
diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index e19137ad0e551..04007b172bb9b 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -4,10 +4,7 @@ import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
-import {
-  OpenDropdown,
-  CloseDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
@@ -95,11 +92,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
               }}
               size="large"
             >
-              {shouldDisplayAllMetadata ? (
-                <CloseDropdown margin={false} />
-              ) : (
-                <OpenDropdown margin={false} />
-              )}
+              <DropdownArrow margin={false} close={shouldDisplayAllMetadata} />
             </IconButton>
           </Tooltip>
         )}
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
index cfb24b565aaf2..28152756ab598 100644
--- a/site/src/components/Resources/Resources.tsx
+++ b/site/src/components/Resources/Resources.tsx
@@ -1,9 +1,6 @@
 import Button from "@mui/material/Button";
 import { makeStyles } from "@mui/styles";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { FC, useState } from "react";
 import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { Stack } from "../Stack/Stack";
@@ -49,15 +46,8 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
             size="small"
             onClick={() => setShouldDisplayHideResources((v) => !v)}
           >
-            {shouldDisplayHideResources ? (
-              <>
-                Hide resources <CloseDropdown />
-              </>
-            ) : (
-              <>
-                Show hidden resources <OpenDropdown />
-              </>
-            )}
+            {shouldDisplayHideResources ? "Hide" : "Show hidden"} resources
+            <DropdownArrow close={shouldDisplayHideResources} />
           </Button>
         </div>
       )}
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 3537b37d29fee..dbeefc6d3d56b 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -2,10 +2,7 @@ import Collapse from "@mui/material/Collapse";
 import { makeStyles } from "@mui/styles";
 import TableCell from "@mui/material/TableCell";
 import { AuditLog } from "api/typesGenerated";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Pill, type PillType } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
@@ -154,7 +151,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
           </Stack>
 
           {shouldDisplayDiff ? (
-            <div> {isDiffOpen ? <CloseDropdown /> : <OpenDropdown />}</div>
+            <div> {<DropdownArrow close={isDiffOpen} />}</div>
           ) : (
             <div className={styles.columnWithoutDiff}></div>
           )}

From 01bdcd6bdc2bc392f3d9b4b1b0ef233251e80154 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:29:33 +0000
Subject: [PATCH 03/15] emotion: `InfoTooltip`

---
 .../components/InfoTooltip/InfoTooltip.tsx    | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 528dc30d9f23d..7466ec512a92f 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -5,7 +5,7 @@ import {
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import InfoIcon from "@mui/icons-material/InfoOutlined";
-import { makeStyles } from "@mui/styles";
+import { css } from "@emotion/css";
 import { colors } from "theme/colors";
 
 interface InfoTooltipProps {
@@ -17,31 +17,22 @@ interface InfoTooltipProps {
 export const InfoTooltip: FC<InfoTooltipProps> = (props) => {
   const { title, message, type = "info" } = props;
 
-  const styles = useStyles({ type });
-
   return (
     <HelpTooltip
       size="small"
       icon={InfoIcon}
-      iconClassName={styles.icon}
-      buttonClassName={styles.button}
+      iconClassName={css`
+        color: ${type === "info" ? colors.blue[5] : colors.yellow[5]};
+      `}
+      buttonClassName={css`
+        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
+      `}
     >
       <HelpTooltipTitle>{title}</HelpTooltipTitle>
       <HelpTooltipText>{message}</HelpTooltipText>
     </HelpTooltip>
   );
 };
-
-const useStyles = makeStyles<unknown, Pick<InfoTooltipProps, "type">>(() => ({
-  icon: ({ type }) => ({
-    color: type === "info" ? colors.blue[5] : colors.yellow[5],
-  }),
-
-  button: {
-    opacity: 1,
-
-    "&:hover": {
-      opacity: 1,
-    },
-  },
-}));

From d995bcd5719462c1620a24f057dce3f115d6210e Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:37:50 +0000
Subject: [PATCH 04/15] emotion: `ResourceCard`

---
 .../src/components/Resources/ResourceCard.tsx | 164 +++++++++---------
 1 file changed, 81 insertions(+), 83 deletions(-)

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index 04007b172bb9b..879a993311219 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -1,14 +1,66 @@
-import { makeStyles } from "@mui/styles";
-import { FC, useState } from "react";
+import { type FC, useState } from "react";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
 import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { Stack } from "../Stack/Stack";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import { CopyableValue } from "components/CopyableValue/CopyableValue";
-import { type Theme } from "@mui/material/styles";
+
+const styles = {
+  resourceCard: (theme) => ({
+    background: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+
+    "&:not(:first-of-type)": {
+      borderTop: 0,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    },
+
+    "&:not(:last-child)": {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  }),
+
+  resourceCardProfile: {
+    flexShrink: 0,
+    width: "fit-content",
+  },
+
+  resourceCardHeader: (theme) => ({
+    padding: theme.spacing(3, 4),
+    borderBottom: `1px solid ${theme.palette.divider}`,
+
+    "&:last-child": {
+      borderBottom: 0,
+    },
+  }),
+
+  metadata: (theme) => ({
+    ...(theme.typography.body2 as CSSObject),
+    lineHeight: "120%",
+  }),
+
+  metadataLabel: (theme) => ({
+    fontSize: 12,
+    color: theme.palette.text.secondary,
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  }),
+
+  metadataValue: (theme) => ({
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    ...(theme.typography.body1 as CSSObject),
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
 
 export interface ResourceCardProps {
   resource: WorkspaceResource;
@@ -30,44 +82,53 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
     metadataLength += 1;
     visibleMetadata.pop();
   }
-  const styles = useStyles({ metadataLength });
 
   return (
     <div key={resource.id} className={`${styles.resourceCard} resource-card`}>
       <Stack
         direction="row"
         alignItems="flex-start"
-        className={styles.resourceCardHeader}
+        css={styles.resourceCardHeader}
         spacing={10}
       >
         <Stack
           direction="row"
           alignItems="center"
-          className={styles.resourceCardProfile}
+          css={styles.resourceCardProfile}
         >
           <div>
             <ResourceAvatar resource={resource} />
           </div>
-          <div className={styles.metadata}>
-            <div className={styles.metadataLabel}>{resource.type}</div>
-            <div className={styles.metadataValue}>{resource.name}</div>
+          <div css={styles.metadata}>
+            <div css={styles.metadataLabel}>{resource.type}</div>
+            <div css={styles.metadataValue}>{resource.name}</div>
           </div>
         </Stack>
 
-        <div className={styles.metadataHeader}>
+        <div
+          css={(theme) => ({
+            flexGrow: 2,
+            display: "grid",
+            gridTemplateColumns: `repeat(${
+              metadataLength === 1 ? 1 : 4
+            }, minmax(0, 1fr))`,
+            gap: theme.spacing(5),
+            rowGap: theme.spacing(3),
+          })}
+        >
           {resource.daily_cost > 0 && (
-            <div className={styles.metadata}>
-              <div className={styles.metadataLabel}>
+            <div css={styles.metadata}>
+              <div css={styles.metadataLabel}>
                 <b>cost</b>
               </div>
-              <div className={styles.metadataValue}>{resource.daily_cost}</div>
+              <div css={styles.metadataValue}>{resource.daily_cost}</div>
             </div>
           )}
           {visibleMetadata.map((meta) => {
             return (
-              <div className={styles.metadata} key={meta.key}>
-                <div className={styles.metadataLabel}>{meta.key}</div>
-                <div className={styles.metadataValue}>
+              <div css={styles.metadata} key={meta.key}>
+                <div css={styles.metadataLabel}>{meta.key}</div>
+                <div css={styles.metadataValue}>
                   {meta.sensitive ? (
                     <SensitiveValue value={meta.value} />
                   ) : (
@@ -104,66 +165,3 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
     </div>
   );
 };
-
-const useStyles = makeStyles<Theme, { metadataLength: number }>((theme) => ({
-  resourceCard: {
-    background: theme.palette.background.paper,
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
-
-    "&:not(:first-of-type)": {
-      borderTop: 0,
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-    },
-
-    "&:not(:last-child)": {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-  },
-
-  resourceCardProfile: {
-    flexShrink: 0,
-    width: "fit-content",
-  },
-
-  resourceCardHeader: {
-    padding: theme.spacing(3, 4),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-
-    "&:last-child": {
-      borderBottom: 0,
-    },
-  },
-
-  metadataHeader: (props) => ({
-    flexGrow: 2,
-    display: "grid",
-    gridTemplateColumns: `repeat(${
-      props.metadataLength === 1 ? 1 : 4
-    }, minmax(0, 1fr))`,
-    gap: theme.spacing(5),
-    rowGap: theme.spacing(3),
-  }),
-
-  metadata: {
-    ...theme.typography.body2,
-    lineHeight: "120%",
-  },
-
-  metadataLabel: {
-    fontSize: 12,
-    color: theme.palette.text.secondary,
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-  },
-
-  metadataValue: {
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    ...theme.typography.body1,
-  },
-}));

From 632d05b3339e0b4a9b7754fe22cc775c5d70e1dc Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:45:36 +0000
Subject: [PATCH 05/15] emotion: `RichParameterInput`

---
 .../RichParameterInput/RichParameterInput.tsx | 204 +++++++++---------
 1 file changed, 100 insertions(+), 104 deletions(-)

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index 79a460d0d0408..d2b2436c966dd 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -1,27 +1,111 @@
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import { makeStyles } from "@mui/styles";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { Stack } from "components/Stack/Stack";
+import Box from "@mui/material/Box";
 import { FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
-import { colors } from "theme/colors";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
+import { Stack } from "components/Stack/Stack";
+import { colors } from "theme/colors";
 import { MultiTextField } from "./MultiTextField";
-import Box from "@mui/material/Box";
-import { Theme } from "@mui/material/styles";
+import { Interpolation, Theme } from "@emotion/react";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
 };
 
+const styles = {
+  label: (theme) => ({
+    marginBottom: theme.spacing(0.5),
+  }),
+  labelCaption: (theme) => ({
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+
+    ".small &": {
+      fontSize: 13,
+      lineHeight: "140%",
+    },
+  }),
+  labelPrimary: (theme) => ({
+    fontSize: 16,
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+
+    "& p": {
+      margin: 0,
+      lineHeight: "24px", // Keep the same as ParameterInput
+    },
+
+    ".small &": {
+      fontSize: 14,
+    },
+  }),
+  labelImmutable: (theme) => ({
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+    color: colors.yellow[7],
+  }),
+  textField: {
+    ".small & .MuiInputBase-root": {
+      height: 36,
+      fontSize: 14,
+      borderRadius: 6,
+    },
+  },
+  radioGroup: (theme) => ({
+    ".small & .MuiFormControlLabel-label": {
+      fontSize: 14,
+    },
+    ".small & .MuiRadio-root": {
+      padding: theme.spacing(0.75, "9px"), // 8px + 1px border
+    },
+    ".small & .MuiRadio-root svg": {
+      width: 16,
+      height: 16,
+    },
+  }),
+  checkbox: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  }),
+  labelIconWrapper: (theme) => ({
+    width: theme.spacing(2.5),
+    height: theme.spacing(2.5),
+    display: "block",
+
+    ".small &": {
+      display: "none",
+    },
+  }),
+  labelIcon: {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain",
+  },
+  radioOption: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1.5),
+  }),
+  optionIcon: {
+    maxHeight: 20,
+    width: 20,
+
+    ".small &": {
+      maxHeight: 16,
+      width: 16,
+    },
+  },
+} satisfies Record<string, Interpolation<Theme>>;
+
 export interface ParameterLabelProps {
   parameter: TemplateVersionParameter;
 }
 
 const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
-  const styles = useStyles();
   const hasDescription = parameter.description && parameter.description !== "";
   const displayName = parameter.display_name
     ? parameter.display_name
@@ -31,9 +115,9 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
     <label htmlFor={parameter.name}>
       <Stack direction="row" alignItems="center">
         {parameter.icon && (
-          <span className={styles.labelIconWrapper}>
+          <span css={styles.labelIconWrapper}>
             <img
-              className={styles.labelIcon}
+              css={styles.labelIcon}
               alt="Parameter icon"
               src={parameter.icon}
             />
@@ -42,13 +126,13 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
 
         {hasDescription ? (
           <Stack spacing={0}>
-            <span className={styles.labelPrimary}>{displayName}</span>
-            <MemoizedMarkdown className={styles.labelCaption}>
+            <span css={styles.labelPrimary}>{displayName}</span>
+            <MemoizedMarkdown css={styles.labelCaption}>
               {parameter.description}
             </MemoizedMarkdown>
           </Stack>
         ) : (
-          <span className={styles.labelPrimary}>{displayName}</span>
+          <span css={styles.labelPrimary}>{displayName}</span>
         )}
       </Stack>
     </label>
@@ -94,14 +178,12 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
-  const styles = useStyles();
-
   if (isBoolean(parameter)) {
     return (
       <RadioGroup
         id={parameter.name}
         data-testid="parameter-field-bool"
-        className={styles.radioGroup}
+        css={styles.radioGroup}
         value={value}
         onChange={(_, value) => onChange(value)}
       >
@@ -126,7 +208,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
       <RadioGroup
         id={parameter.name}
         data-testid="parameter-field-options"
-        className={styles.radioGroup}
+        css={styles.radioGroup}
         value={value}
         onChange={(_, value) => onChange(value)}
       >
@@ -137,10 +219,10 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
             value={option.value}
             control={<Radio size="small" />}
             label={
-              <span className={styles.radioOption}>
+              <span css={styles.radioOption}>
                 {option.icon && (
                   <img
-                    className={styles.optionIcon}
+                    css={styles.optionIcon}
                     alt="Parameter icon"
                     src={option.icon}
                     style={{
@@ -198,7 +280,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
       {...props}
       id={parameter.name}
       data-testid="parameter-field-text"
-      className={styles.textField}
+      css={styles.textField}
       type={parameter.type}
       disabled={disabled}
       required={parameter.required}
@@ -210,89 +292,3 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
     />
   );
 };
-
-const useStyles = makeStyles<Theme>((theme) => ({
-  label: {
-    marginBottom: theme.spacing(0.5),
-  },
-  labelCaption: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-
-    ".small &": {
-      fontSize: 13,
-      lineHeight: "140%",
-    },
-  },
-  labelPrimary: {
-    fontSize: 16,
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-
-    "& p": {
-      margin: 0,
-      lineHeight: "24px", // Keep the same as ParameterInput
-    },
-
-    ".small &": {
-      fontSize: 14,
-    },
-  },
-  labelImmutable: {
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
-    color: colors.yellow[7],
-  },
-  textField: {
-    ".small & .MuiInputBase-root": {
-      height: 36,
-      fontSize: 14,
-      borderRadius: 6,
-    },
-  },
-  radioGroup: {
-    ".small & .MuiFormControlLabel-label": {
-      fontSize: 14,
-    },
-    ".small & .MuiRadio-root": {
-      padding: theme.spacing(0.75, "9px"), // 8px + 1px border
-    },
-    ".small & .MuiRadio-root svg": {
-      width: 16,
-      height: 16,
-    },
-  },
-  checkbox: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1),
-  },
-  labelIconWrapper: {
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
-    display: "block",
-
-    ".small &": {
-      display: "none",
-    },
-  },
-  labelIcon: {
-    width: "100%",
-    height: "100%",
-    objectFit: "contain",
-  },
-  radioOption: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1.5),
-  },
-  optionIcon: {
-    maxHeight: 20,
-    width: 20,
-
-    ".small &": {
-      maxHeight: 16,
-      width: 16,
-    },
-  },
-}));

From 515511c6bae4cc052f670f5f6d5ab4d2a8e91554 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 19:55:46 +0000
Subject: [PATCH 06/15] emotion: `CreateUserForm`

---
 .../pages/CreateUserPage/CreateUserForm.tsx   | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
index 43767ad921aac..a4fc45e670e37 100644
--- a/site/src/pages/CreateUserPage/CreateUserForm.tsx
+++ b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -1,7 +1,10 @@
 import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Link from "@mui/material/Link";
 import { FormikContextType, useFormik } from "formik";
 import { FC } from "react";
 import * as Yup from "yup";
+import { hasApiFieldErrors, isApiError } from "api/errors";
 import * as TypesGen from "api/typesGenerated";
 import {
   getFormHelpers,
@@ -12,11 +15,6 @@ import { FormFooter } from "components/FormFooter/FormFooter";
 import { FullPageForm } from "components/FullPageForm/FullPageForm";
 import { Stack } from "components/Stack/Stack";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { hasApiFieldErrors, isApiError } from "api/errors";
-import MenuItem from "@mui/material/MenuItem";
-import { makeStyles } from "@mui/styles";
-import { Theme } from "@mui/material/styles";
-import Link from "@mui/material/Link";
 
 export const Language = {
   emailLabel: "Email",
@@ -104,8 +102,6 @@ export const CreateUserForm: FC<
     error,
   );
 
-  const styles = useStyles();
-
   const methods = [
     authMethods?.password.enabled && "password",
     authMethods?.oidc.enabled && "oidc",
@@ -163,7 +159,14 @@ export const CreateUserForm: FC<
                 <MenuItem key={value} id={"item-" + value} value={value}>
                   <Stack spacing={0} maxWidth={400}>
                     {language.displayName}
-                    <span className={styles.labelDescription}>
+                    <span
+                      css={(theme) => ({
+                        fontSize: 14,
+                        color: theme.palette.text.secondary,
+                        wordWrap: "normal",
+                        whiteSpace: "break-spaces",
+                      })}
+                    >
                       {language.description}
                     </span>
                   </Stack>
@@ -192,12 +195,3 @@ export const CreateUserForm: FC<
     </FullPageForm>
   );
 };
-
-const useStyles = makeStyles<Theme>((theme) => ({
-  labelDescription: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-    wordWrap: "normal",
-    whiteSpace: "break-spaces",
-  },
-}));

From 627d09b7fb75baba5cb6c506496e810c4f58e197 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 20:41:51 +0000
Subject: [PATCH 07/15] emotion: `TemplateVersionEditor`

---
 .../TemplateVersionEditor.stories.tsx         |   3 +
 .../TemplateVersionEditor.tsx                 | 171 ++++++++----------
 .../TemplateVersionEditorPage.tsx             |   2 +-
 .../templateVersionEditorXService.ts          |   1 +
 4 files changed, 76 insertions(+), 101 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index bc40bf5cd38ef..c235acdcf5a91 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -34,12 +34,14 @@ export const Example: Story = {};
 
 export const Logs = {
   args: {
+    isBuildingNewVersion: true,
     buildLogs: MockWorkspaceBuildLogs,
   },
 };
 
 export const Resources: Story = {
   args: {
+    isBuildingNewVersion: true,
     buildLogs: MockWorkspaceBuildLogs,
     resources: [
       MockWorkspaceResource,
@@ -54,6 +56,7 @@ export const Resources: Story = {
 
 export const ManyLogs = {
   args: {
+    isBuildingNewVersion: true,
     templateVersion: {
       ...MockTemplateVersion,
       job: {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 8bbe8947e135a..626fb1221a24f 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,7 +1,6 @@
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Link from "@mui/material/Link";
-import { makeStyles } from "@mui/styles";
 import Tooltip from "@mui/material/Tooltip";
 import CreateIcon from "@mui/icons-material/AddOutlined";
 import BuildIcon from "@mui/icons-material/BuildOutlined";
@@ -21,7 +20,7 @@ import { AvatarData } from "components/AvatarData/AvatarData";
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable";
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import { PublishVersionData } from "pages/TemplateVersionEditorPage/types";
-import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { type FC, useCallback, useEffect, useRef, useState } from "react";
 import {
   createFile,
   existsFile,
@@ -46,17 +45,17 @@ import {
   getStatus,
   TemplateVersionStatusBadge,
 } from "./TemplateVersionStatusBadge";
-import { Theme } from "@mui/material/styles";
 import AlertTitle from "@mui/material/AlertTitle";
 import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 
 export interface TemplateVersionEditorProps {
   template: Template;
   templateVersion: TemplateVersion;
+  isBuildingNewVersion: boolean;
   defaultFileTree: FileTree;
   buildLogs?: ProvisionerJobLog[];
   resources?: WorkspaceResource[];
-  deploymentBannerVisible?: boolean;
   disablePreview: boolean;
   disableUpdate: boolean;
   onPreview: (files: FileTree) => void;
@@ -92,8 +91,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   disablePreview,
   disableUpdate,
   template,
-  deploymentBannerVisible,
   templateVersion,
+  isBuildingNewVersion,
   defaultFileTree,
   onPreview,
   onPublish,
@@ -111,6 +110,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   onSubmitMissingVariableValues,
   onCancelSubmitMissingVariableValues,
 }) => {
+  const theme = useTheme();
   // If resources are provided, show them by default!
   // This is for Storybook!
   const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
@@ -173,22 +173,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   const templateVersionSucceeded = templateVersion.job.status === "succeeded";
   const showBuildLogs = Boolean(buildLogs);
   const editorValue = getFileContent(activePath ?? "", fileTree) as string;
-  const firstTemplateVersionOnEditor = useRef(templateVersion);
 
   useEffect(() => {
     window.dispatchEvent(new Event("resize"));
   }, [showBuildLogs]);
-  const styles = useStyles({
-    templateVersionSucceeded,
-    showBuildLogs,
-    deploymentBannerVisible,
-  });
 
   return (
     <>
-      <DashboardFullPage className={styles.root}>
-        <div className={styles.topbar} data-testid="topbar">
-          <div className={styles.topbarSides}>
+      <DashboardFullPage
+        css={{
+          background: theme.palette.background.default,
+        }}
+      >
+        <div css={styles.topbar} data-testid="topbar">
+          <div css={styles.topbarSides}>
             <Link
               component={RouterLink}
               underline="none"
@@ -220,12 +218,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             </Alert>
           )}
 
-          <div className={styles.topbarSides}>
-            {/* Only start to show the build when a new template version is building */}
-            {templateVersion.id !== firstTemplateVersionOnEditor.current.id && (
-              <div className={styles.buildStatus}>
-                <TemplateVersionStatusBadge version={templateVersion} />
-              </div>
+          <div css={styles.topbarSides}>
+            {isBuildingNewVersion && (
+              <TemplateVersionStatusBadge version={templateVersion} />
             )}
 
             <Button
@@ -248,11 +243,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
           </div>
         </div>
 
-        <div className={styles.sidebarAndEditor}>
-          <div className={styles.sidebar}>
-            <div className={styles.sidebarTitle}>
+        <div css={styles.sidebarAndEditor}>
+          <div css={styles.sidebar}>
+            <div css={styles.sidebarTitle}>
               Template files
-              <div className={styles.sidebarActions}>
+              <div css={styles.sidebarActions}>
                 <Tooltip title="Create File" placement="top">
                   <IconButton
                     aria-label="Create File"
@@ -331,8 +326,16 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             />
           </div>
 
-          <div className={styles.editorPane}>
-            <div className={styles.editor} data-chromatic="ignore">
+          <div
+            css={{
+              display: "grid",
+              width: "100%",
+              gridTemplateColumns: showBuildLogs ? "1fr 1fr" : "1fr 0fr",
+              minHeight: "100%",
+              overflow: "hidden",
+            }}
+          >
+            <div css={styles.editor} data-chromatic="ignore">
               {activePath ? (
                 <MonacoEditor
                   value={editorValue}
@@ -352,12 +355,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               )}
             </div>
 
-            <div className={styles.panelWrapper}>
-              <div className={styles.tabs}>
+            <div css={styles.panelWrapper}>
+              <div css={styles.tabs}>
                 <button
-                  className={`${styles.tab} ${
-                    selectedTab === 0 ? "active" : ""
-                  }`}
+                  css={`
+                    ${styles.tab} ${selectedTab === 0 ? "active" : ""}
+                  `}
                   onClick={() => {
                     setSelectedTab(0);
                   }}
@@ -372,9 +375,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
                 {!disableUpdate && (
                   <button
-                    className={`${styles.tab} ${
-                      selectedTab === 1 ? "active" : ""
-                    }`}
+                    css={`
+                      ${styles.tab} ${selectedTab === 1 ? "active" : ""}
+                    `}
                     onClick={() => {
                       setSelectedTab(1);
                     }}
@@ -386,9 +389,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               </div>
 
               <div
-                className={`${styles.panel} ${styles.buildLogs} ${
-                  selectedTab === 0 ? "" : "hidden"
-                }`}
+                css={[
+                  styles.panel,
+                  {
+                    display: selectedTab !== 0 ? "none" : "flex",
+                    flexDirection: "column",
+                  },
+                ]}
               >
                 {templateVersion.job.error && (
                   <div>
@@ -419,9 +426,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               </div>
 
               <div
-                className={`${styles.panel} ${styles.resources} ${
-                  selectedTab === 1 ? "" : "hidden"
-                }`}
+                css={[
+                  styles.panel,
+                  {
+                    paddingBottom: theme.spacing(2),
+                    display: selectedTab !== 1 ? "none" : undefined,
+                  },
+                ]}
               >
                 {resources && (
                   <TemplateResourcesTable
@@ -432,12 +443,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 )}
               </div>
             </div>
-
-            {templateVersionSucceeded && (
-              <>
-                <div className={styles.panelDivider} />
-              </>
-            )}
           </div>
         </div>
       </DashboardFullPage>
@@ -462,18 +467,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   );
 };
 
-const useStyles = makeStyles<
-  Theme,
-  {
-    templateVersionSucceeded: boolean;
-    showBuildLogs: boolean;
-    deploymentBannerVisible?: boolean;
-  }
->((theme) => ({
-  root: {
-    background: theme.palette.background.default,
-  },
-  topbar: {
+const styles = {
+  topbar: (theme) => ({
     padding: theme.spacing(2),
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: "flex",
@@ -481,29 +476,24 @@ const useStyles = makeStyles<
     justifyContent: "space-between",
     height: topbarHeight,
     background: theme.palette.background.paper,
-  },
-  topbarSides: {
+  }),
+  topbarSides: (theme) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.spacing(2),
-  },
-  buildStatus: {
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-  },
+  }),
   sidebarAndEditor: {
     display: "flex",
     flex: 1,
     flexBasis: 0,
     overflow: "hidden",
   },
-  sidebar: {
+  sidebar: (theme) => ({
     minWidth: 256,
     backgroundColor: theme.palette.background.paper,
     borderRight: `1px solid ${theme.palette.divider}`,
-  },
-  sidebarTitle: {
+  }),
+  sidebarTitle: (theme) => ({
     fontSize: 10,
     textTransform: "uppercase",
     padding: theme.spacing(1, 2),
@@ -512,45 +502,33 @@ const useStyles = makeStyles<
     letterSpacing: "0.5px",
     display: "flex",
     alignItems: "center",
-  },
-  sidebarActions: {
+  }),
+  sidebarActions: (theme) => ({
     marginLeft: "auto",
     "& svg": {
       fill: theme.palette.text.primary,
     },
-  },
-  editorPane: {
-    display: "grid",
-    width: "100%",
-    gridTemplateColumns: (props) =>
-      props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
-    minHeight: "100%",
-    overflow: "hidden",
-  },
+  }),
   editor: {
     flex: 1,
   },
-  panelWrapper: {
+  panelWrapper: (theme) => ({
     flex: 1,
     borderLeft: `1px solid ${theme.palette.divider}`,
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",
-  },
+  }),
   panel: {
     overflowY: "auto",
     height: "100%",
 
-    "&.hidden": {
-      display: "none",
-    },
-
     // Hack to access customize resource-card from here
     "& .resource-card": {
       border: 0,
     },
   },
-  tabs: {
+  tabs: (theme) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: "flex",
     boxShadow: "#000000 0 6px 6px -6px inset",
@@ -561,8 +539,8 @@ const useStyles = makeStyles<
       textTransform: "none",
       letterSpacing: "unset",
     },
-  },
-  tab: {
+  }),
+  tab: (theme) => ({
     cursor: "pointer",
     padding: theme.spacing(1.5),
     fontSize: 10,
@@ -601,8 +579,8 @@ const useStyles = makeStyles<
     "&:hover": {
       color: theme.palette.text.primary,
     },
-  },
-  tabBar: {
+  }),
+  tabBar: (theme) => ({
     padding: "8px 16px",
     position: "sticky",
     top: 0,
@@ -615,12 +593,5 @@ const useStyles = makeStyles<
     "&.top": {
       borderTop: `1px solid ${theme.palette.divider}`,
     },
-  },
-  buildLogs: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  resources: {
-    paddingBottom: theme.spacing(2),
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
index 6065f61bdb833..402c9e25eea87 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -45,8 +45,8 @@ export const TemplateVersionEditorPage: FC = () => {
       {isSuccess && (
         <TemplateVersionEditor
           template={data.template}
-          deploymentBannerVisible={permissions.viewDeploymentStats}
           templateVersion={editorState.context.version || data.version}
+          isBuildingNewVersion={Boolean(editorState.context.version)}
           defaultFileTree={data.fileTree}
           onPreview={(fileTree) => {
             sendEvent({
diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
index 823bb374e8f37..ad65d2cc873ff 100644
--- a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
+++ b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -78,6 +78,7 @@ export const templateVersionEditorMachine = createMachine(
     },
     tsTypes: {} as import("./templateVersionEditorXService.typegen").Typegen0,
     initial: "initializing",
+
     states: {
       initializing: {
         on: {

From e06c71bc98bf0134bdc9ccff73159674ca7d611f Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 21:34:55 +0000
Subject: [PATCH 08/15] emotion: `HelpTooltip`

---
 .../components/HelpTooltip/HelpTooltip.tsx    | 156 ++++++++----------
 1 file changed, 68 insertions(+), 88 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 184ca9bc93b55..8050c433798e4 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,6 +1,5 @@
 import Link from "@mui/material/Link";
 import Popover, { PopoverProps } from "@mui/material/Popover";
-import { makeStyles } from "@mui/styles";
 import HelpIcon from "@mui/icons-material/HelpOutline";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import {
@@ -11,9 +10,10 @@ import {
   FC,
   PropsWithChildren,
 } from "react";
-import { combineClasses } from "utils/combineClasses";
 import { Stack } from "components/Stack/Stack";
 import Box, { BoxProps } from "@mui/material/Box";
+import { type CSSObject, css as className } from "@emotion/css";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 
 type Icon = typeof HelpIcon;
 
@@ -46,12 +46,24 @@ const useHelpTooltip = () => {
 export const HelpPopover: FC<
   PopoverProps & { onOpen: () => void; onClose: () => void }
 > = ({ onOpen, onClose, children, ...props }) => {
-  const styles = useStyles({ size: "small" });
+  const theme = useTheme();
 
   return (
     <Popover
-      className={styles.popover}
-      classes={{ paper: styles.popoverPaper }}
+      className={className`
+        pointer-events: none;
+      `}
+      classes={{
+        paper: className`
+          ${theme.typography.body2 as CSSObject}
+
+          margin-top: ${theme.spacing(0.5)};
+          width: ${theme.spacing(38)};
+          padding: ${theme.spacing(2.5)};
+          color: ${theme.palette.text.secondary};
+          pointer-events: auto;
+        `,
+      }}
       onClose={onClose}
       anchorOrigin={{
         vertical: "bottom",
@@ -80,7 +92,7 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
   iconClassName,
   buttonClassName,
 }) => {
-  const styles = useStyles({ size });
+  const theme = useTheme();
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(Boolean(open));
   const id = isOpen ? "help-popover" : undefined;
@@ -94,7 +106,24 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
       <button
         ref={anchorRef}
         aria-describedby={id}
-        className={combineClasses([styles.button, buttonClassName])}
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: ${theme.spacing(getButtonSpacingFromSize(size))};
+          height: ${theme.spacing(getButtonSpacingFromSize(size))};
+          padding: 0;
+          border: 0;
+          background: transparent;
+          color: ${theme.palette.text.primary};
+          opacity: 0.5;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.75;
+          }
+        `}
+        className={buttonClassName}
         onClick={(event) => {
           event.stopPropagation();
           setIsOpen(true);
@@ -107,7 +136,13 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
         }}
         aria-label="More info"
       >
-        <Icon className={combineClasses([styles.icon, iconClassName])} />
+        <Icon
+          css={{
+            width: theme.spacing(getIconSpacingFromSize(size)),
+            height: theme.spacing(getIconSpacingFromSize(size)),
+          }}
+          className={iconClassName}
+        />
       </button>
       <HelpPopover
         id={id}
@@ -127,32 +162,20 @@ export const HelpTooltip: FC<PropsWithChildren<HelpTooltipProps>> = ({
 export const HelpTooltipTitle: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  const styles = useStyles({});
-
-  return <h4 className={styles.title}>{children}</h4>;
+  return <h4 css={styles.title}>{children}</h4>;
 };
 
 export const HelpTooltipText = (props: BoxProps) => {
-  const styles = useStyles({});
-
-  return (
-    <Box
-      component="p"
-      {...props}
-      className={combineClasses([styles.text, props.className])}
-    />
-  );
+  return <Box component="p" css={styles.text} {...props} />;
 };
 
 export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
   children,
   href,
 }) => {
-  const styles = useStyles({});
-
   return (
-    <Link href={href} target="_blank" rel="noreferrer" className={styles.link}>
-      <OpenInNewIcon className={styles.linkIcon} />
+    <Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
+      <OpenInNewIcon css={styles.linkIcon} />
       {children}
     </Link>
   );
@@ -165,20 +188,19 @@ export const HelpTooltipAction: FC<
     ariaLabel?: string;
   }>
 > = ({ children, icon: Icon, onClick, ariaLabel }) => {
-  const styles = useStyles({});
   const tooltip = useHelpTooltip();
 
   return (
     <button
       aria-label={ariaLabel ?? ""}
-      className={styles.action}
+      css={styles.action}
       onClick={(event) => {
         event.stopPropagation();
         onClick();
         tooltip.onClose();
       }}
     >
-      <Icon className={styles.actionIcon} />
+      <Icon css={styles.actionIcon} />
       {children}
     </button>
   );
@@ -187,10 +209,8 @@ export const HelpTooltipAction: FC<
 export const HelpTooltipLinksGroup: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
-  const styles = useStyles({});
-
   return (
-    <Stack spacing={1} className={styles.linksGroup}>
+    <Stack spacing={1} css={styles.linksGroup}>
       {children}
     </Stack>
   );
@@ -216,80 +236,40 @@ const getIconSpacingFromSize = (size?: Size): number => {
   }
 };
 
-const useStyles = makeStyles((theme) => ({
-  button: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: ({ size }: { size?: Size }) =>
-      theme.spacing(getButtonSpacingFromSize(size)),
-    height: ({ size }: { size?: Size }) =>
-      theme.spacing(getButtonSpacingFromSize(size)),
-    padding: 0,
-    border: 0,
-    background: "transparent",
-    color: theme.palette.text.primary,
-    opacity: 0.5,
-    cursor: "pointer",
-
-    "&:hover": {
-      opacity: 0.75,
-    },
-  },
-
-  icon: {
-    width: ({ size }: { size?: Size }) =>
-      theme.spacing(getIconSpacingFromSize(size)),
-    height: ({ size }: { size?: Size }) =>
-      theme.spacing(getIconSpacingFromSize(size)),
-  },
-
-  popover: {
-    pointerEvents: "none",
-  },
-
-  popoverPaper: {
-    marginTop: theme.spacing(0.5),
-    width: theme.spacing(38),
-    padding: theme.spacing(2.5),
-    color: theme.palette.text.secondary,
-    pointerEvents: "auto",
-    ...theme.typography.body2,
-  },
-
-  title: {
+const styles = {
+  title: (theme) => ({
     marginTop: 0,
     marginBottom: theme.spacing(1),
     color: theme.palette.text.primary,
     fontSize: 14,
     lineHeight: "120%",
     fontWeight: 600,
-  },
+  }),
 
-  text: {
+  text: (theme) => ({
     marginTop: theme.spacing(0.5),
     marginBottom: theme.spacing(0.5),
-    ...theme.typography.body2,
-  },
+    ...(theme.typography.body2 as CSSObject),
+  }),
 
-  link: {
+  link: (theme) => ({
     display: "flex",
     alignItems: "center",
-    ...theme.typography.body2,
-  },
+    ...(theme.typography.body2 as CSSObject),
+  }),
 
-  linkIcon: {
+  linkIcon: (theme) => ({
     color: "inherit",
     width: 14,
     height: 14,
     marginRight: theme.spacing(1),
-  },
+  }),
 
-  linksGroup: {
+  linksGroup: (theme) => ({
     marginTop: theme.spacing(2),
-  },
+  }),
 
-  action: {
+  action: (theme) => ({
     display: "flex",
     alignItems: "center",
     background: "none",
@@ -298,12 +278,12 @@ const useStyles = makeStyles((theme) => ({
     padding: 0,
     cursor: "pointer",
     fontSize: 14,
-  },
+  }),
 
-  actionIcon: {
+  actionIcon: (theme) => ({
     color: "inherit",
     width: 14,
     height: 14,
     marginRight: theme.spacing(1),
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;

From ad20b7738fdb7d262f56b8184765817554ee3fe6 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 22:37:09 +0000
Subject: [PATCH 09/15] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/Resources/ResourceCard.tsx        |  7 +++----
 .../TemplateVersionEditor.tsx                         | 11 ++++-------
 .../TemplateVersionEditorPage.tsx                     |  2 --
 .../templateVersionEditorXService.ts                  |  1 -
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index 879a993311219..4767b46d29be5 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -82,9 +82,10 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
     metadataLength += 1;
     visibleMetadata.pop();
   }
+  const gridWidth = metadataLength === 1 ? 1 : 4;
 
   return (
-    <div key={resource.id} className={`${styles.resourceCard} resource-card`}>
+    <div key={resource.id} css={styles.resourceCard} className="resource-card">
       <Stack
         direction="row"
         alignItems="flex-start"
@@ -109,9 +110,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
           css={(theme) => ({
             flexGrow: 2,
             display: "grid",
-            gridTemplateColumns: `repeat(${
-              metadataLength === 1 ? 1 : 4
-            }, minmax(0, 1fr))`,
+            gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
             gap: theme.spacing(5),
             rowGap: theme.spacing(3),
           })}
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 626fb1221a24f..ce7f9734f2c27 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -170,7 +170,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
   }, [templateVersion]);
 
   const hasIcon = template.icon && template.icon !== "";
-  const templateVersionSucceeded = templateVersion.job.status === "succeeded";
   const showBuildLogs = Boolean(buildLogs);
   const editorValue = getFileContent(activePath ?? "", fileTree) as string;
 
@@ -358,9 +357,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             <div css={styles.panelWrapper}>
               <div css={styles.tabs}>
                 <button
-                  css={`
-                    ${styles.tab} ${selectedTab === 0 ? "active" : ""}
-                  `}
+                  css={styles.tab}
+                  className={selectedTab === 0 ? "active" : ""}
                   onClick={() => {
                     setSelectedTab(0);
                   }}
@@ -375,9 +373,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
                 {!disableUpdate && (
                   <button
-                    css={`
-                      ${styles.tab} ${selectedTab === 1 ? "active" : ""}
-                    `}
+                    css={styles.tab}
+                    className={selectedTab === 0 ? "active" : ""}
                     onClick={() => {
                       setSelectedTab(1);
                     }}
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
index 402c9e25eea87..3e571900c90f5 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.tsx
@@ -1,7 +1,6 @@
 import { useMachine } from "@xstate/react";
 import { TemplateVersionEditor } from "./TemplateVersionEditor";
 import { useOrganizationId } from "hooks/useOrganizationId";
-import { usePermissions } from "hooks/usePermissions";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate, useParams } from "react-router-dom";
@@ -22,7 +21,6 @@ export const TemplateVersionEditorPage: FC = () => {
   const [editorState, sendEvent] = useMachine(templateVersionEditorMachine, {
     context: { orgId },
   });
-  const permissions = usePermissions();
   const { isSuccess, data } = useTemplateVersionData(
     {
       orgId,
diff --git a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
index ad65d2cc873ff..823bb374e8f37 100644
--- a/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
+++ b/site/src/xServices/templateVersionEditor/templateVersionEditorXService.ts
@@ -78,7 +78,6 @@ export const templateVersionEditorMachine = createMachine(
     },
     tsTypes: {} as import("./templateVersionEditorXService.typegen").Typegen0,
     initial: "initializing",
-
     states: {
       initializing: {
         on: {

From ed4e71beff0abbee401c52e5c712c8a84f57179f Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Tue, 3 Oct 2023 22:57:01 +0000
Subject: [PATCH 10/15] emotion: `Markdown`

---
 site/src/components/Markdown/Markdown.tsx | 127 +++++++++++-----------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index 3abb1838e4c30..5391e965172bb 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -1,5 +1,4 @@
 import Link from "@mui/material/Link";
-import { makeStyles } from "@mui/styles";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
@@ -12,17 +11,24 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import gfm from "remark-gfm";
 import { colors } from "theme/colors";
 import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import { combineClasses } from "utils/combineClasses";
+import { type Interpolation, type Theme } from "@emotion/react";
 
-export const Markdown: FC<{ children: string; className?: string }> = ({
-  children,
-  className,
-}) => {
-  const styles = useStyles();
+interface MarkdownProps {
+  /**
+   * The Markdown text to parse and render
+   */
+  children: string;
+
+  className?: string;
+}
+
+export const Markdown: FC<MarkdownProps> = (props) => {
+  const { children, className } = props;
 
   return (
     <ReactMarkdown
-      className={combineClasses([styles.markdown, className])}
+      css={markdownStyles}
+      className={className}
       remarkPlugins={[gfm]}
       components={{
         a: ({ href, target, children }) => (
@@ -58,7 +64,16 @@ export const Markdown: FC<{ children: string; className?: string }> = ({
               {String(children)}
             </SyntaxHighlighter>
           ) : (
-            <code className={styles.codeWithoutLanguage} {...props}>
+            <code
+              css={(theme) => ({
+                padding: theme.spacing(0.125, 0.5),
+                background: theme.palette.divider,
+                borderRadius: 4,
+                color: theme.palette.text.primary,
+                fontSize: 14,
+              })}
+              {...props}
+            >
               {children}
             </code>
           );
@@ -100,67 +115,57 @@ export const Markdown: FC<{ children: string; className?: string }> = ({
 
 export const MemoizedMarkdown = memo(Markdown);
 
-const useStyles = makeStyles((theme) => ({
-  markdown: {
-    fontSize: 16,
-    lineHeight: "24px",
-
-    "& h1, & h2, & h3, & h4, & h5, & h6": {
-      marginTop: theme.spacing(4),
-      marginBottom: theme.spacing(2),
-      lineHeight: "1.25",
-    },
+const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
+  fontSize: 16,
+  lineHeight: "24px",
 
-    "& p": {
-      marginTop: 0,
-      marginBottom: theme.spacing(2),
-    },
+  "& h1, & h2, & h3, & h4, & h5, & h6": {
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(2),
+    lineHeight: "1.25",
+  },
 
-    "& p:only-child": {
-      marginTop: 0,
-      marginBottom: 0,
-    },
+  "& p": {
+    marginTop: 0,
+    marginBottom: theme.spacing(2),
+  },
 
-    "& ul, & ol": {
-      display: "flex",
-      flexDirection: "column",
-      gap: theme.spacing(1),
-      marginBottom: theme.spacing(2),
-    },
+  "& p:only-child": {
+    marginTop: 0,
+    marginBottom: 0,
+  },
 
-    "& li > ul, & li > ol": {
-      marginTop: theme.spacing(2),
-    },
+  "& ul, & ol": {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+  },
 
-    "& li > p": {
-      marginBottom: 0,
-    },
+  "& li > ul, & li > ol": {
+    marginTop: theme.spacing(2),
+  },
 
-    "& .prismjs": {
-      background: theme.palette.background.paperLight,
-      borderRadius: theme.shape.borderRadius,
-      padding: theme.spacing(2, 3),
-      overflowX: "auto",
+  "& li > p": {
+    marginBottom: 0,
+  },
 
-      "& code": {
-        color: theme.palette.text.secondary,
-      },
+  "& .prismjs": {
+    background: theme.palette.background.paperLight,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(2, 3),
+    overflowX: "auto",
 
-      "& .key, & .property, & .inserted, .keyword": {
-        color: colors.turquoise[7],
-      },
+    "& code": {
+      color: theme.palette.text.secondary,
+    },
 
-      "& .deleted": {
-        color: theme.palette.error.light,
-      },
+    "& .key, & .property, & .inserted, .keyword": {
+      color: colors.turquoise[7],
     },
-  },
 
-  codeWithoutLanguage: {
-    padding: theme.spacing(0.125, 0.5),
-    background: theme.palette.divider,
-    borderRadius: 4,
-    color: theme.palette.text.primary,
-    fontSize: 14,
+    "& .deleted": {
+      color: theme.palette.error.light,
+    },
   },
-}));
+});

From 0bfa16a654cf99f6a75df5c3b03023637ccce948 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 4 Oct 2023 17:03:47 +0000
Subject: [PATCH 11/15] silly!

---
 .../pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index ce7f9734f2c27..82988be7b0cca 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -374,7 +374,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 {!disableUpdate && (
                   <button
                     css={styles.tab}
-                    className={selectedTab === 0 ? "active" : ""}
+                    className={selectedTab === 1 ? "active" : ""}
                     onClick={() => {
                       setSelectedTab(1);
                     }}

From ff884e16311ac17739dc780346a0ebc6acde7f1d Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 4 Oct 2023 17:33:59 +0000
Subject: [PATCH 12/15] emotion: `Stack`

---
 site/src/components/Stack/Stack.tsx           | 78 ++++++++-----------
 .../TemplateSummaryPageView.tsx               |  6 +-
 2 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index 13c3cfa46c46c..42ee6fbf4087c 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -1,61 +1,45 @@
-import { makeStyles } from "@mui/styles";
-import { CSSProperties } from "@mui/styles/withStyles";
-import { FC } from "react";
-import { ReactNode } from "react-markdown/lib/react-markdown";
-import { combineClasses } from "utils/combineClasses";
-
-type Direction = "column" | "row";
+import type { FC } from "react";
+import type { CSSObject } from "@emotion/react";
 
 export type StackProps = {
   className?: string;
-  direction?: Direction;
+  direction?: "column" | "row";
   spacing?: number;
-  alignItems?: CSSProperties["alignItems"];
-  justifyContent?: CSSProperties["justifyContent"];
-  maxWidth?: CSSProperties["maxWidth"];
-  wrap?: CSSProperties["flexWrap"];
+  alignItems?: CSSObject["alignItems"];
+  justifyContent?: CSSObject["justifyContent"];
+  maxWidth?: CSSObject["maxWidth"];
+  wrap?: CSSObject["flexWrap"];
 } & React.HTMLProps<HTMLDivElement>;
 
-type StyleProps = Omit<StackProps, "className">;
-
-const useStyles = makeStyles((theme) => ({
-  stack: {
-    display: "flex",
-    flexDirection: ({ direction }: StyleProps) => direction,
-    gap: ({ spacing }: StyleProps) => spacing && theme.spacing(spacing),
-    alignItems: ({ alignItems }: StyleProps) => alignItems,
-    justifyContent: ({ justifyContent }: StyleProps) => justifyContent,
-    flexWrap: ({ wrap }: StyleProps) => wrap,
-    maxWidth: ({ maxWidth }: StyleProps) => maxWidth,
-
-    [theme.breakpoints.down("md")]: {
-      width: "100%",
-    },
-  },
-}));
-
-export const Stack: FC<StackProps & { children: ReactNode | ReactNode[] }> = ({
-  children,
-  className,
-  direction = "column",
-  spacing = 2,
-  alignItems,
-  justifyContent,
-  maxWidth,
-  wrap,
-  ...divProps
-}) => {
-  const styles = useStyles({
-    spacing,
-    direction,
+export const Stack: FC<StackProps> = (props) => {
+  const {
+    children,
+    direction = "column",
+    spacing = 2,
     alignItems,
     justifyContent,
-    wrap,
     maxWidth,
-  });
+    wrap,
+    ...divProps
+  } = props;
 
   return (
-    <div {...divProps} className={combineClasses([styles.stack, className])}>
+    <div
+      {...divProps}
+      css={(theme) => ({
+        display: "flex",
+        flexDirection: direction,
+        gap: spacing && theme.spacing(spacing),
+        alignItems: alignItems,
+        justifyContent: justifyContent,
+        flexWrap: wrap,
+        maxWidth: maxWidth,
+
+        [theme.breakpoints.down("md")]: {
+          width: "100%",
+        },
+      })}
+    >
       {children}
     </div>
   );
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
index 1ebed63451e92..a54f96f91d57f 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
+++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.tsx
@@ -1,4 +1,6 @@
-import {
+import { type FC, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import type {
   Template,
   TemplateVersion,
   WorkspaceResource,
@@ -7,8 +9,6 @@ import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
 import { TemplateResourcesTable } from "components/TemplateResourcesTable/TemplateResourcesTable";
 import { TemplateStats } from "./TemplateStats";
-import { FC, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { TemplateVersionWarnings } from "components/TemplateVersionWarnings/TemplateVersionWarnings";
 
 export interface TemplateSummaryPageViewProps {

From da885f06bbd7cb85d97595dc798bfd85c2873e26 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 4 Oct 2023 17:53:25 +0000
Subject: [PATCH 13/15] better stories

---
 .../TemplateVersionEditor.stories.tsx                  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
index c235acdcf5a91..844bb33beff77 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
@@ -1,4 +1,6 @@
 import {
+  MockFailedProvisionerJob,
+  MockRunningProvisionerJob,
   MockTemplate,
   MockTemplateVersion,
   MockTemplateVersionFileTree,
@@ -15,7 +17,7 @@ import { TemplateVersionEditor } from "./TemplateVersionEditor";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TemplateVersionEditor> = {
-  title: "components/TemplateVersionEditor",
+  title: "pages/TemplateVersionEditor",
   component: TemplateVersionEditor,
   args: {
     template: MockTemplate,
@@ -36,6 +38,10 @@ export const Logs = {
   args: {
     isBuildingNewVersion: true,
     buildLogs: MockWorkspaceBuildLogs,
+    templateVersion: {
+      ...MockTemplateVersion,
+      job: MockRunningProvisionerJob,
+    },
   },
 };
 
@@ -60,7 +66,7 @@ export const ManyLogs = {
     templateVersion: {
       ...MockTemplateVersion,
       job: {
-        ...MockTemplateVersion.job,
+        ...MockFailedProvisionerJob,
         error:
           "template import provision for start: terraform plan: exit status 1",
       },

From db60ab26263869ca3fe616d2bc8a6b77d4a68236 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 4 Oct 2023 18:14:44 +0000
Subject: [PATCH 14/15] justice

---
 .../src/components/Resources/ResourceCard.tsx |  5 ++++
 site/src/components/Stack/Stack.tsx           |  4 ---
 .../TemplateSummaryPageView.stories.tsx       | 25 -------------------
 3 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
index 4767b46d29be5..f5c0779d68a29 100644
--- a/site/src/components/Resources/ResourceCard.tsx
+++ b/site/src/components/Resources/ResourceCard.tsx
@@ -39,6 +39,11 @@ const styles = {
     "&:last-child": {
       borderBottom: 0,
     },
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+      overflow: "scroll",
+    },
   }),
 
   metadata: (theme) => ({
diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index 42ee6fbf4087c..683b81c6795c2 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -34,10 +34,6 @@ export const Stack: FC<StackProps> = (props) => {
         justifyContent: justifyContent,
         flexWrap: wrap,
         maxWidth: maxWidth,
-
-        [theme.breakpoints.down("md")]: {
-          width: "100%",
-        },
       })}
     >
       {children}
diff --git a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
index 1cca2f6a7ac9d..1dac26ffe043d 100644
--- a/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
+++ b/site/src/pages/TemplatePage/TemplateSummaryPage/TemplateSummaryPageView.stories.tsx
@@ -32,31 +32,6 @@ export const NoIcon: Story = {
   },
 };
 
-export const SmallViewport: Story = {
-  args: {
-    template: MockTemplate,
-    activeVersion: {
-      ...MockTemplateVersion,
-      readme: `---
-    name:Template test
-    ---
-    ## Instructions
-    You can add instructions here
-
-    [Some link info](https://coder.com)
-    \`\`\`
-    # This is a really long sentence to test that the code block wraps into a new line properly.
-    \`\`\`
-    `,
-    },
-    resources: [MockWorkspaceResource, MockWorkspaceVolumeResource],
-  },
-};
-
-SmallViewport.parameters = {
-  chromatic: { viewports: [600] },
-};
-
 export const WithDeprecatedParameters: Story = {
   args: {
     template: MockTemplate,

From 7369494191c8137fe215f8226ed0b83ffb972f9a Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Wed, 4 Oct 2023 20:19:04 +0000
Subject: [PATCH 15/15] this should be fine?

---
 site/src/components/Stack/Stack.tsx              | 4 +---
 site/src/pages/CreateUserPage/CreateUserForm.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx
index 683b81c6795c2..bc19dfc63c03d 100644
--- a/site/src/components/Stack/Stack.tsx
+++ b/site/src/components/Stack/Stack.tsx
@@ -7,7 +7,6 @@ export type StackProps = {
   spacing?: number;
   alignItems?: CSSObject["alignItems"];
   justifyContent?: CSSObject["justifyContent"];
-  maxWidth?: CSSObject["maxWidth"];
   wrap?: CSSObject["flexWrap"];
 } & React.HTMLProps<HTMLDivElement>;
 
@@ -18,7 +17,6 @@ export const Stack: FC<StackProps> = (props) => {
     spacing = 2,
     alignItems,
     justifyContent,
-    maxWidth,
     wrap,
     ...divProps
   } = props;
@@ -33,7 +31,7 @@ export const Stack: FC<StackProps> = (props) => {
         alignItems: alignItems,
         justifyContent: justifyContent,
         flexWrap: wrap,
-        maxWidth: maxWidth,
+        maxWidth: "100%",
       })}
     >
       {children}
diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
index a4fc45e670e37..630316aea8c57 100644
--- a/site/src/pages/CreateUserPage/CreateUserForm.tsx
+++ b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -157,7 +157,12 @@ export const CreateUserForm: FC<
               const language = authMethodLanguage[value];
               return (
                 <MenuItem key={value} id={"item-" + value} value={value}>
-                  <Stack spacing={0} maxWidth={400}>
+                  <Stack
+                    spacing={0}
+                    css={{
+                      maxWidth: 400,
+                    }}
+                  >
                     {language.displayName}
                     <span
                       css={(theme) => ({