chore(site): Upgrade to MUI v5 (#7437)

site/.eslintrc.yaml

@@ -86,6 +86,9 @@ rules:
     - argsIgnorePattern: "^_"
       varsIgnorePattern: "^_"
       ignoreRestSiblings: true
+  "@typescript-eslint/no-empty-interface":
+    - error
+    - allowSingleExtends: true
   "brace-style": "off"
   "curly": ["error", "all"]
   "eslint-comments/require-description": "error"
@@ -113,19 +116,15 @@ rules:
   no-restricted-imports:
     - error
     - paths:
-        - name: "@material-ui/core"
+        - name: "@mui/material"
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/icons"
+        - name: "@mui/icons-material"
           message:
             "Use path imports to avoid pulling in unused modules. See:
             https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/styles"
+        - name: "@mui/material/Avatar"
-          message:
-            "Use path imports to avoid pulling in unused modules. See:
-            https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/core/Avatar"
           message:
             "You should use the Avatar component provided on
             components/Avatar/Avatar"

site/.storybook/preview.jsx

@@ -1,5 +1,5 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
+import CssBaseline from "@mui/material/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
 import { createMemoryHistory } from "history"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
@@ -10,10 +10,12 @@ const history = createMemoryHistory()
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={dark}>
+    <StyledEngineProvider injectFirst>
-      <CssBaseline />
+      <ThemeProvider theme={dark}>
-      <Story />
+        <CssBaseline />
-    </ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    </StyledEngineProvider>
   ),
   (Story) => {
     return (

site/mui.d.ts

@@ -0,0 +1,25 @@
+import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles"
+
+declare module "@mui/styles/defaultTheme" {
+  interface DefaultTheme extends Theme {}
+}
+
+declare module "@mui/material/styles" {
+  interface TypeBackground {
+    paperLight: string
+  }
+
+  interface Palette {
+    neutral: PaletteColor
+  }
+
+  interface PaletteOptions {
+    neutral?: PaletteColorOptions
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    neutral: true
+  }
+}

site/package.json

@@ -30,12 +30,15 @@
   "dependencies": {
     "@emoji-mart/data": "1.0.5",
     "@emoji-mart/react": "1.0.1",
+    "@emotion/react": "^11.10.8",
+    "@emotion/styled": "^11.10.8",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "4.5.11",
-    "@material-ui/core": "4.12.1",
-    "@material-ui/icons": "4.5.1",
-    "@material-ui/lab": "4.0.0-alpha.42",
     "@monaco-editor/react": "4.5.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.129",
+    "@mui/material": "^5.12.3",
+    "@mui/styles": "^5.12.3",
     "@tanstack/react-query": "4.22.4",
     "@testing-library/react-hooks": "8.0.1",
     "@types/color-convert": "2.0.0",
@@ -72,7 +75,7 @@
     "react-dom": "18.2.0",
     "react-headless-tabs": "6.0.3",
     "react-helmet-async": "1.3.0",
-    "react-i18next": "12.1.1",
+    "react-i18next": "12.2.2",
     "react-markdown": "8.0.3",
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",

site/src/app.tsx

@@ -1,5 +1,4 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
+import CssBaseline from "@mui/material/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { AuthProvider } from "components/AuthProvider/AuthProvider"
 import { FC, PropsWithChildren } from "react"
@@ -9,6 +8,7 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"
 import { dark } from "./theme"
 import "./theme/globalFonts"
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles"
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -24,17 +24,19 @@ const queryClient = new QueryClient({
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
   return (
     <HelmetProvider>
-      <ThemeProvider theme={dark}>
+      <StyledEngineProvider injectFirst>
-        <CssBaseline />
+        <ThemeProvider theme={dark}>
-        <ErrorBoundary>
+          <CssBaseline enableColorScheme />
-          <QueryClientProvider client={queryClient}>
+          <ErrorBoundary>
-            <AuthProvider>
+            <QueryClientProvider client={queryClient}>
-              {children}
+              <AuthProvider>
-              <GlobalSnackbar />
+                {children}
-            </AuthProvider>
+                <GlobalSnackbar />
-          </QueryClientProvider>
+              </AuthProvider>
-        </ErrorBoundary>
+            </QueryClientProvider>
-      </ThemeProvider>
+          </ErrorBoundary>
+        </ThemeProvider>
+      </StyledEngineProvider>
     </HelmetProvider>
   )
 }

site/src/components/AlertBanner/AlertBanner.stories.tsx

@@ -1,9 +1,9 @@
 import { Story } from "@storybook/react"
 import { AlertBanner } from "./AlertBanner"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
 import { mockApiError } from "testHelpers/entities"
 import { AlertBannerProps } from "./alertTypes"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 
 export default {
   title: "components/AlertBanner",

site/src/components/AlertBanner/AlertBanner.tsx

@@ -1,7 +1,7 @@
 import { useState, FC, Children } from "react"
-import Collapse from "@material-ui/core/Collapse"
+import Collapse from "@mui/material/Collapse"
 import { Stack } from "components/Stack/Stack"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import { getErrorDetail, getErrorMessage } from "api/errors"
@@ -9,6 +9,7 @@ import { Expander } from "components/Expander/Expander"
 import { Severity, AlertBannerProps } from "./alertTypes"
 import { severityConstants } from "./severityConstants"
 import { AlertBannerCtas } from "./AlertBannerCtas"
+import { Theme } from "@mui/material/styles"
 
 /**
  * @param children: the children to be displayed in the alert
@@ -96,6 +97,7 @@ interface StyleProps {
 
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   alertContainer: (props) => ({
+    ...theme.typography.body2,
     borderColor: severityConstants[props.severity].color,
     border: `1px solid ${colors.orange[7]}`,
     borderRadius: theme.shape.borderRadius,
@@ -104,13 +106,13 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     textAlign: "left",
 
     "& > span": {
-      paddingTop: `${theme.spacing(0.25)}px`,
+      paddingTop: theme.spacing(0.25),
     },
 
     // targeting the alert icon rather than the expander icon
     "& svg:nth-child(2)": {
-      marginTop: props.hasDetail ? `${theme.spacing(1)}px` : "inherit",
+      marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
-      marginRight: `${theme.spacing(1)}px`,
+      marginRight: theme.spacing(1),
     },
   }),
 

site/src/components/AlertBanner/AlertBannerCtas.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react"
 import { AlertBannerProps } from "./alertTypes"
 import { Stack } from "components/Stack/Stack"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import RefreshIcon from "@material-ui/icons/Refresh"
+import RefreshIcon from "@mui/icons-material/Refresh"
 import { useTranslation } from "react-i18next"
 
 type AlertBannerCtasProps = Pick<
@@ -29,12 +29,7 @@ export const AlertBannerCtas: FC<AlertBannerCtasProps> = ({
       {/* retry CTA */}
       {retry && (
         <div>
-          <Button
+          <Button size="small" onClick={retry} startIcon={<RefreshIcon />}>
-            size="small"
-            onClick={retry}
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-          >
             {t("ctas.retry")}
           </Button>
         </div>
@@ -42,7 +37,7 @@ export const AlertBannerCtas: FC<AlertBannerCtasProps> = ({
 
       {/* close CTA */}
       {dismissible && (
-        <Button size="small" onClick={() => setOpen(false)} variant="outlined">
+        <Button size="small" onClick={() => setOpen(false)}>
           {t("ctas.dismissCta")}
         </Button>
       )}

site/src/components/AlertBanner/alertTypes.ts

@@ -5,7 +5,7 @@ export type Severity = "warning" | "error" | "info"
 
 export interface AlertBannerProps {
   severity: Severity
-  text?: string
+  text?: JSX.Element | string
   error?: ApiError | Error | unknown
   actions?: ReactElement[]
   dismissible?: boolean

site/src/components/AlertBanner/severityConstants.tsx

@@ -1,6 +1,6 @@
-import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
+import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined"
-import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined"
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"
-import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"
 import { colors } from "theme/colors"
 import { Severity } from "./alertTypes"
 import { ReactElement } from "react"

site/src/components/AppLink/AppLink.tsx

@@ -1,8 +1,8 @@
-import CircularProgress from "@material-ui/core/CircularProgress"
+import CircularProgress from "@mui/material/CircularProgress"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"
 import { PrimaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"

site/src/components/AppLink/AppPreviewLink.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import * as TypesGen from "api/typesGenerated"

site/src/components/AppLink/BaseIcon.tsx

@@ -1,6 +1,6 @@
 import { WorkspaceApp } from "api/typesGenerated"
 import { FC } from "react"
-import ComputerIcon from "@material-ui/icons/Computer"
+import ComputerIcon from "@mui/icons-material/Computer"
 
 export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
   return app.icon ? (

site/src/components/AppLink/ShareIcon.tsx

@@ -1,8 +1,8 @@
-import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
+import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined"
-import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"
-import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined"
+import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined"
 import * as TypesGen from "../../api/typesGenerated"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
 import { useTranslation } from "react-i18next"
 
 export interface ShareIconProps {

site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react"
 import { AuditLog } from "api/typesGenerated"
 import { Link as RouterLink } from "react-router-dom"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 import { Trans, useTranslation } from "react-i18next"
 import { BuildAuditDescription } from "./BuildAuditDescription"
 

site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx

@@ -2,7 +2,7 @@ import { Trans, useTranslation } from "react-i18next"
 import { AuditLog } from "api/typesGenerated"
 import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 
 export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({
   auditLog,

site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { AuditLog } from "api/typesGenerated"
 import { colors } from "theme/colors"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"

site/src/components/AuditLogRow/AuditLogRow.stories.tsx

@@ -1,9 +1,9 @@
-import Table from "@material-ui/core/Table"
+import Table from "@mui/material/Table"
-import TableBody from "@material-ui/core/TableBody"
+import TableBody from "@mui/material/TableBody"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
+import TableContainer from "@mui/material/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
+import TableHead from "@mui/material/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import TableRow from "@mui/material/TableRow"
 import { ComponentMeta, Story } from "@storybook/react"
 import {
   MockAuditLog,

site/src/components/AuditLogRow/AuditLogRow.tsx

@@ -1,6 +1,6 @@
-import Collapse from "@material-ui/core/Collapse"
+import Collapse from "@mui/material/Collapse"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
 import { AuditLog } from "api/typesGenerated"
 import {
   CloseDropdown,
@@ -11,11 +11,11 @@ import { Stack } from "components/Stack/Stack"
 import { TimelineEntry } from "components/Timeline/TimelineEntry"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
 import { useState } from "react"
-import { PaletteIndex } from "theme/palettes"
 import userAgentParser from "ua-parser-js"
 import { AuditLogDiff, determineGroupDiff } from "./AuditLogDiff"
 import { useTranslation } from "react-i18next"
 import { AuditLogDescription } from "./AuditLogDescription"
+import { PaletteIndex } from "theme/theme"
 
 const httpStatusColor = (httpStatus: number): PaletteIndex => {
   // redirects are successful

site/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from "@storybook/react"
 import { Avatar, AvatarIcon, AvatarProps } from "./Avatar"
-import PauseIcon from "@material-ui/icons/PauseOutlined"
+import PauseIcon from "@mui/icons-material/PauseOutlined"
 
 export default {
   title: "components/Avatar",

site/src/components/Avatar/Avatar.tsx

@@ -1,9 +1,7 @@
 // This is the only place MuiAvatar can be used
 // eslint-disable-next-line no-restricted-imports -- Read above
-import MuiAvatar, {
+import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"
-  AvatarProps as MuiAvatarProps,
+import { makeStyles } from "@mui/styles"
-} from "@material-ui/core/Avatar"
-import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"

site/src/components/AvatarData/AvatarData.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from "components/Avatar/Avatar"
 import { FC, PropsWithChildren } from "react"
 import { Stack } from "components/Stack/Stack"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 
 export interface AvatarDataProps {
   title: string | JSX.Element
@@ -43,6 +43,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     minHeight: theme.spacing(5), // Make it predictable for the skeleton
     width: "100%",
+    lineHeight: "150%",
   },
 
   info: {
@@ -57,8 +58,7 @@ const useStyles = makeStyles((theme) => ({
   subtitle: {
     fontSize: 12,
     color: theme.palette.text.secondary,
-    lineHeight: "140%",
+    lineHeight: "150%",
-    marginTop: 2,
     maxWidth: 540,
   },
 }))

site/src/components/AvatarData/AvatarDataSkeleton.tsx

@@ -1,11 +1,11 @@
 import { FC } from "react"
 import { Stack } from "components/Stack/Stack"
-import { Skeleton } from "@material-ui/lab"
+import Skeleton from "@mui/material/Skeleton"
 
 export const AvatarDataSkeleton: FC = () => {
   return (
     <Stack spacing={1.5} direction="row" alignItems="center">
-      <Skeleton variant="circle" width={36} height={36} />
+      <Skeleton variant="circular" width={36} height={36} />
 
       <Stack spacing={0}>
         <Skeleton variant="text" width={100} />

site/src/components/BorderedMenu/BorderedMenu.stories.tsx

@@ -1,34 +0,0 @@
-import { Story } from "@storybook/react"
-import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow"
-import { BuildingIcon } from "../Icons/BuildingIcon"
-import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"
-import { BorderedMenu, BorderedMenuProps } from "./BorderedMenu"
-
-export default {
-  title: "components/BorderedMenu",
-  component: BorderedMenu,
-}
-
-const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
-  <BorderedMenu {...args}>
-    <BorderedMenuRow
-      title="Item 1"
-      description="Here's a description"
-      Icon={BuildingIcon}
-      path="/"
-    />
-    <BorderedMenuRow
-      active
-      title="Item 2"
-      description="This BorderedMenuRow is active"
-      Icon={UsersOutlinedIcon}
-      path="/"
-    />
-  </BorderedMenu>
-)
-
-export const UserVariant = Template.bind({})
-UserVariant.args = {
-  variant: "user-dropdown",
-  open: true,
-}

site/src/components/BorderedMenu/BorderedMenu.tsx

@@ -1,5 +1,5 @@
-import Popover, { PopoverProps } from "@material-ui/core/Popover"
+import Popover, { PopoverProps } from "@mui/material/Popover"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, PropsWithChildren } from "react"
 
 type BorderedMenuVariant = "user-dropdown"

site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

@@ -1,7 +1,6 @@
-import ListItem from "@material-ui/core/ListItem"
+import ListItem from "@mui/material/ListItem"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import SvgIcon from "@material-ui/core/SvgIcon"
+import CheckIcon from "@mui/icons-material/Check"
-import CheckIcon from "@material-ui/icons/Check"
 import { FC } from "react"
 import { NavLink } from "react-router-dom"
 import { ellipsizeText } from "../../utils/ellipsizeText"
@@ -14,8 +13,6 @@ interface BorderedMenuRowProps {
   active?: boolean
   /** Optional description that appears beneath the title */
   description?: string
-  /** An SvgIcon that will be rendered to the left of the title */
-  Icon: typeof SvgIcon
   /** URL path */
   path: string
   /** Required title of this row */
@@ -28,7 +25,7 @@ interface BorderedMenuRowProps {
 
 export const BorderedMenuRow: FC<
   React.PropsWithChildren<BorderedMenuRowProps>
-> = ({ active, description, Icon, path, title, variant, onClick }) => {
+> = ({ active, description, path, title, variant, onClick }) => {
   const styles = useStyles()
 
   return (
@@ -41,7 +38,6 @@ export const BorderedMenuRow: FC<
       >
         <div className={styles.content} data-variant={variant}>
           <div className={styles.contentTop}>
-            <Icon className={styles.icon} />
             <Typography className={styles.title}>{title}</Typography>
             {active && <CheckIcon className={styles.checkMark} />}
           </div>
@@ -66,7 +62,7 @@ const iconSize = 20
 const useStyles = makeStyles((theme) => ({
   root: {
     cursor: "pointer",
-    padding: `0 ${theme.spacing(1)}px`,
+    padding: `0 ${theme.spacing(1)}`,
 
     "&:hover": {
       backgroundColor: "unset",
@@ -86,7 +82,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   rootGutters: {
-    padding: `0 ${theme.spacing(1.5)}px`,
+    padding: `0 ${theme.spacing(1.5)}`,
   },
   content: {
     borderRadius: theme.shape.borderRadius,

site/src/components/BuildsTable/BuildAvatar.tsx

@@ -1,13 +1,14 @@
-import Badge from "@material-ui/core/Badge"
+import Badge from "@mui/material/Badge"
-import { Theme, useTheme, withStyles } from "@material-ui/core/styles"
+import { useTheme, withStyles } from "@mui/styles"
 import { FC } from "react"
-import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
+import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
-import PauseOutlined from "@material-ui/icons/PauseOutlined"
+import PauseOutlined from "@mui/icons-material/PauseOutlined"
-import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
+import DeleteOutlined from "@mui/icons-material/DeleteOutlined"
 import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
 import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
-import { PaletteIndex } from "theme/palettes"
 import { Avatar, AvatarProps } from "components/Avatar/Avatar"
+import { PaletteIndex } from "theme/theme"
+import { Theme } from "@mui/material/styles"
 
 interface StylesBadgeProps {
   type: PaletteIndex

site/src/components/BuildsTable/BuildRow.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
 import { WorkspaceBuild } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
 import { TimelineEntry } from "components/Timeline/TimelineEntry"

site/src/components/BuildsTable/BuildsTable.tsx

@@ -1,9 +1,9 @@
-import Box from "@material-ui/core/Box"
+import Box from "@mui/material/Box"
-import Table from "@material-ui/core/Table"
+import Table from "@mui/material/Table"
-import TableBody from "@material-ui/core/TableBody"
+import TableBody from "@mui/material/TableBody"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
+import TableContainer from "@mui/material/TableContainer"
-import TableRow from "@material-ui/core/TableRow"
+import TableRow from "@mui/material/TableRow"
 import { Timeline } from "components/Timeline/Timeline"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"

site/src/components/CodeBlock/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../utils/combineClasses"

site/src/components/CodeExample/CodeExample.tsx

@@ -1,8 +1,9 @@
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "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
@@ -30,7 +31,7 @@ export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
       <CopyButton
         text={code}
         tooltipTitle={tooltipTitle}
-        buttonClassName={combineClasses([styles.button, buttonClassName])}
+        buttonClassName={buttonClassName}
       />
     </div>
   )
@@ -51,26 +52,14 @@ const useStyles = makeStyles<Theme, styleProps>((theme) => ({
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 14,
     borderRadius: theme.shape.borderRadius,
-    padding: props.inline ? "0px" : theme.spacing(0.5),
+    padding: theme.spacing(1),
+    lineHeight: "150%",
   }),
-  code: (props) => ({
+  code: {
-    padding: `
+    padding: theme.spacing(0, 1),
-      ${props.inline ? 0 : theme.spacing(0.5)}px
-      ${theme.spacing(0.75)}px
-      ${props.inline ? 0 : theme.spacing(0.5)}px
-      ${props.inline ? theme.spacing(1) : theme.spacing(2)}px
-    `,
     width: "100%",
     display: "flex",
     alignItems: "center",
     wordBreak: "break-all",
-  }),
+  },
-  button: (props) => ({
-    border: 0,
-    minWidth: props.inline ? 30 : 42,
-    minHeight: props.inline ? 30 : 42,
-    borderRadius: theme.shape.borderRadius,
-    padding: props.inline ? theme.spacing(0.4) : undefined,
-    background: "transparent",
-  }),
 }))

site/src/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,7 @@
-import IconButton from "@material-ui/core/Button"
+import IconButton from "@mui/material/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
-import Check from "@material-ui/icons/Check"
+import Check from "@mui/icons-material/Check"
 import { useClipboard } from "hooks/useClipboard"
 import { combineClasses } from "../../utils/combineClasses"
 import { FileCopyIcon } from "../Icons/FileCopyIcon"
@@ -42,6 +42,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
           onClick={copyToClipboard}
           size="small"
           aria-label={Language.ariaLabel}
+          variant="text"
         >
           {isCopied ? (
             <Check className={styles.fileCopyIcon} />

site/src/components/CopyableValue/CopyableValue.tsx

@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"
 import { FC, HTMLProps } from "react"

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -1,4 +1,4 @@
-import TextField from "@material-ui/core/TextField"
+import TextField from "@mui/material/TextField"
 import { FormikContextType, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
@@ -62,7 +62,7 @@ export const CreateUserForm: FC<
   return (
     <FullPageForm title="Create user">
       <form onSubmit={form.handleSubmit} autoComplete="off">
-        <Stack spacing={1}>
+        <Stack spacing={2.5}>
           <TextField
             {...getFieldHelpers("username")}
             onChange={onChangeTrimmed(form)}
@@ -70,7 +70,6 @@ export const CreateUserForm: FC<
             autoFocus
             fullWidth
             label={Language.usernameLabel}
-            variant="outlined"
           />
           <TextField
             {...getFieldHelpers("email")}
@@ -78,7 +77,6 @@ export const CreateUserForm: FC<
             autoComplete="email"
             fullWidth
             label={Language.emailLabel}
-            variant="outlined"
           />
           <TextField
             {...getFieldHelpers("password")}
@@ -87,7 +85,6 @@ export const CreateUserForm: FC<
             id="password"
             label={Language.passwordLabel}
             type="password"
-            variant="outlined"
           />
         </Stack>
         <FormFooter onCancel={onCancel} isLoading={isLoading} />

site/src/components/DAUChart/DAUChart.tsx

@@ -1,5 +1,5 @@
-import { Theme } from "@material-ui/core/styles"
+import { Theme } from "@mui/material/styles"
-import useTheme from "@material-ui/styles/useTheme"
+import useTheme from "@mui/styles/useTheme"
 import * as TypesGen from "api/typesGenerated"
 import {
   CategoryScale,

site/src/components/Dashboard/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { useMachine } from "@xstate/react"
 import { UpdateCheckResponse } from "api/typesGenerated"
 import { DeploymentBanner } from "components/DeploymentBanner/DeploymentBanner"

site/src/components/DeploySettingsLayout/Badges.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"

site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
 import { Sidebar } from "./Sidebar"

site/src/components/DeploySettingsLayout/Fieldset.tsx

@@ -1,21 +1,31 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, ReactNode, FormEventHandler } from "react"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
 
 export const Fieldset: FC<{
   children: ReactNode
   title: string | JSX.Element
+  subtitle?: string | JSX.Element
   validation?: string | JSX.Element | false
   button?: JSX.Element | false
   onSubmit: FormEventHandler<HTMLFormElement>
   isSubmitting?: boolean
-}> = ({ title, children, validation, button, onSubmit, isSubmitting }) => {
+}> = ({
+  title,
+  subtitle,
+  children,
+  validation,
+  button,
+  onSubmit,
+  isSubmitting,
+}) => {
   const styles = useStyles()
 
   return (
     <form className={styles.fieldset} onSubmit={onSubmit}>
       <header className={styles.header}>
         <div className={styles.title}>{title}</div>
+        {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
         <div className={styles.body}>{children}</div>
       </header>
       <footer className={styles.footer}>
@@ -38,17 +48,18 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(4),
   },
   title: {
-    ...theme.typography.h5,
+    fontSize: theme.spacing(2.5),
+    margin: 0,
     fontWeight: 600,
   },
+  subtitle: {
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+    marginTop: theme.spacing(1),
+  },
   body: {
     ...theme.typography.body2,
     paddingTop: theme.spacing(2),
-
-    "& p": {
-      marginTop: 0,
-      marginBottom: theme.spacing(2),
-    },
   },
   validation: {
     color: theme.palette.text.secondary,
@@ -57,8 +68,9 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(3),
   },
   footer: {
+    ...theme.typography.body2,
     background: theme.palette.background.paperLight,
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px`,
+    padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",

site/src/components/DeploySettingsLayout/Header.tsx

@@ -1,6 +1,6 @@
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 
@@ -25,12 +25,10 @@ export const Header: FC<{
 
       {docsHref && (
         <Button
-          size="small"
           startIcon={<LaunchOutlined />}
           component="a"
           href={docsHref}
           target="_blank"
-          variant="outlined"
         >
           Read the docs
         </Button>

site/src/components/DeploySettingsLayout/Option.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { PropsWithChildren, FC, ReactNode } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { DisabledBadge, EnabledBadge } from "./Badges"

site/src/components/DeploySettingsLayout/OptionsTable.tsx

@@ -1,10 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Table from "@material-ui/core/Table"
+import Table from "@mui/material/Table"
-import TableBody from "@material-ui/core/TableBody"
+import TableBody from "@mui/material/TableBody"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
+import TableContainer from "@mui/material/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
+import TableHead from "@mui/material/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import TableRow from "@mui/material/TableRow"
 import { DeploymentOption } from "api/types"
 import {
   OptionDescription,

site/src/components/DeploySettingsLayout/Sidebar.tsx

@@ -1,10 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Brush from "@material-ui/icons/Brush"
+import Brush from "@mui/icons-material/Brush"
-import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
-import ApprovalIcon from "@material-ui/icons/VerifiedUserOutlined"
+import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined"
-import LockRounded from "@material-ui/icons/LockOutlined"
+import LockRounded from "@mui/icons-material/LockOutlined"
-import Globe from "@material-ui/icons/PublicOutlined"
+import Globe from "@mui/icons-material/PublicOutlined"
-import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
+import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined"
 import { GitIcon } from "components/Icons/GitIcon"
 import { Stack } from "components/Stack/Stack"
 import { ElementType, PropsWithChildren, ReactNode, FC } from "react"

site/src/components/DeploymentBanner/DeploymentBannerView.tsx

@@ -2,23 +2,23 @@ import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated"
 import { FC, useMemo, useEffect, useState } from "react"
 import prettyBytes from "pretty-bytes"
 import { getStatus } from "components/WorkspaceStatusBadge/WorkspaceStatusBadge"
-import BuildingIcon from "@material-ui/icons/Build"
+import BuildingIcon from "@mui/icons-material/Build"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { RocketIcon } from "components/Icons/RocketIcon"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import Tooltip from "@material-ui/core/Tooltip"
+import Tooltip from "@mui/material/Tooltip"
 import { Link as RouterLink } from "react-router-dom"
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
 import { VSCodeIcon } from "components/Icons/VSCodeIcon"
-import DownloadIcon from "@material-ui/icons/CloudDownload"
+import DownloadIcon from "@mui/icons-material/CloudDownload"
-import UploadIcon from "@material-ui/icons/CloudUpload"
+import UploadIcon from "@mui/icons-material/CloudUpload"
-import LatencyIcon from "@material-ui/icons/SettingsEthernet"
+import LatencyIcon from "@mui/icons-material/SettingsEthernet"
-import WebTerminalIcon from "@material-ui/icons/WebAsset"
+import WebTerminalIcon from "@mui/icons-material/WebAsset"
 import { TerminalIcon } from "components/Icons/TerminalIcon"
 import dayjs from "dayjs"
-import CollectedIcon from "@material-ui/icons/Compare"
+import CollectedIcon from "@mui/icons-material/Compare"
-import RefreshIcon from "@material-ui/icons/Refresh"
+import RefreshIcon from "@mui/icons-material/Refresh"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
 
 export const bannerHeight = 36
 
@@ -251,7 +251,7 @@ const useStyles = makeStyles((theme) => ({
       height: 16,
     },
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("lg")]: {
       display: "none",
     },
   },
@@ -269,7 +269,7 @@ const useStyles = makeStyles((theme) => ({
     gap: theme.spacing(4),
     borderTop: `1px solid ${theme.palette.divider}`,
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("lg")]: {
       flexDirection: "column",
       gap: theme.spacing(1),
       alignItems: "left",
@@ -281,7 +281,7 @@ const useStyles = makeStyles((theme) => ({
   },
   category: {
     marginRight: theme.spacing(2),
-    color: theme.palette.text.hint,
+    color: theme.palette.text.primary,
   },
   values: {
     display: "flex",
@@ -307,7 +307,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   refresh: {
-    color: theme.palette.text.hint,
+    color: theme.palette.text.primary,
     marginLeft: "auto",
     display: "flex",
     alignItems: "center",

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -1,5 +1,5 @@
-import DialogActions from "@material-ui/core/DialogActions"
+import DialogActions from "@mui/material/DialogActions"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { ReactNode, FC, PropsWithChildren } from "react"
 import {
   Dialog,
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
       maxWidth: theme.spacing(55),
     },
     "& .MuiDialogActions-spacing": {
-      padding: `0 ${theme.spacing(5)}px ${theme.spacing(5)}px`,
+      padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
     },
   },
   dialogContent: {

site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

@@ -1,5 +1,5 @@
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import makeStyles from "@mui/styles/makeStyles"
-import TextField from "@material-ui/core/TextField"
+import TextField from "@mui/material/TextField"
 import { Maybe } from "components/Conditionals/Maybe"
 import { ChangeEvent, useState, PropsWithChildren, FC } from "react"
 import { useTranslation } from "react-i18next"
@@ -43,9 +43,6 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
 
       <TextField
         fullWidth
-        InputLabelProps={{
-          shrink: true,
-        }}
         autoFocus
         className={styles.textField}
         name="confirmation"

site/src/components/Dialogs/Dialog.tsx

@@ -1,7 +1,5 @@
-import MuiDialog, {
+import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog"
-  DialogProps as MuiDialogProps,
+import { makeStyles } from "@mui/styles"
-} from "@material-ui/core/Dialog"
-import { alpha, darken, makeStyles } from "@material-ui/core/styles"
 import * as React from "react"
 import { colors } from "theme/colors"
 import { combineClasses } from "../../utils/combineClasses"
@@ -53,12 +51,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
   return (
     <>
       {onCancel && (
-        <LoadingButton
+        <LoadingButton disabled={confirmLoading} onClick={onCancel} fullWidth>
-          disabled={confirmLoading}
-          onClick={onCancel}
-          variant="outlined"
-          fullWidth
-        >
           {cancelText}
         </LoadingButton>
       )}
@@ -108,7 +101,7 @@ const useButtonStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.success.main,
       color: theme.palette.primary.contrastText,
       "&:hover": {
-        backgroundColor: darken(theme.palette.success.main, 0.3),
+        backgroundColor: theme.palette.success.dark,
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -118,7 +111,7 @@ const useButtonStyles = makeStyles((theme) => ({
       },
       "&.Mui-disabled": {
         backgroundColor: theme.palette.action.disabledBackground,
-        color: alpha(theme.palette.text.disabled, 0.5),
+        color: theme.palette.text.secondary,
       },
     },
 
@@ -126,10 +119,7 @@ const useButtonStyles = makeStyles((theme) => ({
       color: theme.palette.success.main,
       borderColor: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: alpha(
+        backgroundColor: theme.palette.success.dark,
-          theme.palette.success.main,
-          theme.palette.action.hoverOpacity,
-        ),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
@@ -138,7 +128,7 @@ const useButtonStyles = makeStyles((theme) => ({
         },
       },
       "&.Mui-disabled": {
-        color: alpha(theme.palette.text.disabled, 0.5),
+        color: theme.palette.text.secondary,
         borderColor: theme.palette.action.disabled,
       },
     },
@@ -146,16 +136,13 @@ const useButtonStyles = makeStyles((theme) => ({
     "&.MuiButton-text": {
       color: theme.palette.success.main,
       "&:hover": {
-        backgroundColor: alpha(
+        backgroundColor: theme.palette.success.dark,
-          theme.palette.success.main,
-          theme.palette.action.hoverOpacity,
-        ),
         "@media (hover: none)": {
           backgroundColor: "transparent",
         },
       },
       "&.Mui-disabled": {
-        color: alpha(theme.palette.text.disabled, 0.5),
+        color: theme.palette.text.secondary,
       },
     },
   },

site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 import * as TypesGen from "../../../api/typesGenerated"
 import { CodeExample } from "../../CodeExample/CodeExample"

site/src/components/DropdownArrows/DropdownArrows.tsx

@@ -1,7 +1,8 @@
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown"
-import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
+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: {

site/src/components/EditRolesButton/EditRolesButton.tsx

@@ -1,12 +1,12 @@
-import IconButton from "@material-ui/core/IconButton"
+import IconButton from "@mui/material/IconButton"
 import { EditSquare } from "components/Icons/EditSquare"
 import { useRef, useState, FC } from "react"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { useTranslation } from "react-i18next"
-import Popover from "@material-ui/core/Popover"
+import Popover from "@mui/material/Popover"
 import { Stack } from "components/Stack/Stack"
-import Checkbox from "@material-ui/core/Checkbox"
+import Checkbox from "@mui/material/Checkbox"
-import UserIcon from "@material-ui/icons/PersonOutline"
+import UserIcon from "@mui/icons-material/PersonOutline"
 import { Role } from "api/typesGenerated"
 
 const Option: React.FC<{
@@ -24,7 +24,6 @@ const Option: React.FC<{
         <Checkbox
           id={name}
           size="small"
-          color="primary"
           className={styles.checkbox}
           value={value}
           checked={isChecked}

site/src/components/EmptyState/EmptyState.tsx

@@ -1,6 +1,6 @@
-import Box from "@material-ui/core/Box"
+import Box from "@mui/material/Box"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Typography from "@material-ui/core/Typography"
+import Typography from "@mui/material/Typography"
 import { FC, ReactNode } from "react"
 import { combineClasses } from "../../utils/combineClasses"
 

site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx

@@ -1,9 +1,9 @@
-import IconButton from "@material-ui/core/IconButton"
+import IconButton from "@mui/material/IconButton"
 import Snackbar, {
   SnackbarProps as MuiSnackbarProps,
-} from "@material-ui/core/Snackbar"
+} from "@mui/material/Snackbar"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import CloseIcon from "@material-ui/icons/Close"
+import CloseIcon from "@mui/icons-material/Close"
 import { FC } from "react"
 import { combineClasses } from "../../utils/combineClasses"
 
@@ -42,7 +42,11 @@ export const EnterpriseSnackbar: FC<
       action={
         <div className={styles.actionWrapper}>
           {action}
-          <IconButton onClick={onClose} className={styles.iconButton}>
+          <IconButton
+            onClick={onClose}
+            className={styles.iconButton}
+            size="large"
+          >
             <CloseIcon className={styles.closeIcon} aria-label="close" />
           </IconButton>
         </div>

site/src/components/Expander/Expander.tsx

@@ -1,11 +1,11 @@
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import makeStyles from "@mui/styles/makeStyles"
 import {
   CloseDropdown,
   OpenDropdown,
 } from "components/DropdownArrows/DropdownArrows"
 import { PropsWithChildren, FC } from "react"
-import Collapse from "@material-ui/core/Collapse"
+import Collapse from "@mui/material/Collapse"
 import { useTranslation } from "react-i18next"
 import { combineClasses } from "utils/combineClasses"
 
@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
   },
   collapseLink: {
-    marginTop: `${theme.spacing(2)}px`,
+    marginTop: theme.spacing(2),
   },
   text: {
     display: "flex",

site/src/components/FileUpload/FileUpload.tsx

@@ -1,13 +1,13 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { Stack } from "components/Stack/Stack"
 import { FC, DragEvent, useRef, ReactNode } from "react"
-import UploadIcon from "@material-ui/icons/CloudUploadOutlined"
+import UploadIcon from "@mui/icons-material/CloudUploadOutlined"
 import { useClickable } from "hooks/useClickable"
-import CircularProgress from "@material-ui/core/CircularProgress"
+import CircularProgress from "@mui/material/CircularProgress"
 import { combineClasses } from "utils/combineClasses"
-import IconButton from "@material-ui/core/IconButton"
+import IconButton from "@mui/material/IconButton"
-import RemoveIcon from "@material-ui/icons/DeleteOutline"
+import RemoveIcon from "@mui/icons-material/DeleteOutline"
-import FileIcon from "@material-ui/icons/FolderOutlined"
+import FileIcon from "@mui/icons-material/FolderOutlined"
 
 const useFileDrop = (
   callback: (file: File) => void,

site/src/components/Form/Form.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import {
   FormFooterProps as BaseFormFooterProps,
   FormFooter as BaseFormFooter,
@@ -99,7 +99,11 @@ export const FormSection: FC<
 export const FormFields: FC<PropsWithChildren> = ({ children }) => {
   const styles = useStyles()
   return (
-    <Stack direction="column" className={styles.formSectionFields}>
+    <Stack
+      direction="column"
+      spacing={2.5}
+      className={styles.formSectionFields}
+    >
       {children}
     </Stack>
   )
@@ -122,7 +126,7 @@ const useStyles = makeStyles((theme) => ({
     gap: ({ direction }: FormContextValue = {}) =>
       direction === "horizontal" ? theme.spacing(10) : theme.spacing(5),
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       gap: theme.spacing(8),
     },
   },
@@ -135,7 +139,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: ({ direction }: FormContextValue = {}) =>
       direction === "horizontal" ? "row" : "column",
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       gap: theme.spacing(2),
     },
@@ -150,7 +154,7 @@ const useStyles = makeStyles((theme) => ({
       direction === "horizontal" ? "sticky" : undefined,
     top: theme.spacing(3),
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       width: "100%",
       position: "initial",
     },
@@ -180,7 +184,7 @@ const useFormFooterStyles = makeStyles((theme) => ({
   button: {
     minWidth: theme.spacing(23),
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       width: "100%",
     },
   },
@@ -191,7 +195,7 @@ const useFormFooterStyles = makeStyles((theme) => ({
     flexDirection: "row-reverse",
     gap: theme.spacing(2),
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       gap: theme.spacing(1),
     },

site/src/components/FormCloseButton/FormCloseButton.stories.tsx

@@ -1,17 +0,0 @@
-import { Story } from "@storybook/react"
-import { FormCloseButton, FormCloseButtonProps } from "./FormCloseButton"
-
-export default {
-  title: "components/FormCloseButton",
-  component: FormCloseButton,
-  argTypes: {
-    onClose: { action: "onClose" },
-  },
-}
-
-const Template: Story<FormCloseButtonProps> = (args) => (
-  <FormCloseButton {...args} />
-)
-
-export const Example = Template.bind({})
-Example.args = {}

site/src/components/FormCloseButton/FormCloseButton.test.tsx

@@ -1,69 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react"
-import { FormCloseButton } from "./FormCloseButton"
-
-describe("FormCloseButton", () => {
-  it("renders", async () => {
-    // When
-    render(
-      <FormCloseButton
-        onClose={() => {
-          return
-        }}
-      />,
-    )
-
-    // Then
-    await screen.findByText("ESC")
-  })
-
-  it("calls onClose when clicked", async () => {
-    // Given
-    const onClose = jest.fn()
-
-    // When
-    render(<FormCloseButton onClose={onClose} />)
-
-    // Then
-    const element = await screen.findByText("ESC")
-
-    // When
-    fireEvent.click(element)
-
-    // Then
-    expect(onClose).toBeCalledTimes(1)
-  })
-
-  it("calls onClose when escape is pressed", async () => {
-    // Given
-    const onClose = jest.fn()
-
-    // When
-    render(<FormCloseButton onClose={onClose} />)
-
-    // Then
-    const element = await screen.findByText("ESC")
-
-    // When
-    fireEvent.keyDown(element, { key: "Escape", code: "Esc", charCode: 27 })
-
-    // Then
-    expect(onClose).toBeCalledTimes(1)
-  })
-
-  it("doesn't call onClose if another key is pressed", async () => {
-    // Given
-    const onClose = jest.fn()
-
-    // When
-    render(<FormCloseButton onClose={onClose} />)
-
-    // Then
-    const element = await screen.findByText("ESC")
-
-    // When
-    fireEvent.keyDown(element, { key: "Enter", code: "Enter", charCode: 13 })
-
-    // Then
-    expect(onClose).toBeCalledTimes(0)
-  })
-})

site/src/components/FormCloseButton/FormCloseButton.tsx

@@ -1,62 +0,0 @@
-import IconButton from "@material-ui/core/IconButton"
-import { makeStyles } from "@material-ui/core/styles"
-import Typography from "@material-ui/core/Typography"
-import { useEffect, FC, PropsWithChildren } from "react"
-import { CloseIcon } from "../Icons/CloseIcon"
-
-export interface FormCloseButtonProps {
-  onClose: () => void
-}
-
-export const FormCloseButton: FC<PropsWithChildren<FormCloseButtonProps>> = ({
-  onClose,
-}) => {
-  const styles = useStyles()
-
-  useEffect(() => {
-    const handleKeyPress = (event: KeyboardEvent) => {
-      if (event.key === "Escape") {
-        onClose()
-      }
-    }
-
-    document.body.addEventListener("keydown", handleKeyPress, false)
-
-    return () => {
-      document.body.removeEventListener("keydown", handleKeyPress, false)
-    }
-  }, [onClose])
-
-  return (
-    <IconButton className={styles.closeButton} onClick={onClose} size="medium">
-      <CloseIcon />
-      <Typography variant="caption" className={styles.label}>
-        ESC
-      </Typography>
-    </IconButton>
-  )
-}
-
-const useStyles = makeStyles((theme) => ({
-  closeButton: {
-    position: "fixed",
-    top: theme.spacing(3),
-    right: theme.spacing(6),
-    opacity: 0.5,
-    color: theme.palette.text.primary,
-    "&:hover": {
-      opacity: 1,
-    },
-
-    [theme.breakpoints.down("sm")]: {
-      top: theme.spacing(1),
-      right: theme.spacing(1),
-    },
-  },
-  label: {
-    position: "absolute",
-    left: "50%",
-    top: "100%",
-    transform: "translate(-50%, 50%)",
-  },
-}))

site/src/components/FormFooter/FormFooter.tsx

@@ -1,6 +1,6 @@
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import { ClassNameMap } from "@material-ui/core/styles/withStyles"
+import { ClassNameMap } from "@mui/styles/withStyles"
 import { FC } from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 
@@ -28,6 +28,7 @@ export const FormFooter: FC<FormFooterProps> = ({
   return (
     <div className={styles.footer}>
       <LoadingButton
+        size="large"
         tabIndex={0}
         loading={isLoading}
         className={styles.button}
@@ -39,10 +40,10 @@ export const FormFooter: FC<FormFooterProps> = ({
         {submitLabel}
       </LoadingButton>
       <Button
+        size="large"
         type="button"
         className={styles.button}
         onClick={onCancel}
-        variant="outlined"
         tabIndex={0}
       >
         {Language.cancelLabel}

site/src/components/FullPageForm/FullPageForm.stories.tsx

@@ -1,4 +1,4 @@
-import TextField from "@material-ui/core/TextField"
+import TextField from "@mui/material/TextField"
 import { action } from "@storybook/addon-actions"
 import { ComponentMeta, Story } from "@storybook/react"
 import { FormFooter } from "../FormFooter/FormFooter"
@@ -18,8 +18,8 @@ const Template: Story<FullPageFormProps> = (args) => (
       }}
     >
       <Stack>
-        <TextField fullWidth variant="outlined" label="Field 1" name="field1" />
+        <TextField fullWidth label="Field 1" name="field1" />
-        <TextField fullWidth variant="outlined" label="Field 2" name="field2" />
+        <TextField fullWidth label="Field 2" name="field2" />
         <FormFooter isLoading={false} onCancel={action("cancel")} />
       </Stack>
     </form>

site/src/components/FullPageForm/FullPageForm.tsx

@@ -5,7 +5,7 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 
 export interface FullPageFormProps {
   title: string
@@ -33,6 +33,6 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
 
 const useStyles = makeStyles((theme) => ({
   pageHeader: {
-    paddingBottom: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
   },
 }))

site/src/components/FullPageForm/FullPageHorizontalForm.tsx

@@ -5,7 +5,7 @@ import {
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
 
 export interface FullPageHorizontalFormProps {
   title: string
@@ -21,7 +21,7 @@ export const FullPageHorizontalForm: FC<
       <PageHeader
         actions={
           onCancel && (
-            <Button variant="outlined" size="small" onClick={onCancel}>
+            <Button size="small" onClick={onCancel}>
               Cancel
             </Button>
           )

site/src/components/GitAuth/GitAuth.tsx

@@ -1,15 +1,14 @@
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import FormHelperText from "@material-ui/core/FormHelperText"
+import FormHelperText from "@mui/material/FormHelperText"
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { SvgIconProps } from "@mui/material/SvgIcon"
-import { SvgIconProps } from "@material-ui/core/SvgIcon"
+import Tooltip from "@mui/material/Tooltip"
-import Tooltip from "@material-ui/core/Tooltip"
+import GitHub from "@mui/icons-material/GitHub"
-import GitHub from "@material-ui/icons/GitHub"
 import * as TypesGen from "api/typesGenerated"
 import { AzureDevOpsIcon } from "components/Icons/AzureDevOpsIcon"
 import { BitbucketIcon } from "components/Icons/BitbucketIcon"
 import { GitlabIcon } from "components/Icons/GitlabIcon"
-import { Typography } from "components/Typography/Typography"
 import { FC } from "react"
+import { makeStyles } from "@mui/styles"
 
 export interface GitAuthProps {
   type: TypesGen.GitProvider
@@ -41,7 +40,7 @@ export const GitAuth: FC<GitAuthProps> = ({
       break
     case "github":
       prettyName = "GitHub"
-      Icon = GitHub
+      Icon = GitHub as (props: SvgIconProps) => JSX.Element
       break
     case "gitlab":
       prettyName = "GitLab"
@@ -58,9 +57,15 @@ export const GitAuth: FC<GitAuthProps> = ({
       }
     >
       <div>
-        <a
+        <Button
           href={authenticateURL}
-          className={styles.link}
+          variant="contained"
+          size="large"
+          startIcon={<Icon />}
+          disabled={authenticated}
+          className={styles.button}
+          color={error ? "error" : undefined}
+          fullWidth
           onClick={(event) => {
             event.preventDefault()
             // If the user is already authenticated, we don't want to redirect them
@@ -70,46 +75,19 @@ export const GitAuth: FC<GitAuthProps> = ({
             window.open(authenticateURL, "_blank", "width=900,height=600")
           }}
         >
-          <Button className={styles.button} disabled={authenticated} fullWidth>
+          {authenticated
-            <div className={styles.root}>
+            ? `You're authenticated with ${prettyName}!`
-              <Icon className={styles.icon} />
+            : `Click to login with ${prettyName}!`}
-              <Typography variant="body2">
+        </Button>
-                {authenticated
+
-                  ? `You're authenticated with ${prettyName}!`
-                  : `Click to login with ${prettyName}!`}
-              </Typography>
-            </div>
-          </Button>
-        </a>
         {error && <FormHelperText error>{error}</FormHelperText>}
       </div>
     </Tooltip>
   )
 }
 
-const useStyles = makeStyles<
+const useStyles = makeStyles(() => ({
-  Theme,
-  {
-    error: boolean
-  }
->((theme) => ({
-  link: {
-    textDecoration: "none",
-  },
-  root: {
-    padding: 4,
-    display: "flex",
-    gap: 12,
-    alignItems: "center",
-    textAlign: "left",
-  },
   button: {
-    height: "unset",
+    height: 52,
-    border: ({ error }) =>
-      error ? `1px solid ${theme.palette.error.main}` : "unset",
-  },
-  icon: {
-    width: 32,
-    height: 32,
   },
 }))

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { useCallback, useState, FC } from "react"
 import { useCustomEvent } from "../../hooks/events"
 import { CustomEventListener } from "../../utils/events"

site/src/components/GroupAvatar/GroupAvatar.tsx

@@ -1,7 +1,7 @@
 import { Avatar } from "components/Avatar/Avatar"
-import Badge from "@material-ui/core/Badge"
+import Badge from "@mui/material/Badge"
-import { withStyles } from "@material-ui/core/styles"
+import { withStyles } from "@mui/styles"
-import Group from "@material-ui/icons/Group"
+import Group from "@mui/icons-material/Group"
 import { FC } from "react"
 
 const StyledBadge = withStyles((theme) => ({

site/src/components/IconField/IconField.tsx

@@ -1,15 +1,16 @@
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
+import InputAdornment from "@mui/material/InputAdornment"
-import Popover from "@material-ui/core/Popover"
+import Popover from "@mui/material/Popover"
-import TextField from "@material-ui/core/TextField"
+import TextField from "@mui/material/TextField"
 import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
 import { useRef, FC, useState } from "react"
 import Picker from "@emoji-mart/react"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { colors } from "theme/colors"
 import { useTranslation } from "react-i18next"
 import data from "@emoji-mart/data/sets/14/twitter.json"
 import { IconFieldProps } from "./types"
+import { Stack } from "components/Stack/Stack"
 
 const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   if (
@@ -26,12 +27,11 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
   const hasIcon = textFieldProps.value && textFieldProps.value !== ""
 
   return (
-    <div className={styles.iconField}>
+    <Stack spacing={1}>
       <TextField
         {...textFieldProps}
         fullWidth
         label={t("iconLabel")}
-        variant="outlined"
         InputProps={{
           endAdornment: hasIcon ? (
             <InputAdornment position="end" className={styles.adornment}>
@@ -51,8 +51,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        variant="outlined"
-        size="small"
         endIcon={<OpenDropdown />}
         onClick={() => {
           setIsEmojiPickerOpen((v) => !v)
@@ -83,7 +81,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
           }}
         />
       </Popover>
-    </div>
+    </Stack>
   )
 }
 
@@ -106,9 +104,6 @@ const useStyles = makeStyles((theme) => ({
       maxWidth: "100%",
     },
   },
-  iconField: {
-    paddingBottom: theme.spacing(0.5),
-  },
 }))
 
 export default IconField

site/src/components/IconField/types.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "@material-ui/core/TextField"
+import { TextFieldProps } from "@mui/material/TextField"
 
 export type IconFieldProps = TextFieldProps & {
   onPickEmoji: (value: string) => void

site/src/components/Icons/AzureDevOpsIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const AzureDevOpsIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 111 110">

site/src/components/Icons/BitbucketIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const BitbucketIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 501 450">

site/src/components/Icons/BuildingIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const BuildingIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">

site/src/components/Icons/CloseIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const CloseIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const CloseIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 31 31">
     <path
       d="M29.5 1.5l-28 28M29.5 29.5l-28-28"

site/src/components/Icons/CoderIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 /**
  * CoderIcon represents the cloud with brackets Coder brand icon. It does not

site/src/components/Icons/DockerIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const DockerIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 32 32">

site/src/components/Icons/EditSquare.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const EditSquare = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 48 48">

site/src/components/Icons/ErrorIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const ErrorIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">

site/src/components/Icons/FileCopyIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const FileCopyIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const FileCopyIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <path
       d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"

site/src/components/Icons/GitIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const GitIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const GitIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 96 96">
     <path d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z" />
   </SvgIcon>

site/src/components/Icons/GitlabIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const GitlabIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 194 186">

site/src/components/Icons/MarkdownIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const MarkdownIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 32 32">

site/src/components/Icons/RocketIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const RocketIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const RocketIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 24 24">
     <path d="M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87l-1.13.75c-.56.38-.89 1-.89 1.67V22l3.69-1.48zM20 22v-5.93c0-.67-.33-1.29-.89-1.66l-1.13-.75c-.15 2.69-1.2 5.64-1.67 6.87L20 22z" />
   </SvgIcon>

site/src/components/Icons/TerminalIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const TerminalIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const TerminalIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 24 24">
     <path d="M20 4H4c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H4V8h16v10zm-2-1h-6v-2h6v2zM7.5 17l-1.41-1.41L8.67 13l-2.59-2.59L7.5 9l4 4-4 4z" />
   </SvgIcon>

site/src/components/Icons/TerraformIcon.tsx

@@ -1,4 +1,4 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
 export const TerraformIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 32 32">

site/src/components/Icons/UsersOutlinedIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const UsersOutlinedIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const UsersOutlinedIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <svg
       width="20"

site/src/components/Icons/VSCodeIcon.tsx

@@ -1,6 +1,6 @@
-import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon"
 
-export const VSCodeIcon: typeof SvgIcon = (props: SvgIconProps) => (
+export const VSCodeIcon = (props: SvgIconProps) => (
   <SvgIcon {...props} viewBox="0 0 100 100">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
       <mask

site/src/components/LastUsed/LastUsed.tsx

@@ -1,9 +1,10 @@
-import { makeStyles, Theme, useTheme } from "@material-ui/core/styles"
+import { makeStyles, useTheme } from "@mui/styles"
 import { FC } from "react"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { colors } from "theme/colors"
 import { Stack } from "components/Stack/Stack"
+import { Theme } from "@mui/material/styles"
 
 dayjs.extend(relativeTime)
 

site/src/components/LicenseBanner/LicenseBannerView.tsx

@@ -1,4 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
+import Link from "@mui/material/Link"
+import { makeStyles } from "@mui/styles"
 import { Expander } from "components/Expander/Expander"
 import { Pill } from "components/Pill/Pill"
 import { useState } from "react"
@@ -35,9 +36,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
         <div className={styles.leftContent}>
           <span>{messages[0]}</span>
           &nbsp;
-          <a href="mailto:sales@coder.com" className={styles.link}>
+          <Link color="white" fontWeight="medium" href="mailto:sales@coder.com">
             {Language.upgrade}
-          </a>
+          </Link>
         </div>
       </div>
     )
@@ -53,9 +54,13 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
           <div>
             {Language.exceeded}
             &nbsp;
-            <a href="mailto:sales@coder.com" className={styles.link}>
+            <Link
+              color="white"
+              fontWeight="medium"
+              href="mailto:sales@coder.com"
+            >
               {Language.upgrade}
-            </a>
+            </Link>
           </div>
           <Expander expanded={showDetails} setExpanded={setShowDetails}>
             <ul className={styles.list}>
@@ -74,6 +79,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
 
 const useStyles = makeStyles((theme) => ({
   container: {
+    ...theme.typography.body2,
     padding: theme.spacing(1.5),
     backgroundColor: theme.palette.warning.main,
     display: "flex",
@@ -90,11 +96,6 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginLeft: theme.spacing(1),
   },
-  link: {
-    color: "inherit",
-    textDecoration: "none",
-    fontWeight: 600,
-  },
   list: {
     padding: theme.spacing(1),
     margin: 0,

site/src/components/LicenseCard/LicenseCard.tsx

@@ -1,7 +1,7 @@
-import Box from "@material-ui/core/Box"
+import Box from "@mui/material/Box"
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import Paper from "@material-ui/core/Paper"
+import Paper from "@mui/material/Paper"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { License } from "api/typesGenerated"
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"
 import { Stack } from "components/Stack/Stack"
@@ -30,12 +30,7 @@ export const LicenseCard = ({
   >(undefined)
 
   return (
-    <Paper
+    <Paper key={license.id} elevation={2} className={styles.licenseCard}>
-      variant="outlined"
-      key={license.id}
-      elevation={2}
-      className={styles.licenseCard}
-    >
       <ConfirmDialog
         type="info"
         hideCancel={false}
@@ -119,6 +114,7 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 600,
   },
   licenseCard: {
+    ...theme.typography.body2,
     padding: theme.spacing(2),
   },
   cardContent: {
@@ -130,7 +126,7 @@ const useStyles = makeStyles((theme) => ({
   },
   accountType: {
     fontWeight: 600,
-    fontSize: theme.typography.h4.fontSize,
+    fontSize: 24,
     justifyContent: "center",
     alignItems: "center",
     textTransform: "capitalize",

site/src/components/Loader/FullScreenLoader.test.tsx

@@ -1,13 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import { FullScreenLoader } from "./FullScreenLoader"
-
-describe("FullScreenLoader", () => {
-  it("renders", async () => {
-    // When
-    render(<FullScreenLoader />)
-
-    // Then
-    const element = await screen.findByRole("progressbar")
-    expect(element).toBeDefined()
-  })
-})

site/src/components/Loader/FullScreenLoader.tsx

@@ -1,5 +1,5 @@
-import CircularProgress from "@material-ui/core/CircularProgress"
+import CircularProgress from "@mui/material/CircularProgress"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 
 export const useStyles = makeStyles((theme) => ({

site/src/components/Loader/Loader.tsx

@@ -1,5 +1,5 @@
-import Box from "@material-ui/core/Box"
+import Box from "@mui/material/Box"
-import CircularProgress from "@material-ui/core/CircularProgress"
+import CircularProgress from "@mui/material/CircularProgress"
 import { FC } from "react"
 
 export const Loader: FC<React.PropsWithChildren<{ size?: number }>> = ({

site/src/components/LoadingButton/LoadingButton.test.tsx

@@ -1,22 +0,0 @@
-import { render, screen } from "@testing-library/react"
-import { LoadingButton } from "./LoadingButton"
-
-describe("LoadingButton", () => {
-  it("renders", async () => {
-    // When
-    render(<LoadingButton>Sign In</LoadingButton>)
-
-    // Then
-    const element = await screen.findByText("Sign In")
-    expect(element).toBeDefined()
-  })
-
-  it("shows spinner if loading is set to true", async () => {
-    // When
-    render(<LoadingButton loading>Sign in</LoadingButton>)
-
-    // Then
-    const spinnerElement = await screen.findByRole("progressbar")
-    expect(spinnerElement).toBeDefined()
-  })
-})

site/src/components/LoadingButton/LoadingButton.tsx

@@ -1,7 +1,7 @@
-import Button, { ButtonProps } from "@material-ui/core/Button"
+import Button, { ButtonProps } from "@mui/material/Button"
-import CircularProgress from "@material-ui/core/CircularProgress"
+import CircularProgress from "@mui/material/CircularProgress"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import { Theme } from "@material-ui/core/styles/createTheme"
+import { Theme } from "@mui/material/styles"
 import { FC } from "react"
 
 export interface LoadingButtonProps extends ButtonProps {

site/src/components/Logs/Logs.tsx

@@ -1,10 +1,11 @@
-import { makeStyles, Theme } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { LogLevel } from "api/typesGenerated"
 import dayjs from "dayjs"
 import { FC, useMemo } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../utils/combineClasses"
 import AnsiToHTML from "ansi-to-html"
+import { Theme } from "@mui/material/styles"
 
 export interface Line {
   time: string

site/src/components/Margins/Margins.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import {

site/src/components/Markdown/Markdown.tsx

@@ -1,11 +1,11 @@
-import Link from "@material-ui/core/Link"
+import Link from "@mui/material/Link"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import Table from "@material-ui/core/Table"
+import Table from "@mui/material/Table"
-import TableBody from "@material-ui/core/TableBody"
+import TableBody from "@mui/material/TableBody"
-import TableCell from "@material-ui/core/TableCell"
+import TableCell from "@mui/material/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
+import TableContainer from "@mui/material/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
+import TableHead from "@mui/material/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import TableRow from "@mui/material/TableRow"
 import { FC, memo } from "react"
 import ReactMarkdown from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"

site/src/components/MultiTextField/MultiTextField.tsx

@@ -1,6 +1,6 @@
-import Chip from "@material-ui/core/Chip"
+import Chip from "@mui/material/Chip"
-import FormHelperText from "@material-ui/core/FormHelperText"
+import FormHelperText from "@mui/material/FormHelperText"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 
 export type MultiTextFieldProps = {

site/src/components/NavbarView/NavbarView.tsx

@@ -1,9 +1,9 @@
-import Drawer from "@material-ui/core/Drawer"
+import Drawer from "@mui/material/Drawer"
-import IconButton from "@material-ui/core/IconButton"
+import IconButton from "@mui/material/IconButton"
-import List from "@material-ui/core/List"
+import List from "@mui/material/List"
-import ListItem from "@material-ui/core/ListItem"
+import ListItem from "@mui/material/ListItem"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
-import MenuIcon from "@material-ui/icons/Menu"
+import MenuIcon from "@mui/icons-material/Menu"
 import { CoderIcon } from "components/Icons/CoderIcon"
 import { useState } from "react"
 import { NavLink, useLocation } from "react-router-dom"
@@ -104,6 +104,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
           onClick={() => {
             setIsDrawerOpen(true)
           }}
+          size="large"
         >
           <MenuIcon />
         </IconButton>
@@ -231,7 +232,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flex: 1,
     fontSize: 16,
-    padding: `${theme.spacing(1.5)}px ${theme.spacing(2)}px`,
+    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
     textDecoration: "none",
     transition: "background-color 0.15s ease-in-out",
 
@@ -247,7 +248,7 @@ const useStyles = makeStyles((theme) => ({
 
     [theme.breakpoints.up("md")]: {
       height: navHeight,
-      padding: `0 ${theme.spacing(3)}px`,
+      padding: `0 ${theme.spacing(3)}`,
     },
   },
 }))

site/src/components/PageHeader/FullWidthPageHeader.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { FC, PropsWithChildren } from "react"
 
 export const FullWidthPageHeader: FC<PropsWithChildren> = ({ children }) => {
@@ -28,6 +28,7 @@ export const PageHeaderSubtitle: FC<PropsWithChildren> = ({ children }) => {
 
 const useStyles = makeStyles((theme) => ({
   header: {
+    ...theme.typography.body2,
     padding: theme.spacing(3),
     background: theme.palette.background.paper,
     borderBottom: `1px solid ${theme.palette.divider}`,
@@ -39,17 +40,17 @@ const useStyles = makeStyles((theme) => ({
     zIndex: 10,
     flexWrap: "wrap",
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("lg")]: {
       position: "unset",
       alignItems: "flex-start",
     },
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
     },
   },
   actions: {
     marginLeft: "auto",
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       marginLeft: "unset",
     },
   },
@@ -57,11 +58,11 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 18,
     fontWeight: 500,
     margin: 0,
+    lineHeight: "24px",
   },
   subtitle: {
     fontSize: 14,
     color: theme.palette.text.secondary,
-    marginTop: theme.spacing(0.25),
     display: "block",
   },
 }))

site/src/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 import { PropsWithChildren, FC } from "react"
 import { combineClasses } from "../../utils/combineClasses"
 import { Stack } from "../Stack/Stack"
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: theme.spacing(6),
     gap: theme.spacing(4),
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       flexDirection: "column",
       alignItems: "flex-start",
     },
@@ -90,7 +90,7 @@ const useStyles = makeStyles((theme) => ({
   actions: {
     marginLeft: "auto",
 
-    [theme.breakpoints.down("sm")]: {
+    [theme.breakpoints.down("md")]: {
       marginTop: theme.spacing(3),
       marginLeft: "initial",
       width: "100%",

site/src/components/PaginationWidget/PageButton.tsx

@@ -1,5 +1,5 @@
-import Button from "@material-ui/core/Button"
+import Button from "@mui/material/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@mui/styles"
 
 interface PageButtonProps {
   activePage?: number
@@ -21,7 +21,6 @@ export const PageButton = ({
   const styles = useStyles()
   return (
     <Button
-      variant="outlined"
       className={
         activePage === page
           ? `${styles.pageButton} ${styles.activePageButton}`