From 148fa819ae48ead7ef2be7f174ba0dc7f3894afa Mon Sep 17 00:00:00 2001 From: Kayla Washburn Date: Mon, 2 Oct 2023 10:48:11 -0600 Subject: [PATCH] chore: use emotion for styling (pt. 2) (#9951) --- site/src/@types/emotion.d.ts | 2 +- site/src/components/Avatar/Avatar.tsx | 12 +- site/src/components/AvatarData/AvatarData.tsx | 65 ++--- site/src/components/CopyButton/CopyButton.tsx | 61 ++-- .../DeploymentBanner/DeploymentBannerView.tsx | 229 +++++++-------- .../LicenseBanner/LicenseBannerView.tsx | 122 ++++---- .../Dashboard/Navbar/NavbarView.tsx | 238 ++++++++-------- .../Navbar/UserDropdown/BorderedMenu.tsx | 27 +- .../UserDropdown/UserDropdownContent.tsx | 189 ++++++------- .../DeploySettingsLayout/Badges.tsx | 263 ++++++++---------- .../DeploySettingsLayout.tsx | 21 +- .../DeploySettingsLayout/Fieldset.tsx | 124 +++++---- .../DeploySettingsLayout/Header.tsx | 66 +++-- 13 files changed, 678 insertions(+), 741 deletions(-) diff --git a/site/src/@types/emotion.d.ts b/site/src/@types/emotion.d.ts index 4185fe7908..41f9e922d5 100644 --- a/site/src/@types/emotion.d.ts +++ b/site/src/@types/emotion.d.ts @@ -1,4 +1,4 @@ -import type { Theme as MuiTheme } from "@mui/system"; +import type { DefaultTheme as MuiTheme } from "@mui/system"; declare module "@emotion/react" { interface Theme extends MuiTheme {} diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 6d394528b6..02dbb2b141 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -2,7 +2,7 @@ // eslint-disable-next-line no-restricted-imports -- Read above import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar"; import { FC } from "react"; -import { css, type Theme } from "@emotion/react"; +import { css, type Interpolation, type Theme } from "@emotion/react"; export type AvatarProps = MuiAvatarProps & { size?: "sm" | "md" | "xl"; @@ -11,26 +11,26 @@ export type AvatarProps = MuiAvatarProps & { }; const sizeStyles = { - sm: (theme: Theme) => ({ + sm: (theme) => ({ width: theme.spacing(3), height: theme.spacing(3), fontSize: theme.spacing(1.5), }), md: {}, - xl: (theme: Theme) => ({ + xl: (theme) => ({ width: theme.spacing(6), height: theme.spacing(6), fontSize: theme.spacing(3), }), -}; +} satisfies Record>; const colorStyles = { light: {}, - darken: (theme: Theme) => ({ + darken: (theme) => ({ background: theme.palette.divider, color: theme.palette.text.primary, }), -}; +} satisfies Record>; const fitImageStyles = css` & .MuiAvatar-img { diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index 8c0bb55fdc..ba5d7db14d 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -1,7 +1,7 @@ +import type { FC } from "react"; +import { useTheme } from "@emotion/react"; import { Avatar } from "components/Avatar/Avatar"; -import { FC } from "react"; import { Stack } from "components/Stack/Stack"; -import { makeStyles } from "@mui/styles"; export interface AvatarDataProps { title: string | JSX.Element; @@ -16,7 +16,7 @@ export const AvatarData: FC = ({ src, avatar, }) => { - const styles = useStyles(); + const theme = useTheme(); if (!avatar) { avatar = {title}; @@ -27,38 +27,41 @@ export const AvatarData: FC = ({ spacing={1.5} direction="row" alignItems="center" - className={styles.root} + css={{ + minHeight: theme.spacing(5), // Make it predictable for the skeleton + width: "100%", + lineHeight: "150%", + }} > {avatar} - - {title} - {subtitle && {subtitle}} + + + {title} + + {subtitle && ( + + {subtitle} + + )} ); }; - -const useStyles = makeStyles((theme) => ({ - root: { - minHeight: theme.spacing(5), // Make it predictable for the skeleton - width: "100%", - lineHeight: "150%", - }, - - info: { - width: "100%", - }, - - title: { - color: theme.palette.text.primary, - fontWeight: 600, - }, - - subtitle: { - fontSize: 12, - color: theme.palette.text.secondary, - lineHeight: "150%", - maxWidth: 540, - }, -})); diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index b22a8c104d..ca5ca9b7d4 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -1,9 +1,8 @@ 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 { css } from "@emotion/react"; import { FileCopyIcon } from "../Icons/FileCopyIcon"; interface CopyButtonProps { @@ -29,51 +28,53 @@ export const CopyButton: React.FC> = ({ buttonClassName = "", tooltipTitle = Language.tooltipTitle, }) => { - const styles = useStyles(); const { isCopied, copy: copyToClipboard } = useClipboard(text); + const fileCopyIconStyles = css` + width: 20px; + height: 20px; + `; + return (
css` + border-radius: ${theme.shape.borderRadius}px; + padding: ${theme.spacing(0.85)}; + min-width: 32px; + + &:hover { + background: ${theme.palette.background.paper}; + } + `} onClick={copyToClipboard} size="small" aria-label={Language.ariaLabel} variant="text" > {isCopied ? ( - + ) : ( - + + )} + {ctaCopy && ( +
({ + marginLeft: theme.spacing(1), + })} + > + {ctaCopy} +
)} - {ctaCopy &&
{ctaCopy}
}
); }; - -const useStyles = makeStyles((theme) => ({ - copyButtonWrapper: { - display: "flex", - }, - copyButton: { - borderRadius: theme.shape.borderRadius, - padding: theme.spacing(0.85), - minWidth: 32, - - "&:hover": { - background: theme.palette.background.paper, - }, - }, - fileCopyIcon: { - width: 20, - height: 20, - }, - buttonCopy: { - marginLeft: theme.spacing(1), - }, -})); diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx index 9e15c7e869..dda9337155 100644 --- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx @@ -2,7 +2,6 @@ import { DeploymentStats, WorkspaceStatus } from "api/typesGenerated"; import { FC, useMemo, useEffect, useState } from "react"; import prettyBytes from "pretty-bytes"; 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 "@mui/material/Tooltip"; @@ -19,9 +18,36 @@ import CollectedIcon from "@mui/icons-material/Compare"; import RefreshIcon from "@mui/icons-material/Refresh"; import Button from "@mui/material/Button"; import { getDisplayWorkspaceStatus } from "utils/workspace"; +import { css, type Theme, type Interpolation, useTheme } from "@emotion/react"; export const bannerHeight = 36; +const styles = { + group: css` + display: flex; + align-items: center; + `, + category: (theme) => ({ + marginRight: theme.spacing(2), + color: theme.palette.text.primary, + }), + values: (theme) => ({ + display: "flex", + gap: theme.spacing(1), + color: theme.palette.text.secondary, + }), + value: (theme) => css` + display: flex; + align-items: center; + gap: ${theme.spacing(0.5)}; + + & svg { + width: 12px; + height: 12px; + } + `, +} satisfies Record>; + export interface DeploymentBannerViewProps { fetchStats?: () => void; stats?: DeploymentStats; @@ -31,7 +57,7 @@ export const DeploymentBannerView: FC = ({ stats, fetchStats, }) => { - const styles = useStyles(); + const theme = useTheme(); const aggregatedMinutes = useMemo(() => { if (!stats) { return; @@ -80,15 +106,46 @@ export const DeploymentBannerView: FC = ({ }, [timeUntilRefresh, stats]); return ( -
+
-
+
-
-
Workspaces
-
+
+
Workspaces
+
= ({ />
-
+
-
Transmission
+
Transmission
-
+
-
+
{stats ? prettyBytes(stats.workspaces.rx_bytes) : "-"}
-
+
{stats ? prettyBytes(stats.workspaces.tx_bytes) : "-"}
@@ -142,20 +199,26 @@ export const DeploymentBannerView: FC = ({ : "The average latency of user connections to workspaces" } > -
+
{displayLatency > 0 ? displayLatency?.toFixed(2) + " ms" : "-"}
-
-
Active Connections
+
+
Active Connections
-
+
-
- +
+ {typeof stats?.session_count.vscode === "undefined" ? "-" : stats?.session_count.vscode} @@ -163,7 +226,7 @@ export const DeploymentBannerView: FC = ({ -
+
{typeof stats?.session_count.ssh === "undefined" ? "-" @@ -172,7 +235,7 @@ export const DeploymentBannerView: FC = ({ -
+
{typeof stats?.session_count.reconnecting_pty === "undefined" ? "-" @@ -181,9 +244,17 @@ export const DeploymentBannerView: FC = ({
-
+
-
+
{lastAggregated}
@@ -191,7 +262,23 @@ export const DeploymentBannerView: FC = ({