coder · aslilac · Dec 4, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 22, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -142,6 +142,8 @@ rules:
         - name: "@mui/material/Typography"
           message:
             "You should use the native HTML elements as span, p, h1, h2, h3..."
+        - name: "@mui/material/Box"
+          message: "You should use a <div> instead"
   no-unused-vars: "off"
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn

diff --git a/site/package.json b/site/package.json
@@ -40,7 +40,6 @@
     "@mui/icons-material": "5.14.0",
     "@mui/lab": "5.0.0-alpha.129",
     "@mui/material": "5.14.0",
-    "@mui/styles": "5.14.0",
     "@mui/system": "5.14.0",
     "@mui/utils": "5.14.11",
     "@vitejs/plugin-react": "4.1.0",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/@types/emotion.d.ts b/site/src/@types/emotion.d.ts
@@ -1,8 +1,5 @@
-import type { DefaultTheme as MuiTheme } from "@mui/system";
-import type { NewTheme } from "theme/experimental";
+import type { Theme as MuiTheme } from "@mui/material/styles";
 
 declare module "@emotion/react" {
-  interface Theme extends MuiTheme {
-    experimental: NewTheme;
-  }
+  interface Theme extends MuiTheme {}
 }
diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
@@ -1,14 +1,6 @@
-import type {
-  PaletteColor,
-  PaletteColorOptions,
-  Theme,
-} from "@mui/material/styles";
+import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
 import type { NewTheme } from "theme/experimental";
 
-declare module "@mui/styles/defaultTheme" {
-  interface DefaultTheme extends Theme {}
-}
-
 declare module "@mui/material/styles" {
   interface Theme {
     experimental: NewTheme;

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -48,12 +48,14 @@ export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export const AppProviders = ({
-  children,
-  queryClient = defaultQueryClient,
-}: {
+interface AppProvidersProps {
   children: ReactNode;
   queryClient?: QueryClient;
+}
+
+export const AppProviders: FC<AppProvidersProps> = ({
+  children,
+  queryClient = defaultQueryClient,
 }) => {
   return (
     <HelmetProvider>

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -1,6 +1,3 @@
-import Box from "@mui/material/Box";
-import { Theme } from "@mui/material/styles";
-import useTheme from "@mui/styles/useTheme";
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -22,7 +19,8 @@ import {
   HelpTooltipText,
 } from "components/HelpTooltip/HelpTooltip";
 import dayjs from "dayjs";
-import { FC } from "react";
+import { useTheme } from "@emotion/react";
+import { type FC } from "react";
 import { Line } from "react-chartjs-2";
 import annotationPlugin from "chartjs-plugin-annotation";
 
@@ -42,7 +40,7 @@ ChartJS.register(
 const USER_LIMIT_DISPLAY_THRESHOLD = 60;
 
 export interface ActiveUserChartProps {
-  data: { date: string; amount: number }[];
+  data: Array<{ date: string; amount: number }>;
   interval: "day" | "week";
   userLimit: number | undefined;
 }
@@ -52,7 +50,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
   interval,
   userLimit,
 }) => {
-  const theme: Theme = useTheme();
+  const theme = useTheme();
 
   const labels = data.map((val) => dayjs(val.date).format("YYYY-MM-DD"));
   const chartData = data.map((val) => val.amount);
@@ -137,9 +135,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
   );
 };
 
-export const ActiveUsersTitle = () => {
+export const ActiveUsersTitle: FC = () => {
   return (
-    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+    <div css={{ display: "flex", alignItems: "center", gap: 8 }}>
       Active Users
       <HelpTooltip size="small">
         <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
@@ -148,7 +146,7 @@ export const ActiveUsersTitle = () => {
           considered an active user. e.g. apps, web terminal, SSH
         </HelpTooltipText>
       </HelpTooltip>
-    </Box>
+    </div>
   );
 };
 

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -1,9 +1,15 @@
-import { useState, FC, ReactNode } from "react";
+import {
+  useState,
+  type FC,
+  type ReactNode,
+  type PropsWithChildren,
+} from "react";
 import Collapse from "@mui/material/Collapse";
 // eslint-disable-next-line no-restricted-imports -- It is the base component
-import MuiAlert, { AlertProps as MuiAlertProps } from "@mui/material/Alert";
+import MuiAlert, {
+  type AlertProps as MuiAlertProps,
+} from "@mui/material/Alert";
 import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 
 export type AlertProps = MuiAlertProps & {
   actions?: ReactNode;
@@ -32,7 +38,7 @@ export const Alert: FC<AlertProps> = ({
     <Collapse in>
       <MuiAlert
         {...alertProps}
-        sx={{ textAlign: "left", ...alertProps.sx }}
+        css={{ textAlign: "left" }}
         severity={severity}
         action={
           <>
@@ -62,15 +68,13 @@ export const Alert: FC<AlertProps> = ({
   );
 };
 
-export const AlertDetail = ({ children }: { children: ReactNode }) => {
+export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <Box
-      component="span"
-      color={(theme) => theme.palette.text.secondary}
-      fontSize={13}
+    <span
+      css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
       data-chromatic="ignore"
     >
       {children}
-    </Box>
+    </span>
   );
 };
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -1,9 +1,10 @@
 // This is the only place MuiAvatar can be used
 // eslint-disable-next-line no-restricted-imports -- Read above
-import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
-import { FC, useId } from "react";
+import MuiAvatar, {
+  type AvatarProps as MuiAvatarProps,
+} from "@mui/material/Avatar";
+import { type FC, useId } from "react";
 import { css, type Interpolation, type Theme } from "@emotion/react";
-import { Box } from "@mui/system";
 import { visuallyHidden } from "@mui/utils";
 
 export type AvatarProps = MuiAvatarProps & {
@@ -78,6 +79,8 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
   const hookId = useId();
   const avatarId = `${hookId}-avatar`;
 
+  // We use a `visuallyHidden` element instead of setting `alt` to avoid
+  // splatting the text out on the screen if the image fails to load.
   return (
     <>
       <img
@@ -86,9 +89,9 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
         css={{ maxWidth: "50%" }}
         aria-labelledby={avatarId}
       />
-      <Box id={avatarId} sx={visuallyHidden}>
+      <div id={avatarId} css={{ ...visuallyHidden }}>
         {alt}
-      </Box>
+      </div>
     </>
   );
 };