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

2025-07-15 22:20:27 +00:00 · 2023-05-10 16:42:40 -03:00
parent fb86ac2608
commit 816c37dd0d
258 changed files with 1994 additions and 2485 deletions
--- a/site/.eslintrc.yaml
+++ b/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"
-          message:
-            "Use path imports to avoid pulling in unused modules. See:
-            https://material-ui.com/guides/minimizing-bundle-size/"
-        - name: "@material-ui/core/Avatar"
+        - name: "@mui/material/Avatar"
          message:
            "You should use the Avatar component provided on
            components/Avatar/Avatar"
--- a/site/.storybook/preview.jsx
+++ b/site/.storybook/preview.jsx
@ -1,5 +1,5 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import CssBaseline from "@mui/material/CssBaseline"
+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) => (
+    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={dark}>
        <CssBaseline />
        <Story />
      </ThemeProvider>
+    </StyledEngineProvider>
  ),
  (Story) => {
    return (
--- a/site/mui.d.ts
+++ b/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
+  }
+}
--- a/site/package.json
+++ b/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",
--- a/site/src/app.tsx
+++ b/site/src/app.tsx
@ -1,5 +1,4 @@
-import CssBaseline from "@material-ui/core/CssBaseline"
-import ThemeProvider from "@material-ui/styles/ThemeProvider"
+import CssBaseline from "@mui/material/CssBaseline"
 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,8 +24,9 @@ const queryClient = new QueryClient({
 export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
  return (
    <HelmetProvider>
+      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={dark}>
-        <CssBaseline />
+          <CssBaseline enableColorScheme />
          <ErrorBoundary>
            <QueryClientProvider client={queryClient}>
              <AuthProvider>
@ -35,6 +36,7 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
            </QueryClientProvider>
          </ErrorBoundary>
        </ThemeProvider>
+      </StyledEngineProvider>
    </HelmetProvider>
  )
 }
--- a/site/src/components/AlertBanner/AlertBanner.stories.tsx
+++ b/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",
--- a/site/src/components/AlertBanner/AlertBanner.tsx
+++ b/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",
-      marginRight: `${theme.spacing(1)}px`,
+      marginTop: props.hasDetail ? theme.spacing(1) : "inherit",
+      marginRight: theme.spacing(1),
    },
  }),

--- a/site/src/components/AlertBanner/AlertBannerCtas.tsx
+++ b/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 RefreshIcon from "@material-ui/icons/Refresh"
+import Button from "@mui/material/Button"
+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
-            size="small"
-            onClick={retry}
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-          >
+          <Button size="small" onClick={retry} startIcon={<RefreshIcon />}>
            {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>
      )}
--- a/site/src/components/AlertBanner/alertTypes.ts
+++ b/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
--- a/site/src/components/AlertBanner/severityConstants.tsx
+++ b/site/src/components/AlertBanner/severityConstants.tsx
@ -1,6 +1,6 @@
-import ReportProblemOutlinedIcon from "@material-ui/icons/ReportProblemOutlined"
-import ErrorOutlineOutlinedIcon from "@material-ui/icons/ErrorOutlineOutlined"
-import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"
+import ReportProblemOutlinedIcon from "@mui/icons-material/ReportProblemOutlined"
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"
 import { colors } from "theme/colors"
 import { Severity } from "./alertTypes"
 import { ReactElement } from "react"
