From b1ebab849915494547b42503e8f80e1b06b83656 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:15:11 +0000 Subject: [PATCH 01/12] Remove Typography from NavbarView --- .../Dashboard/Navbar/NavbarView.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx index 7db339d966051..0f1eed8522b0f 100644 --- 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%", }} > - Select a region nearest to you - - +

({ 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. - +

theme.palette.divider }} /> {proxyContextValue.proxies From 1fda7b7f021b82ba18b75c408c3993f941ac5b7f Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:18:05 +0000 Subject: [PATCH 02/12] Remove Typography from EmptyState --- site/src/components/EmptyState/EmptyState.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index d1d702b35e51e..228b7c06e9260 100644 --- 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> = ( }} {...boxProps} > - - {message} - +
{message}
{description && ( - ({ + marginTop: 16, fontSize: 16, lineHeight: "140%", maxWidth: 480, - }} + color: theme.palette.text.secondary, + })} > {description} - +

)} - {cta &&
{cta}
} + {cta &&
{cta}
} {image} ); From 864246cae25e6e5a40f2cb2b583d8e681bb4af53 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:27:35 +0000 Subject: [PATCH 03/12] Remove Typography from Paywall --- site/src/components/Paywall/Paywall.tsx | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index 15a0a13f35a71..f252db0b2f474 100644 --- 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> = (props) => {
- - {message} - +
{message}
 - {description && ( - - {description} - - )} + {description &&

{description}

}
{cta} @@ -58,13 +47,17 @@ const styles = { title: { fontWeight: 600, fontFamily: "inherit", + fontSize: 24, + margin: 0, }, - description: { - marginTop: 8, + description: (theme) => ({ + marginTop: 14, fontFamily: "inherit", maxWidth: 420, lineHeight: "160%", - }, + color: theme.palette.text.secondary, + fontSize: 16, + }), enterpriseChip: (theme) => ({ background: theme.palette.success.dark, color: theme.palette.success.contrastText, From b402226f02fd956719da0fa7f676b9bed687c13b Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:28:45 +0000 Subject: [PATCH 04/12] Fix font size --- site/src/components/Paywall/Paywall.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx index f252db0b2f474..2f9d9ba860b88 100644 --- a/site/src/components/Paywall/Paywall.tsx +++ b/site/src/components/Paywall/Paywall.tsx @@ -51,12 +51,12 @@ const styles = { margin: 0, }, description: (theme) => ({ - marginTop: 14, + marginTop: 16, fontFamily: "inherit", maxWidth: 420, lineHeight: "160%", color: theme.palette.text.secondary, - fontSize: 16, + fontSize: 14, }), enterpriseChip: (theme) => ({ background: theme.palette.success.dark, From 6e423e615d6394969e582cfc19db00abf0083f5d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:34:15 +0000 Subject: [PATCH 05/12] Remove Typography from CliAuthPage --- site/src/components/Welcome/Welcome.tsx | 30 ++++++++++++------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx index 708a68c008cee..9036717866efd 100644 --- 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< }} /> - {message} - + ); }; From 65e60381ffc665e59b5a525b139e4542def7ac34 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:37:19 +0000 Subject: [PATCH 06/12] Remove Typography from Single SignOn --- .../UserSettingsPage/SecurityPage/SingleSignOnSection.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx index 15d619b7679bb..3aff1d7881c58 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx @@ -5,7 +5,6 @@ import Box from "@mui/material/Box"; import GitHubIcon from "@mui/icons-material/GitHub"; import KeyIcon from "@mui/icons-material/VpnKey"; import Button from "@mui/material/Button"; -import Typography from "@mui/material/Typography"; import { convertToOAUTH } from "api/api"; import type { AuthMethods, @@ -278,11 +277,11 @@ const ConfirmLoginTypeChangeModal = ({ title="Change login type" confirmLoading={loading} description={ - - + +

After changing your login type, you will not be able to change it again. Are you sure you want to proceed and change your login type? - +

{ From 51f1cc73a00551892b5c92c5489c164b58f4777e Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:37:52 +0000 Subject: [PATCH 07/12] Remove Typography from file dialog --- site/src/pages/TemplateVersionEditorPage/FileDialog.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx index 4c3f9ce234751..5e1d8e257ee9c 100644 --- a/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx +++ b/site/src/pages/TemplateVersionEditorPage/FileDialog.tsx @@ -2,7 +2,6 @@ import TextField from "@mui/material/TextField"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { Stack } from "components/Stack/Stack"; import { ChangeEvent, FC, useState } from "react"; -import Typography from "@mui/material/Typography"; import { allowedExtensions, isAllowedFile } from "utils/templateVersion"; import { FileTree, isFolder, validatePath } from "utils/filetree"; @@ -59,11 +58,11 @@ export const CreateFileDialog: FC<{ confirmText="Create" title="Create File" description={ - - + +

Specify the path to a file to be created. This path can contain slashes too. - +

{ From f16478da3a51c89e3319be5a0359dba18a249882 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:39:10 +0000 Subject: [PATCH 08/12] Remove from not found --- site/src/pages/404Page/404Page.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/src/pages/404Page/404Page.tsx b/site/src/pages/404Page/404Page.tsx index 5b11ac4b6e9c3..3d9fdcdf5020b 100644 --- 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, })} > - 404 +

404

- This page could not be found. +

This page could not be found.

); }; From b996e9a63f0d9a89fe1e419c27a6753cb4ef47b1 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:44:09 +0000 Subject: [PATCH 09/12] Remove from Section --- .../src/components/SettingsLayout/Section.tsx | 22 +++++++++---------- .../SettingsLayout/SectionAction.tsx | 11 ---------- 2 files changed, 11 insertions(+), 22 deletions(-) delete mode 100644 site/src/components/SettingsLayout/SectionAction.tsx diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx index 1373fb3dae3db..25e3ea6e271d1 100644 --- 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> & { - Action: typeof SectionAction; -}; +type SectionFC = FC>; export const Section: SectionFC = ({ id, @@ -38,12 +34,19 @@ export const Section: SectionFC = ({
{title && ( - +

{title} - +

)} {description && typeof description === "string" && ( - {description} +

{description}

)} {description && typeof description !== "string" && (
{description}
@@ -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 deleted file mode 100644 index 2fa570c08dd23..0000000000000 --- a/site/src/components/SettingsLayout/SectionAction.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { type FC } from "react"; - -/** - * SectionAction is a content box that call to actions should be placed - * within - */ -export const SectionAction: FC> = ({ - children, -}) => { - return
{children}
; -}; From 028babfc10bb46fc924006c97369e6010f3bf0a5 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:47:26 +0000 Subject: [PATCH 10/12] Remove from global snackbar --- .../GlobalSnackbar/EnterpriseSnackbar.tsx | 2 +- .../GlobalSnackbar/GlobalSnackbar.tsx | 19 +++++-------------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx index 8580b705d33e7..634c963423c20 100644 --- a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx @@ -53,7 +53,7 @@ export const EnterpriseSnackbar: FC< action={
{action} - +
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx index f214aa16b06d5..9b97c9be021e5 100644 --- 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 = () => { )}
- - {notification.msg} - + {notification.msg} {notification.additionalMsgs && notification.additionalMsgs.map((msg, index) => ( @@ -92,18 +89,14 @@ const styles = { function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) { if (isNotificationText(message)) { - return ( - - {message} - - ); + return {message}; } if (isNotificationTextPrefixed(message)) { return ( - + {message.prefix}: {message.text} - + ); } @@ -112,9 +105,7 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
    {message.map((item, idx) => (
  • - - {item} - + {item}
    • ))}
From 9a22f5095914aa0bf8de29ba89b612adc3f8e408 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:47:44 +0000 Subject: [PATCH 11/12] Remove Typography component --- .../Typography/Typography.stories.tsx | 25 ------------ site/src/components/Typography/Typography.tsx | 38 ------------------- 2 files changed, 63 deletions(-) delete mode 100644 site/src/components/Typography/Typography.stories.tsx delete mode 100644 site/src/components/Typography/Typography.tsx diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx deleted file mode 100644 index b5c979f1c975a..0000000000000 --- a/site/src/components/Typography/Typography.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Typography } from "./Typography"; -import type { Meta, StoryObj } from "@storybook/react"; - -const meta: Meta = { - title: "components/Typography", - component: Typography, - args: { - children: "Colorless green ideas sleep furiously", - }, -}; - -export default meta; -type Story = StoryObj; - -export const Short: Story = { - args: { - short: true, - }, -}; - -export const Tall: Story = { - args: { - short: false, - }, -}; diff --git a/site/src/components/Typography/Typography.tsx b/site/src/components/Typography/Typography.tsx deleted file mode 100644 index ce210a067eebf..0000000000000 --- a/site/src/components/Typography/Typography.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/** - * @fileoverview (TODO: Grey) This file is in a temporary state and is a - * verbatim port from `@coder/ui`. - */ - -import MuiTypography, { - TypographyProps as MuiTypographyProps, -} from "@mui/material/Typography"; -import * as React from "react"; - -export interface TypographyProps extends MuiTypographyProps { - short?: boolean; -} - -/** - * Wrapper around Material UI's Typography component to allow for future - * custom typography types. - * - * See original component's Material UI documentation here: https://material-ui.com/components/typography/ - */ -export const Typography: React.FC = ({ short, ...attrs }) => { - return ( - - ); -}; From 829c6ce717609f6e582184754a128008d4eb8bab Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Fri, 17 Nov 2023 18:48:40 +0000 Subject: [PATCH 12/12] Add eslint role --- site/.eslintrc.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml index 018bf9043d72e..0991916c76064 100644 --- 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