coder · BrunoQuaresma · Nov 20, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -139,6 +139,9 @@ rules:
           message:
             "You should use the Popover component provided on
             components/Popover/Popover"
+        - name: "@mui/material/Typography"
+          message:
+            "You should use the native HTML elements as span, p, h1, h2, h3..."
   no-unused-vars: "off"
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn

diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx
@@ -8,7 +8,6 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
 import MenuIcon from "@mui/icons-material/Menu";
-import Typography from "@mui/material/Typography";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC, type ReactNode, useRef, useState } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
@@ -360,31 +359,30 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
             lineHeight: "140%",
           }}
         >
-          <Typography
-            component="h4"
-            sx={{
+          <h4
+            css={{
               fontSize: "inherit",
               fontWeight: 600,
               lineHeight: "inherit",
               margin: 0,
+              marginBottom: 4,
             }}
           >
             Select a region nearest to you
-          </Typography>
-          <Typography
-            component="p"
-            sx={{
+          </h4>
+          <p
+            css={(theme) => ({
               fontSize: 13,
-              color: (theme) => theme.palette.text.secondary,
+              color: theme.palette.text.secondary,
               lineHeight: "inherit",
               marginTop: 0.5,
-            }}
+            })}
           >
             Workspace proxies improve terminal and web app connections to
             workspaces. This does not apply to CLI connections. A region must be
             manually selected, otherwise the default primary region will be
             used.
-          </Typography>
+          </p>
         </Box>
         <Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
         {proxyContextValue.proxies

diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx
@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import type { FC, ReactNode } from "react";
 
 export interface EmptyStateProps {
@@ -40,24 +39,21 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
       }}
       {...boxProps}
     >
-      <Typography variant="h5" css={{ fontSize: 24 }}>
-        {message}
-      </Typography>
+      <h5 css={{ fontSize: 24, fontWeight: 400, margin: 0 }}>{message}</h5>
       {description && (
-        <Typography
-          variant="body2"
-          color="textSecondary"
-          css={{
-            marginTop: 12,
+        <p
+          css={(theme) => ({
+            marginTop: 16,
             fontSize: 16,
             lineHeight: "140%",
             maxWidth: 480,
-          }}
+            color: theme.palette.text.secondary,
+          })}
         >
           {description}
-        </Typography>
+        </p>
       )}
-      {cta && <div css={{ marginTop: 32 }}>{cta}</div>}
+      {cta && <div css={{ marginTop: 24 }}>{cta}</div>}
       {image}
     </Box>
   );

diff --git a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
@@ -53,7 +53,7 @@ export const EnterpriseSnackbar: FC<
       action={
         <div css={styles.actionWrapper}>
           {action}
-          <IconButton onClick={onClose} css={{ padding: 0 }} size="large">
+          <IconButton onClick={onClose} css={{ padding: 0 }}>
             <CloseIcon css={styles.closeIcon} aria-label="close" />
           </IconButton>
         </div>

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -2,7 +2,6 @@ import { type FC, useState } from "react";
 import { useCustomEvent } from "hooks/events";
 import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 import { ErrorIcon } from "../Icons/ErrorIcon";
-import { Typography } from "../Typography/Typography";
 import {
   type AdditionalMessage,
   isNotificationList,
@@ -52,9 +51,7 @@ export const GlobalSnackbar: FC = () => {
           )}
 
           <div css={styles.message}>
-            <Typography variant="body1" css={styles.messageTitle}>
-              {notification.msg}
-            </Typography>
+            <span css={styles.messageTitle}>{notification.msg}</span>
 
             {notification.additionalMsgs &&
               notification.additionalMsgs.map((msg, index) => (
@@ -92,18 +89,14 @@ const styles = {
 
 function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
   if (isNotificationText(message)) {
-    return (
-      <Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
-        {message}
-      </Typography>
-    );
+    return <span css={styles.messageSubtitle}>{message}</span>;
   }
 
   if (isNotificationTextPrefixed(message)) {
     return (
-      <Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
+      <span css={styles.messageSubtitle}>
         <strong>{message.prefix}:</strong> {message.text}
-      </Typography>
+      </span>
     );
   }
 
@@ -112,9 +105,7 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
       <ul css={styles.list}>
         {message.map((item, idx) => (
           <li key={idx}>
-            <Typography variant="body2" css={styles.messageSubtitle}>
-              {item}
-            </Typography>
+            <span css={styles.messageSubtitle}>{item}</span>
           </li>
         ))}
       </ul>

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode } from "react";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { EnterpriseBadge } from "components/Badges/Badges";
@@ -18,21 +17,11 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
     <Box css={styles.root}>
       <div css={styles.header}>
         <Stack direction="row" alignItems="center" justifyContent="center">
-          <Typography variant="h5" css={styles.title}>
-            {message}
-          </Typography>
+          <h5 css={styles.title}>{message}</h5>
           <EnterpriseBadge />
         </Stack>
 
-        {description && (
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            css={styles.description}
-          >
-            {description}
-          </Typography>
-        )}
+        {description && <p css={styles.description}>{description}</p>}
       </div>
       {cta}
     </Box>
@@ -58,13 +47,17 @@ const styles = {
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
+    fontSize: 24,
+    margin: 0,
   },
-  description: {
-    marginTop: 8,
+  description: (theme) => ({
+    marginTop: 16,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  },
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+  }),
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,

diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -1,6 +1,4 @@
-import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode, type PropsWithChildren } from "react";
-import { SectionAction } from "./SectionAction";
 import { type Interpolation, type Theme } from "@emotion/react";
 
 type SectionLayout = "fixed" | "fluid";
@@ -17,9 +15,7 @@ export interface SectionProps {
   children?: ReactNode;
 }
 
-type SectionFC = FC<PropsWithChildren<SectionProps>> & {
-  Action: typeof SectionAction;
-};
+type SectionFC = FC<PropsWithChildren<SectionProps>>;
 
 export const Section: SectionFC = ({
   id,
@@ -38,12 +34,19 @@ export const Section: SectionFC = ({
           <div css={styles.header}>
             <div>
               {title && (
-                <Typography variant="h4" sx={{ fontSize: 24 }}>
+                <h4
+                  css={{
+                    fontSize: 24,
+                    fontWeight: 500,
+                    margin: 0,
+                    marginBottom: 8,
+                  }}
+                >
                   {title}
-                </Typography>
+                </h4>
               )}
               {description && typeof description === "string" && (
-                <Typography css={styles.description}>{description}</Typography>
+                <p css={styles.description}>{description}</p>
               )}
               {description && typeof description !== "string" && (
                 <div css={styles.description}>{description}</div>
@@ -59,9 +62,6 @@ export const Section: SectionFC = ({
   );
 };
 
-// Sub-components
-Section.Action = SectionAction;
-
 const styles = {
   header: {
     marginBottom: 24,

diff --git a/site/src/components/SettingsLayout/SectionAction.tsx b/site/src/components/SettingsLayout/SectionAction.tsx
diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx
diff --git a/site/src/components/Typography/Typography.tsx b/site/src/components/Typography/Typography.tsx
diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
@@ -1,6 +1,5 @@
-import Typography from "@mui/material/Typography";
 import { type FC, type PropsWithChildren } from "react";
-import { css, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import { CoderIcon } from "../Icons/CoderIcon";
 
 const Language = {
@@ -31,22 +30,23 @@ export const Welcome: FC<
           }}
         />
       </div>
-      <Typography
-        css={css`
-          text-align: center;
-          font-size: 32px;
-          font-weight: 400;
-          margin: 16px 0 32px;
-          line-height: 1.25;
+      <h1
+        css={{
+          textAlign: "center",
+          fontSize: 32,
+          fontWeight: 400,
+          margin: 0,
+          marginTop: 16,
+          marginBottom: 32,
+          lineHeight: 1.25,
 
-          & strong {
-            font-weight: 600;
-          }
-        `}
-        variant="h1"
+          "& strong": {
+            fontWeight: 600,
+          },
+        }}
       >
         {message}
-      </Typography>
+      </h1>
     </div>
   );
 };
diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx
@@ -1,4 +1,3 @@
-import Typography from "@mui/material/Typography";
 import { type FC } from "react";
 
 export const NotFoundPage: FC = () => {
@@ -20,9 +19,9 @@ export const NotFoundPage: FC = () => {
           borderRight: theme.palette.divider,
         })}
       >
-        <Typography variant="h4">404</Typography>
+        <h4>404</h4>
       </div>
-      <Typography variant="body2">This page could not be found.</Typography>
+      <p>This page could not be found.</p>
     </div>
   );
 };