--- a/site/src/components/AppLink/AppLink.tsx
+++ b/site/src/components/AppLink/AppLink.tsx
@ -1,8 +1,8 @@
-import CircularProgress from "@material-ui/core/CircularProgress"
-import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
-import Tooltip from "@material-ui/core/Tooltip"
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
+import CircularProgress from "@mui/material/CircularProgress"
+import Link from "@mui/material/Link"
+import { makeStyles } from "@mui/styles"
+import Tooltip from "@mui/material/Tooltip"
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"
 import { PrimaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
--- a/site/src/components/AppLink/AppPreviewLink.tsx
+++ b/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"
--- a/site/src/components/AppLink/BaseIcon.tsx
+++ b/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 ? (
--- a/site/src/components/AppLink/ShareIcon.tsx
+++ b/site/src/components/AppLink/ShareIcon.tsx
@ -1,8 +1,8 @@
-import PublicOutlinedIcon from "@material-ui/icons/PublicOutlined"
-import GroupOutlinedIcon from "@material-ui/icons/GroupOutlined"
-import LaunchOutlinedIcon from "@material-ui/icons/LaunchOutlined"
+import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined"
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined"
+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 {
--- a/site/src/components/AuditLogRow/AuditLogDescription/AuditLogDescription.tsx
+++ b/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"

--- a/site/src/components/AuditLogRow/AuditLogDescription/BuildAuditDescription.tsx
+++ b/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,
--- a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
+++ b/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"
--- a/site/src/components/AuditLogRow/AuditLogRow.stories.tsx
+++ b/site/src/components/AuditLogRow/AuditLogRow.stories.tsx
@ -1,9 +1,9 @@
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import Table from "@mui/material/Table"
+import TableBody from "@mui/material/TableBody"
+import TableCell from "@mui/material/TableCell"
+import TableContainer from "@mui/material/TableContainer"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
 import { ComponentMeta, Story } from "@storybook/react"
 import {
  MockAuditLog,
--- a/site/src/components/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/components/AuditLogRow/AuditLogRow.tsx
@ -1,6 +1,6 @@
-import Collapse from "@material-ui/core/Collapse"
-import { makeStyles } from "@material-ui/core/styles"
-import TableCell from "@material-ui/core/TableCell"
+import Collapse from "@mui/material/Collapse"
+import { makeStyles } from "@mui/styles"
+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
--- a/site/src/components/Avatar/Avatar.stories.tsx
+++ b/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",
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/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, {
-  AvatarProps as MuiAvatarProps,
-} from "@material-ui/core/Avatar"
-import { makeStyles } from "@material-ui/core/styles"
+import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"
--- a/site/src/components/AvatarData/AvatarData.tsx
+++ b/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%",
-    marginTop: 2,
+    lineHeight: "150%",
    maxWidth: 540,
  },
 }))
--- a/site/src/components/AvatarData/AvatarDataSkeleton.tsx
+++ b/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} />
--- a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx
+++ b/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,
-}
--- a/site/src/components/BorderedMenu/BorderedMenu.tsx
+++ b/site/src/components/BorderedMenu/BorderedMenu.tsx
@ -1,5 +1,5 @@
-import Popover, { PopoverProps } from "@material-ui/core/Popover"
-import { makeStyles } from "@material-ui/core/styles"
+import Popover, { PopoverProps } from "@mui/material/Popover"
+import { makeStyles } from "@mui/styles"
 import { FC, PropsWithChildren } from "react"

 type BorderedMenuVariant = "user-dropdown"
--- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
+++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@ -1,7 +1,6 @@
-import ListItem from "@material-ui/core/ListItem"
-import { makeStyles } from "@material-ui/core/styles"
-import SvgIcon from "@material-ui/core/SvgIcon"
-import CheckIcon from "@material-ui/icons/Check"
+import ListItem from "@mui/material/ListItem"
+import { makeStyles } from "@mui/styles"
+import CheckIcon from "@mui/icons-material/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,
--- a/site/src/components/BuildsTable/BuildAvatar.tsx
+++ b/site/src/components/BuildsTable/BuildAvatar.tsx
@ -1,13 +1,14 @@
-import Badge from "@material-ui/core/Badge"
-import { Theme, useTheme, withStyles } from "@material-ui/core/styles"
+import Badge from "@mui/material/Badge"
+import { useTheme, withStyles } from "@mui/styles"
 import { FC } from "react"
-import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
-import PauseOutlined from "@material-ui/icons/PauseOutlined"
-import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
+import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined"
+import PauseOutlined from "@mui/icons-material/PauseOutlined"
+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
--- a/site/src/components/BuildsTable/BuildRow.tsx
+++ b/site/src/components/BuildsTable/BuildRow.tsx
@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
-import TableCell from "@material-ui/core/TableCell"
+import { makeStyles } from "@mui/styles"
+import TableCell from "@mui/material/TableCell"
 import { WorkspaceBuild } from "api/typesGenerated"
 import { Stack } from "components/Stack/Stack"
 import { TimelineEntry } from "components/Timeline/TimelineEntry"
--- a/site/src/components/BuildsTable/BuildsTable.tsx
+++ b/site/src/components/BuildsTable/BuildsTable.tsx
@ -1,9 +1,9 @@
-import Box from "@material-ui/core/Box"
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableRow from "@material-ui/core/TableRow"
+import Box from "@mui/material/Box"
+import Table from "@mui/material/Table"
+import TableBody from "@mui/material/TableBody"
+import TableCell from "@mui/material/TableCell"
+import TableContainer from "@mui/material/TableContainer"
+import TableRow from "@mui/material/TableRow"
 import { Timeline } from "components/Timeline/Timeline"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
--- a/site/src/components/CodeBlock/CodeBlock.tsx
+++ b/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"
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/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) => ({
-    padding: `
-      ${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
-    `,
+  code: {
+    padding: theme.spacing(0, 1),
    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",
-  }),
+  },
 }))
--- a/site/src/components/CopyButton/CopyButton.tsx
+++ b/site/src/components/CopyButton/CopyButton.tsx
@ -1,7 +1,7 @@
-import IconButton from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
-import Tooltip from "@material-ui/core/Tooltip"
-import Check from "@material-ui/icons/Check"
+import IconButton from "@mui/material/Button"
+import { makeStyles } from "@mui/styles"
+import Tooltip from "@mui/material/Tooltip"
+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} />
--- a/site/src/components/CopyableValue/CopyableValue.tsx
+++ b/site/src/components/CopyableValue/CopyableValue.tsx
@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core/styles"
-import Tooltip from "@material-ui/core/Tooltip"
+import { makeStyles } from "@mui/styles"
+import Tooltip from "@mui/material/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"
 import { FC, HTMLProps } from "react"
--- a/site/src/components/CreateUserForm/CreateUserForm.tsx
+++ b/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} />
--- a/site/src/components/DAUChart/DAUChart.tsx
+++ b/site/src/components/DAUChart/DAUChart.tsx
@ -1,5 +1,5 @@
-import { Theme } from "@material-ui/core/styles"
-import useTheme from "@material-ui/styles/useTheme"
+import { Theme } from "@mui/material/styles"
+import useTheme from "@mui/styles/useTheme"
 import * as TypesGen from "api/typesGenerated"
 import {
  CategoryScale,
--- a/site/src/components/Dashboard/DashboardLayout.tsx
+++ b/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"
--- a/site/src/components/DeploySettingsLayout/Badges.tsx
+++ b/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"
--- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
+++ b/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"
--- a/site/src/components/DeploySettingsLayout/Fieldset.tsx
+++ b/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",
--- a/site/src/components/DeploySettingsLayout/Header.tsx
+++ b/site/src/components/DeploySettingsLayout/Header.tsx
@ -1,6 +1,6 @@
-import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
-import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import Button from "@mui/material/Button"
+import { makeStyles } from "@mui/styles"
+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>
--- a/site/src/components/DeploySettingsLayout/Option.tsx
+++ b/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"
--- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx
+++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx
@ -1,10 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles"
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+import { makeStyles } from "@mui/styles"
+import Table from "@mui/material/Table"
+import TableBody from "@mui/material/TableBody"
+import TableCell from "@mui/material/TableCell"
+import TableContainer from "@mui/material/TableContainer"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
 import { DeploymentOption } from "api/types"
 import {
  OptionDescription,
--- a/site/src/components/DeploySettingsLayout/Sidebar.tsx
+++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@ -1,10 +1,10 @@
-import { makeStyles } from "@material-ui/core/styles"
-import Brush from "@material-ui/icons/Brush"
-import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
-import ApprovalIcon from "@material-ui/icons/VerifiedUserOutlined"
-import LockRounded from "@material-ui/icons/LockOutlined"
-import Globe from "@material-ui/icons/PublicOutlined"
-import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
+import { makeStyles } from "@mui/styles"
+import Brush from "@mui/icons-material/Brush"
+import LaunchOutlined from "@mui/icons-material/LaunchOutlined"
+import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined"
+import LockRounded from "@mui/icons-material/LockOutlined"
+import Globe from "@mui/icons-material/PublicOutlined"
+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"
--- a/site/src/components/DeploymentBanner/DeploymentBannerView.tsx
+++ b/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 { makeStyles } from "@material-ui/core/styles"
+import BuildingIcon from "@mui/icons-material/Build"
+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 UploadIcon from "@material-ui/icons/CloudUpload"
-import LatencyIcon from "@material-ui/icons/SettingsEthernet"
-import WebTerminalIcon from "@material-ui/icons/WebAsset"
+import DownloadIcon from "@mui/icons-material/CloudDownload"
+import UploadIcon from "@mui/icons-material/CloudUpload"
+import LatencyIcon from "@mui/icons-material/SettingsEthernet"
+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 RefreshIcon from "@material-ui/icons/Refresh"
-import Button from "@material-ui/core/Button"
+import CollectedIcon from "@mui/icons-material/Compare"
+import RefreshIcon from "@mui/icons-material/Refresh"
+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",
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@ -1,5 +1,5 @@
-import DialogActions from "@material-ui/core/DialogActions"
-import { makeStyles } from "@material-ui/core/styles"
+import DialogActions from "@mui/material/DialogActions"
+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: {
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@ -1,5 +1,5 @@
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import TextField from "@material-ui/core/TextField"
+import makeStyles from "@mui/styles/makeStyles"
+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"
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@ -1,7 +1,5 @@
-import MuiDialog, {
-  DialogProps as MuiDialogProps,
-} from "@material-ui/core/Dialog"
-import { alpha, darken, makeStyles } from "@material-ui/core/styles"
+import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog"
+import { makeStyles } from "@mui/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
-          disabled={confirmLoading}
-          onClick={onCancel}
-          variant="outlined"
-          fullWidth
-        >
+        <LoadingButton disabled={confirmLoading} onClick={onCancel} 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(
-          theme.palette.success.main,
-          theme.palette.action.hoverOpacity,
-        ),
+        backgroundColor: theme.palette.success.dark,
        "@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(
-          theme.palette.success.main,
-          theme.palette.action.hoverOpacity,
-        ),
+        backgroundColor: theme.palette.success.dark,
        "@media (hover: none)": {
          backgroundColor: "transparent",
        },
      },
      "&.Mui-disabled": {
-        color: alpha(theme.palette.text.disabled, 0.5),
+        color: theme.palette.text.secondary,
      },
    },
  },
--- a/site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.tsx
+++ b/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"
--- a/site/src/components/DropdownArrows/DropdownArrows.tsx
+++ b/site/src/components/DropdownArrows/DropdownArrows.tsx
@ -1,7 +1,8 @@
-import { makeStyles, Theme } from "@material-ui/core/styles"
-import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
-import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
+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: {
--- a/site/src/components/EditRolesButton/EditRolesButton.tsx
+++ b/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 UserIcon from "@material-ui/icons/PersonOutline"
+import Checkbox from "@mui/material/Checkbox"
+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}
--- a/site/src/components/EmptyState/EmptyState.tsx
+++ b/site/src/components/EmptyState/EmptyState.tsx
@ -1,6 +1,6 @@
-import Box from "@material-ui/core/Box"
-import { makeStyles } from "@material-ui/core/styles"
-import Typography from "@material-ui/core/Typography"
+import Box from "@mui/material/Box"
+import { makeStyles } from "@mui/styles"
+import Typography from "@mui/material/Typography"
 import { FC, ReactNode } from "react"
 import { combineClasses } from "../../utils/combineClasses"

--- a/site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
+++ b/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"
-import { makeStyles } from "@material-ui/core/styles"
-import CloseIcon from "@material-ui/icons/Close"
+} from "@mui/material/Snackbar"
+import { makeStyles } from "@mui/styles"
+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>
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@ -1,11 +1,11 @@
-import Link from "@material-ui/core/Link"
-import makeStyles from "@material-ui/core/styles/makeStyles"
+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 "@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",
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/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 RemoveIcon from "@material-ui/icons/DeleteOutline"
-import FileIcon from "@material-ui/icons/FolderOutlined"
+import IconButton from "@mui/material/IconButton"
+import RemoveIcon from "@mui/icons-material/DeleteOutline"
+import FileIcon from "@mui/icons-material/FolderOutlined"

 const useFileDrop = (
  callback: (file: File) => void,
--- a/site/src/components/Form/Form.tsx
+++ b/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),
    },
--- a/site/src/components/FormCloseButton/FormCloseButton.stories.tsx
+++ b/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 = {}
--- a/site/src/components/FormCloseButton/FormCloseButton.test.tsx
+++ b/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)
-  })
-})
--- a/site/src/components/FormCloseButton/FormCloseButton.tsx
+++ b/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%)",
-  },
-}))
--- a/site/src/components/FormFooter/FormFooter.tsx
+++ b/site/src/components/FormFooter/FormFooter.tsx
@ -1,6 +1,6 @@
-import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
-import { ClassNameMap } from "@material-ui/core/styles/withStyles"
+import Button from "@mui/material/Button"
+import { makeStyles } from "@mui/styles"
+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}
--- a/site/src/components/FullPageForm/FullPageForm.stories.tsx
+++ b/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 variant="outlined" label="Field 2" name="field2" />
+        <TextField fullWidth label="Field 1" name="field1" />
+        <TextField fullWidth label="Field 2" name="field2" />
        <FormFooter isLoading={false} onCancel={action("cancel")} />
      </Stack>
    </form>
--- a/site/src/components/FullPageForm/FullPageForm.tsx
+++ b/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),
  },
 }))
--- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
+++ b/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>
          )
--- a/site/src/components/GitAuth/GitAuth.tsx
+++ b/site/src/components/GitAuth/GitAuth.tsx
@ -1,15 +1,14 @@
-import Button from "@material-ui/core/Button"
-import FormHelperText from "@material-ui/core/FormHelperText"
-import { makeStyles, Theme } from "@material-ui/core/styles"
-import { SvgIconProps } from "@material-ui/core/SvgIcon"
-import Tooltip from "@material-ui/core/Tooltip"
-import GitHub from "@material-ui/icons/GitHub"
+import Button from "@mui/material/Button"
+import FormHelperText from "@mui/material/FormHelperText"
+import { SvgIconProps } from "@mui/material/SvgIcon"
+import Tooltip from "@mui/material/Tooltip"
+import GitHub from "@mui/icons-material/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>
-            <div className={styles.root}>
-              <Icon className={styles.icon} />
-              <Typography variant="body2">
          {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<
-  Theme,
-  {
-    error: boolean
-  }
->((theme) => ({
-  link: {
-    textDecoration: "none",
-  },
-  root: {
-    padding: 4,
-    display: "flex",
-    gap: 12,
-    alignItems: "center",
-    textAlign: "left",
-  },
+const useStyles = makeStyles(() => ({
  button: {
-    height: "unset",
-    border: ({ error }) =>
-      error ? `1px solid ${theme.palette.error.main}` : "unset",
-  },
-  icon: {
-    width: 32,
-    height: 32,
+    height: 52,
  },
 }))
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/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"
--- a/site/src/components/GroupAvatar/GroupAvatar.tsx
+++ b/site/src/components/GroupAvatar/GroupAvatar.tsx
@ -1,7 +1,7 @@
 import { Avatar } from "components/Avatar/Avatar"
-import Badge from "@material-ui/core/Badge"
-import { withStyles } from "@material-ui/core/styles"
-import Group from "@material-ui/icons/Group"
+import Badge from "@mui/material/Badge"
+import { withStyles } from "@mui/styles"
+import Group from "@mui/icons-material/Group"
 import { FC } from "react"

 const StyledBadge = withStyles((theme) => ({
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@ -1,15 +1,16 @@
-import Button from "@material-ui/core/Button"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Popover from "@material-ui/core/Popover"
-import TextField from "@material-ui/core/TextField"
+import Button from "@mui/material/Button"
+import InputAdornment from "@mui/material/InputAdornment"
+import Popover from "@mui/material/Popover"
+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
--- a/site/src/components/IconField/types.ts
+++ b/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
--- a/site/src/components/Icons/AzureDevOpsIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/BitbucketIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/BuildingIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/CloseIcon.tsx
+++ b/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"
--- a/site/src/components/Icons/CoderIcon.tsx
+++ b/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
--- a/site/src/components/Icons/DockerIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/EditSquare.tsx
+++ b/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">
--- a/site/src/components/Icons/ErrorIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/FileCopyIcon.tsx
+++ b/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"
--- a/site/src/components/Icons/GitIcon.tsx
+++ b/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>
--- a/site/src/components/Icons/GitlabIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/MarkdownIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/RocketIcon.tsx
+++ b/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>
--- a/site/src/components/Icons/TerminalIcon.tsx
+++ b/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>
--- a/site/src/components/Icons/TerraformIcon.tsx
+++ b/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">
--- a/site/src/components/Icons/UsersOutlinedIcon.tsx
+++ b/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"
--- a/site/src/components/Icons/VSCodeIcon.tsx
+++ b/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
--- a/site/src/components/LastUsed/LastUsed.tsx
+++ b/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)

--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/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,
--- a/site/src/components/LicenseCard/LicenseCard.tsx
+++ b/site/src/components/LicenseCard/LicenseCard.tsx
@ -1,7 +1,7 @@
-import Box from "@material-ui/core/Box"
-import Button from "@material-ui/core/Button"
-import Paper from "@material-ui/core/Paper"
-import { makeStyles } from "@material-ui/core/styles"
+import Box from "@mui/material/Box"
+import Button from "@mui/material/Button"
+import Paper from "@mui/material/Paper"
+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
-      variant="outlined"
-      key={license.id}
-      elevation={2}
-      className={styles.licenseCard}
-    >
+    <Paper 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",
--- a/site/src/components/Loader/FullScreenLoader.test.tsx
+++ b/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()
-  })
-})
--- a/site/src/components/Loader/FullScreenLoader.tsx
+++ b/site/src/components/Loader/FullScreenLoader.tsx
@ -1,5 +1,5 @@
-import CircularProgress from "@material-ui/core/CircularProgress"
-import { makeStyles } from "@material-ui/core/styles"
+import CircularProgress from "@mui/material/CircularProgress"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"

 export const useStyles = makeStyles((theme) => ({
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@ -1,5 +1,5 @@
-import Box from "@material-ui/core/Box"
-import CircularProgress from "@material-ui/core/CircularProgress"
+import Box from "@mui/material/Box"
+import CircularProgress from "@mui/material/CircularProgress"
 import { FC } from "react"

 export const Loader: FC<React.PropsWithChildren<{ size?: number }>> = ({
--- a/site/src/components/LoadingButton/LoadingButton.test.tsx
+++ b/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()
-  })
-})
--- a/site/src/components/LoadingButton/LoadingButton.tsx
+++ b/site/src/components/LoadingButton/LoadingButton.tsx
@ -1,7 +1,7 @@
-import Button, { ButtonProps } from "@material-ui/core/Button"
-import CircularProgress from "@material-ui/core/CircularProgress"
-import { makeStyles } from "@material-ui/core/styles"
-import { Theme } from "@material-ui/core/styles/createTheme"
+import Button, { ButtonProps } from "@mui/material/Button"
+import CircularProgress from "@mui/material/CircularProgress"
+import { makeStyles } from "@mui/styles"
+import { Theme } from "@mui/material/styles"
 import { FC } from "react"

 export interface LoadingButtonProps extends ButtonProps {
--- a/site/src/components/Logs/Logs.tsx
+++ b/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
--- a/site/src/components/Margins/Margins.tsx
+++ b/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 {
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@ -1,11 +1,11 @@
-import Link from "@material-ui/core/Link"
-import { makeStyles } from "@material-ui/core/styles"
-import Table from "@material-ui/core/Table"
-import TableBody from "@material-ui/core/TableBody"
-import TableCell from "@material-ui/core/TableCell"
-import TableContainer from "@material-ui/core/TableContainer"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
+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"
+import TableContainer from "@mui/material/TableContainer"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
 import { FC, memo } from "react"
 import ReactMarkdown from "react-markdown"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
--- a/site/src/components/MultiTextField/MultiTextField.tsx
+++ b/site/src/components/MultiTextField/MultiTextField.tsx
@ -1,6 +1,6 @@
-import Chip from "@material-ui/core/Chip"
-import FormHelperText from "@material-ui/core/FormHelperText"
-import { makeStyles } from "@material-ui/core/styles"
+import Chip from "@mui/material/Chip"
+import FormHelperText from "@mui/material/FormHelperText"
+import { makeStyles } from "@mui/styles"
 import { FC } from "react"

 export type MultiTextFieldProps = {
--- a/site/src/components/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@ -1,9 +1,9 @@
-import Drawer from "@material-ui/core/Drawer"
-import IconButton from "@material-ui/core/IconButton"
-import List from "@material-ui/core/List"
-import ListItem from "@material-ui/core/ListItem"
-import { makeStyles } from "@material-ui/core/styles"
-import MenuIcon from "@material-ui/icons/Menu"
+import Drawer from "@mui/material/Drawer"
+import IconButton from "@mui/material/IconButton"
+import List from "@mui/material/List"
+import ListItem from "@mui/material/ListItem"
+import { makeStyles } from "@mui/styles"
+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)}`,
    },
  },
 }))
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/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",
  },
 }))
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/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%",
--- a/site/src/components/PaginationWidget/PageButton.tsx
+++ b/site/src/components/PaginationWidget/PageButton.tsx
@ -1,5 +1,5 @@
-import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import Button from "@mui/material/Button"
+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}`
--- a/Show More
+++ b/Show More