From 4bd9a7e45c975b3ff39db43e011f87bc7a76fd73 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 21:38:28 +0000 Subject: [PATCH 01/27] emotion: `IconField` --- site/src/components/IconField/IconField.tsx | 61 +++++++++++---------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index 6e8bf11506cfa..c1e26fe4acdc7 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -1,9 +1,9 @@ +import { css, Global, useTheme } from "@emotion/react"; import Button from "@mui/material/Button"; import InputAdornment from "@mui/material/InputAdornment"; -import TextField, { TextFieldProps } from "@mui/material/TextField"; -import { makeStyles } from "@mui/styles"; +import TextField, { type TextFieldProps } from "@mui/material/TextField"; import Picker from "@emoji-mart/react"; -import { FC } from "react"; +import { type FC } from "react"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { Stack } from "components/Stack/Stack"; import { colors } from "theme/colors"; @@ -48,7 +48,7 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { throw new Error(`Invalid icon value "${typeof textFieldProps.value}"`); } - const styles = useStyles(); + const theme = useTheme(); const hasIcon = textFieldProps.value && textFieldProps.value !== ""; return ( @@ -59,7 +59,21 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { label="Icon" InputProps={{ endAdornment: hasIcon ? ( - + = ({ onPickEmoji, ...textFieldProps }) => { id="emoji" css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }} > + = ({ onPickEmoji, ...textFieldProps }) => { ); }; -const useStyles = makeStyles((theme) => ({ - "@global": { - "em-emoji-picker": { - "--rgb-background": theme.palette.background.paper, - "--rgb-input": colors.gray[17], - "--rgb-color": colors.gray[4], - - // Hack to prevent the right side from being cut off - width: 350, - }, - }, - adornment: { - width: theme.spacing(3), - height: theme.spacing(3), - display: "flex", - alignItems: "center", - justifyContent: "center", - - "& img": { - maxWidth: "100%", - objectFit: "contain", - }, - }, -})); - export default IconField; From 6f820c130473ec8ec7ec3fcb7a9d1f104fb26f9e Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 21:50:34 +0000 Subject: [PATCH 02/27] emotion: `UserAutocomplete` --- .../UserAutocomplete/UserAutocomplete.tsx | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index 44aee30bc5c89..ee224b92b2d6c 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -1,11 +1,17 @@ +import { css } from "@emotion/css"; +import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; -import { makeStyles } from "@mui/styles"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; -import { User } from "api/typesGenerated"; +import type { User } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/AvatarData/AvatarData"; -import { ChangeEvent, ComponentProps, FC, useState } from "react"; +import { + type ChangeEvent, + type ComponentProps, + type FC, + useState, +} from "react"; import Box from "@mui/material/Box"; import { useDebouncedFunction } from "hooks/debounce"; import { useQuery } from "react-query"; @@ -27,7 +33,7 @@ export const UserAutocomplete: FC = ({ className, size = "small", }) => { - const styles = useStyles(); + const theme = useTheme(); const [autoComplete, setAutoComplete] = useState<{ value: string; open: boolean; @@ -101,7 +107,11 @@ export const UserAutocomplete: FC = ({ size={size} label={label} placeholder="User email or username" - className={styles.textField} + css={{ + "&:not(:has(label))": { + margin: 0, + }, + }} InputProps={{ ...params.InputProps, onChange: debouncedInputOnChange, @@ -119,7 +129,12 @@ export const UserAutocomplete: FC = ({ ), classes: { - root: styles.inputRoot, + root: css` + padding-left: ${theme.spacing( + 1.75, + )} !important; // Same padding left as input + gap: ${theme.spacing(0.5)}; + `, }, }} InputLabelProps={{ @@ -130,15 +145,3 @@ export const UserAutocomplete: FC = ({ /> ); }; - -export const useStyles = makeStyles((theme) => ({ - textField: { - "&:not(:has(label))": { - margin: 0, - }, - }, - inputRoot: { - paddingLeft: `${theme.spacing(1.75)} !important`, // Same padding left as input - gap: theme.spacing(0.5), - }, -})); From ffa39ef5b366760eb3cf0185e91e2fa2b21174e5 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 21:53:11 +0000 Subject: [PATCH 03/27] emotion: `WorkspaceBuildLogs` --- .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index e1fa8463f7602..c728af060e841 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -1,11 +1,10 @@ -import { makeStyles } from "@mui/styles"; import dayjs from "dayjs"; -import { ComponentProps, FC, Fragment } from "react"; -import { ProvisionerJobLog } from "api/typesGenerated"; +import { type ComponentProps, type FC, Fragment } from "react"; +import type { ProvisionerJobLog } from "api/typesGenerated"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; import { Logs } from "./Logs"; import Box from "@mui/material/Box"; -import { combineClasses } from "utils/combineClasses"; +import { type Interpolation, type Theme } from "@emotion/react"; const Language = { seconds: "seconds", @@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC = ({ }) => { const groupedLogsByStage = groupLogsByStage(logs); const stages = Object.keys(groupedLogsByStage); - const styles = useStyles(); return ( = ({ return ( -
+
{stage}
{shouldDisplayDuration && ( -
+
{duration} {Language.seconds}
)} @@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC = ({ ); }; -const useStyles = makeStyles((theme) => ({ - header: { +const styles = { + header: (theme) => ({ fontSize: 13, fontWeight: 600, padding: theme.spacing(0.5, 3), @@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({ "&:first-child": { borderRadius: "8px 8px 0 0", }, - }, + }), sticky: { position: "sticky", top: 0, }, - duration: { + duration: (theme) => ({ marginLeft: "auto", color: theme.palette.text.secondary, fontSize: 12, - }, -})); + }), +} satisfies Record>; From f6e0a64a8d8a2d59e041c8e7dc22968c8c4905cd Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 21:56:26 +0000 Subject: [PATCH 04/27] emotion: `CreateTemplateForm` --- .../CreateTemplatePage/CreateTemplateForm.tsx | 59 +++++++++---------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx index 2c7640e811d29..077cb46338578 100644 --- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx +++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx @@ -1,7 +1,7 @@ +import { type Interpolation, type Theme } from "@emotion/react"; import Checkbox from "@mui/material/Checkbox"; -import { makeStyles } from "@mui/styles"; import TextField from "@mui/material/TextField"; -import { +import type { ProvisionerJobLog, Template, TemplateExample, @@ -9,10 +9,10 @@ import { VariableValue, } from "api/typesGenerated"; import { Stack } from "components/Stack/Stack"; -import { TemplateUpload, TemplateUploadProps } from "./TemplateUpload"; +import { TemplateUpload, type TemplateUploadProps } from "./TemplateUpload"; import { useFormik } from "formik"; import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate"; -import { FC, useEffect } from "react"; +import { type FC, useEffect } from "react"; import { nameValidator, getFormHelpers, @@ -43,8 +43,8 @@ import { } from "pages/TemplateSettingsPage/TemplateSchedulePage/AutostopRequirementHelperText"; import MenuItem from "@mui/material/MenuItem"; import { - TemplateAutostartRequirementDaysValue, - TemplateAutostopRequirementDaysValue, + type TemplateAutostartRequirementDaysValue, + type TemplateAutostopRequirementDaysValue, } from "utils/schedule"; import { TemplateScheduleAutostart, @@ -218,7 +218,6 @@ export const CreateTemplateForm: FC = (props) => { allowDisableEveryoneAccess, allowAutostopRequirement, } = props; - const styles = useStyles(); const form = useFormik({ initialValues: getInitialValues({ allowAdvancedScheduling, @@ -338,7 +337,7 @@ export const CreateTemplateForm: FC = (props) => { description="Define when workspaces created from this template automatically stop." > - + = (props) => { {allowAutostopRequirement && ( - + = (props) => { Allow users to customize autostop duration for workspaces. - + Workspaces will always use the default TTL if this is set. Regardless of this setting, workspaces can only stay on for the max TTL. @@ -514,7 +513,7 @@ export const CreateTemplateForm: FC = (props) => { direction="row" alignItems="center" spacing={0.5} - className={styles.optionText} + css={styles.optionText} > Allow users to cancel in-progress workspace jobs @@ -527,7 +526,7 @@ export const CreateTemplateForm: FC = (props) => { - + Depending on your template, canceling builds may leave workspaces in an unhealthy state. This option isn't recommended for most use cases. @@ -552,7 +551,7 @@ export const CreateTemplateForm: FC = (props) => { direction="row" alignItems="center" spacing={0.5} - className={styles.optionText} + css={styles.optionText} > Allow everyone to use the template @@ -569,7 +568,7 @@ export const CreateTemplateForm: FC = (props) => { - + This setting requires an enterprise license for the  'Template RBAC' @@ -610,14 +609,14 @@ export const CreateTemplateForm: FC = (props) => { {jobError && ( -
-
Error during provisioning
-

+

+
Error during provisioning
+

Looks like we found an error during the template provisioning. You can see the logs bellow.

- {jobError} + {jobError}
@@ -690,43 +689,43 @@ const MaxTTLHelperText = (props: { ttl?: number }) => { ); }; -const useStyles = makeStyles((theme) => ({ +const styles = { ttlFields: { width: "100%", }, - optionText: { + optionText: (theme) => ({ fontSize: theme.spacing(2), color: theme.palette.text.primary, - }, + }), - optionHelperText: { + optionHelperText: (theme) => ({ fontSize: theme.spacing(1.5), color: theme.palette.text.secondary, - }, + }), - error: { + error: (theme) => ({ padding: theme.spacing(3), borderRadius: theme.spacing(1), background: theme.palette.background.paper, border: `1px solid ${theme.palette.error.main}`, - }, + }), errorTitle: { fontSize: 16, margin: 0, }, - errorDescription: { + errorDescription: (theme) => ({ margin: 0, color: theme.palette.text.secondary, marginTop: theme.spacing(0.5), - }, + }), - errorDetails: { + errorDetails: (theme) => ({ display: "block", marginTop: theme.spacing(1), color: theme.palette.error.light, fontSize: theme.spacing(2), - }, -})); + }), +} satisfies Record>; From 1f61a4bed39204506c8a3f9f18cfcb6c3e13d946 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 22:06:07 +0000 Subject: [PATCH 05/27] emotion: `SingleSignOnSection` --- .../SecurityPage/SingleSignOnSection.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx index 2fed4ee0ebe73..fec83a904ddc5 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx @@ -101,21 +101,15 @@ export const useSingleSignOnSection = () => { }; }; -const useEmptyStateStyles = makeStyles((theme) => ({ - root: { - minHeight: 0, - padding: theme.spacing(6, 4), - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, - }, -})); - function SSOEmptyState() { - const styles = useEmptyStateStyles(); - return ( ({ + minHeight: 0, + padding: theme.spacing(6, 4), + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadius, + })} message="No SSO Providers" description="No SSO providers are configured with this Coder deployment." cta={ From 55ecf9371923c80cc3f8d8a4c86d92135c9511f2 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 16:52:04 +0000 Subject: [PATCH 06/27] emotion: `WorkspaceActions` --- .../WorkspaceActions/WorkspaceActions.tsx | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx index 226396720b593..6a9931d6cb0af 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx @@ -1,9 +1,8 @@ import MenuItem from "@mui/material/MenuItem"; import Menu from "@mui/material/Menu"; -import { makeStyles } from "@mui/styles"; import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined"; -import { FC, Fragment, ReactNode, useRef, useState } from "react"; -import { Workspace, WorkspaceBuildParameter } from "api/typesGenerated"; +import { type FC, Fragment, type ReactNode, useRef, useState } from "react"; +import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated"; import { ActionLoadingButton, CancelButton, @@ -56,7 +55,6 @@ export const WorkspaceActions: FC = ({ isRestarting, canChangeVersions, }) => { - const styles = useStyles(); const { canCancel, canAcceptJobs, @@ -115,7 +113,14 @@ export const WorkspaceActions: FC = ({ }; return ( -
+
({ + display: "flex", + alignItems: "center", + gap: theme.spacing(1.5), + })} + data-testid="workspace-actions" + > {canBeUpdated && (isUpdating ? buttonMapping[ButtonTypesEnum.updating] @@ -167,11 +172,3 @@ export const WorkspaceActions: FC = ({
); }; - -const useStyles = makeStyles((theme) => ({ - actions: { - display: "flex", - alignItems: "center", - gap: theme.spacing(1.5), - }, -})); From f132aee08512b5a1d74b4106ebbf89dfaedd06d4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 16:55:24 +0000 Subject: [PATCH 07/27] emotion: `LicensesSettingsPageView` --- .../LicensesSettingsPageView.tsx | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 12d47d738ef5c..2faf56a68a9b8 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -1,13 +1,14 @@ +import { type Interpolation, type Theme } from "@emotion/react"; import Button from "@mui/material/Button"; -import { makeStyles, useTheme } from "@mui/styles"; +import { useTheme } from "@mui/styles"; import Skeleton from "@mui/material/Skeleton"; import AddIcon from "@mui/icons-material/AddOutlined"; import RefreshIcon from "@mui/icons-material/Refresh"; -import { GetLicensesResponse } from "api/api"; +import type { GetLicensesResponse } from "api/api"; import { Header } from "components/DeploySettingsLayout/Header"; import { LicenseCard } from "./LicenseCard"; import { Stack } from "components/Stack/Stack"; -import { FC } from "react"; +import { type FC } from "react"; import Confetti from "react-confetti"; import { Link } from "react-router-dom"; import useWindowSize from "react-use/lib/useWindowSize"; @@ -38,10 +39,8 @@ const LicensesSettingsPageView: FC = ({ removeLicense, refreshEntitlements, }) => { - const styles = useStyles(); - const { width, height } = useWindowSize(); - const theme = useTheme(); + const { width, height } = useWindowSize(); return ( <> @@ -130,12 +129,12 @@ const LicensesSettingsPageView: FC = ({ ); }; -const useStyles = makeStyles((theme) => ({ - title: { +const styles = { + title: (theme) => ({ fontSize: theme.spacing(2), - }, + }), - root: { + root: (theme) => ({ minHeight: theme.spacing(30), display: "flex", alignItems: "center", @@ -143,14 +142,14 @@ const useStyles = makeStyles((theme) => ({ borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, padding: theme.spacing(6), - }, + }), - description: { + description: (theme) => ({ color: theme.palette.text.secondary, textAlign: "center", maxWidth: theme.spacing(58), marginTop: theme.spacing(1), - }, -})); + }), +} satisfies Record>; export default LicensesSettingsPageView; From 13db92daa19d47d5cd51de0f54f61f462d6f8424 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 16:55:34 +0000 Subject: [PATCH 08/27] emotion: `WorkspaceProxyPage` --- .../WorkspaceProxyPage/WorkspaceProxyPage.tsx | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx index eabf730ff4039..cf7e33507e69a 100644 --- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx +++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyPage.tsx @@ -1,12 +1,9 @@ -import { FC, PropsWithChildren } from "react"; +import { type FC, type PropsWithChildren } from "react"; import { Section } from "components/SettingsLayout/Section"; import { WorkspaceProxyView } from "./WorkspaceProxyView"; -import makeStyles from "@mui/styles/makeStyles"; import { useProxy } from "contexts/ProxyContext"; export const WorkspaceProxyPage: FC> = () => { - const styles = useStyles(); - const description = "Workspace proxies improve terminal and web app connections to workspaces."; @@ -22,7 +19,15 @@ export const WorkspaceProxyPage: FC> = () => { return (
({ + "& code": { + background: theme.palette.divider, + fontSize: 12, + padding: "2px 4px", + color: theme.palette.text.primary, + borderRadius: 2, + }, + })} description={description} layout="fluid" > @@ -38,16 +43,4 @@ export const WorkspaceProxyPage: FC> = () => { ); }; -const useStyles = makeStyles((theme) => ({ - section: { - "& code": { - background: theme.palette.divider, - fontSize: 12, - padding: "2px 4px", - color: theme.palette.text.primary, - borderRadius: 2, - }, - }, -})); - export default WorkspaceProxyPage; From 0587497d873a5d1ba438edffc603a17c57eaee20 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 16:57:32 +0000 Subject: [PATCH 09/27] emotion: `GroupsPageView` --- site/src/pages/GroupsPage/GroupsPageView.tsx | 27 +++++++++----------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index 8fe70c9c5ee26..2cecf5c06a08d 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -1,6 +1,6 @@ +import { type Interpolation, type Theme } from "@emotion/react"; import Button from "@mui/material/Button"; 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"; @@ -20,10 +20,10 @@ import { TableRowSkeleton, } from "components/TableLoader/TableLoader"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; -import { FC } from "react"; +import { type FC } from "react"; import { Link as RouterLink, useNavigate } from "react-router-dom"; import { Paywall } from "components/Paywall/Paywall"; -import { Group } from "api/typesGenerated"; +import type { Group } from "api/typesGenerated"; import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"; import { docs } from "utils/docs"; import Skeleton from "@mui/material/Skeleton"; @@ -44,7 +44,6 @@ export const GroupsPageView: FC = ({ const isLoading = Boolean(groups === undefined); const isEmpty = Boolean(groups && groups.length === 0); const navigate = useNavigate(); - const styles = useStyles(); return ( <> @@ -137,7 +136,7 @@ export const GroupsPageView: FC = ({ navigate(groupPageLink); } }} - className={styles.clickableTableRow} + css={styles.clickableTableRow} > = ({ -
- +
+
@@ -210,8 +207,8 @@ const TableLoader = () => { ); }; -const useStyles = makeStyles((theme) => ({ - clickableTableRow: { +const styles = { + clickableTableRow: (theme) => ({ cursor: "pointer", "&:hover td": { @@ -225,15 +222,15 @@ const useStyles = makeStyles((theme) => ({ "& .MuiTableCell-root:last-child": { paddingRight: theme.spacing(2), }, - }, - arrowRight: { + }), + arrowRight: (theme) => ({ color: theme.palette.text.secondary, width: 20, height: 20, - }, + }), arrowCell: { display: "flex", }, -})); +} satisfies Record>; export default GroupsPageView; From 0706d34aee709b7d85563fc9ed389ea3ff1a8dc3 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 17:00:07 +0000 Subject: [PATCH 10/27] emotion: `useClickableTableRow` --- site/src/hooks/useClickableTableRow.ts | 36 ++++++++++++-------------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/site/src/hooks/useClickableTableRow.ts b/site/src/hooks/useClickableTableRow.ts index 673cf78028f31..2f220193f2bcb 100644 --- a/site/src/hooks/useClickableTableRow.ts +++ b/site/src/hooks/useClickableTableRow.ts @@ -1,11 +1,11 @@ +import { useTheme, type CSSObject } from "@emotion/react"; import { type MouseEventHandler } from "react"; import { type TableRowProps } from "@mui/material/TableRow"; -import { makeStyles } from "@mui/styles"; import { useClickable, type UseClickableResult } from "./useClickable"; type UseClickableTableRowResult = UseClickableResult & TableRowProps & { - className: string; + css: CSSObject; hover: true; onAuxClick: MouseEventHandler; }; @@ -28,12 +28,24 @@ export const useClickableTableRow = ({ onDoubleClick, onMiddleClick, }: UseClickableTableRowConfig): UseClickableTableRowResult => { - const styles = useStyles(); const clickableProps = useClickable(onClick); + const theme = useTheme(); return { ...clickableProps, - className: styles.row, + css: { + cursor: "pointer", + + "&:focus": { + outline: `1px solid ${theme.palette.secondary.dark}`, + outlineOffset: -1, + }, + + "&:last-of-type": { + borderBottomLeftRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + }, + }, hover: true, onDoubleClick, onAuxClick: (event) => { @@ -46,19 +58,3 @@ export const useClickableTableRow = ({ }, }; }; - -const useStyles = makeStyles((theme) => ({ - row: { - cursor: "pointer", - - "&:focus": { - outline: `1px solid ${theme.palette.secondary.dark}`, - outlineOffset: -1, - }, - - "&:last-of-type": { - borderBottomLeftRadius: theme.shape.borderRadius, - borderBottomRightRadius: theme.shape.borderRadius, - }, - }, -})); From 21da106418adec86d3cd998e7be66159fcc3875d Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 17:33:56 +0000 Subject: [PATCH 11/27] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/UserAutocomplete/UserAutocomplete.tsx | 2 +- .../LicensesSettingsPage/LicensesSettingsPageView.tsx | 8 +++----- .../UserSettingsPage/SecurityPage/SingleSignOnSection.tsx | 3 +-- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx index ee224b92b2d6c..ae6ade772c553 100644 --- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx +++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx @@ -1,5 +1,5 @@ import { css } from "@emotion/css"; -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 2faf56a68a9b8..ede23c64e317e 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -106,13 +106,11 @@ const LicensesSettingsPageView: FC = ({ )} {!isLoading && licenses === null && ( -
+
- - You don't have any licenses! - - + You don't have any licenses! + You're missing out on high availability, RBAC, quotas, and much more. Contact{" "} sales or{" "} diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx index fec83a904ddc5..e15ccc83d5030 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx @@ -7,7 +7,7 @@ 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 { +import type { AuthMethods, LoginType, OIDCAuthMethod, @@ -19,7 +19,6 @@ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; import { getErrorMessage } from "api/errors"; import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; import { EmptyState } from "components/EmptyState/EmptyState"; -import { makeStyles } from "@mui/styles"; import Link from "@mui/material/Link"; import { docs } from "utils/docs"; From 3212c58354d4fe67736d0fb2c134fa75339b6467 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 17:43:12 +0000 Subject: [PATCH 12/27] emotion: `CreateWorkspacePageView` --- .../CreateWorkspacePageView.tsx | 49 +++++++++---------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx index a4afc25bfc4c2..edcee19798cfb 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx @@ -1,8 +1,10 @@ +import { css } from "@emotion/css"; +import { useTheme, type Interpolation, type Theme } from "@emotion/react"; import TextField from "@mui/material/TextField"; -import * as TypesGen from "api/typesGenerated"; +import type * as TypesGen from "api/typesGenerated"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { FormikContextType, useFormik } from "formik"; -import { FC, useEffect, useState } from "react"; +import { type FC, useEffect, useState } from "react"; import { getFormHelpers, nameValidator, @@ -17,7 +19,6 @@ import { FormFooter, HorizontalForm, } from "components/Form/Form"; -import { makeStyles } from "@mui/styles"; import { getInitialRichParameterValues, useValidationSchemaForRichParameters, @@ -31,7 +32,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Stack } from "components/Stack/Stack"; import { type ExternalAuthPollingState } from "./CreateWorkspacePage"; import { useSearchParams } from "react-router-dom"; -import { CreateWSPermissions } from "./permissions"; +import type { CreateWSPermissions } from "./permissions"; export interface CreateWorkspacePageViewProps { error: unknown; @@ -69,7 +70,7 @@ export const CreateWorkspacePageView: FC = ({ onSubmit, onCancel, }) => { - const styles = useStyles(); + const theme = useTheme(); const [owner, setOwner] = useState(defaultOwner); const { verifyExternalAuth, externalAuthErrors } = useExternalAuthVerification(externalAuth); @@ -123,14 +124,14 @@ export const CreateWorkspacePageView: FC = ({ {versionId && versionId !== template.active_version_id && ( - + - + This parameter has been preset, and cannot be modified. @@ -210,7 +211,16 @@ export const CreateWorkspacePageView: FC = ({ /> { return { ...getFieldHelpers( @@ -279,23 +289,12 @@ const useExternalAuthVerification = ( }; }; -const useStyles = makeStyles((theme) => ({ - hasDescription: { +const styles = { + hasDescription: (theme) => ({ paddingBottom: theme.spacing(2), - }, - description: { + }), + description: (theme) => ({ fontSize: 13, color: theme.palette.text.secondary, - }, - warningText: { - color: theme.palette.warning.light, - }, - warningSection: { - border: `1px solid ${theme.palette.warning.light}`, - borderRadius: 8, - backgroundColor: theme.palette.background.paper, - padding: theme.spacing(10), - marginLeft: theme.spacing(-10), - marginRight: theme.spacing(-10), - }, -})); + }), +} satisfies Record>; From 05df2f5cd6a77241953adbc8a2ed6c50b9a620dc Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:02:25 +0000 Subject: [PATCH 13/27] emotion: `WorkspaceStats` --- .../pages/WorkspacePage/WorkspaceStats.tsx | 129 +++++++++--------- 1 file changed, 63 insertions(+), 66 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx index bf4c37d3ecf52..861eaed5cd809 100644 --- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx @@ -1,6 +1,8 @@ +import { css } from "@emotion/css"; +import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import Link from "@mui/material/Link"; import { WorkspaceOutdatedTooltip } from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip"; -import { FC } from "react"; +import { type FC } from "react"; import { Link as RouterLink } from "react-router-dom"; import { createDayString } from "utils/createDayString"; import { @@ -9,13 +11,12 @@ import { isWorkspaceOn, workspaceUpdatePolicy, } from "utils/workspace"; -import { Workspace } from "api/typesGenerated"; +import type { Workspace } from "api/typesGenerated"; import { Stats, StatsItem } from "components/Stats/Stats"; import upperFirst from "lodash/upperFirst"; import { autostartDisplay, autostopDisplay } from "utils/schedule"; import IconButton from "@mui/material/IconButton"; import RemoveIcon from "@mui/icons-material/RemoveOutlined"; -import { makeStyles } from "@mui/styles"; import AddIcon from "@mui/icons-material/AddOutlined"; import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; @@ -70,26 +71,36 @@ export const WorkspaceStats: FC = ({ onDeadlineMinus, onDeadlinePlus, }) => { + const theme = useTheme(); const initiatedBy = getDisplayWorkspaceBuildInitiatedBy( workspace.latest_build, ); const displayTemplateName = getDisplayWorkspaceTemplateName(workspace); - const styles = useStyles(); const deadlinePlusEnabled = maxDeadlineIncrease >= 1; const deadlineMinusEnabled = maxDeadlineDecrease >= 1; const templatePoliciesEnabled = useTemplatePoliciesEnabled(); + const paperStyles = css` + padding: ${theme.spacing(3)}; + max-width: ${theme.spacing(36)}; + margin-top: ${theme.spacing(1)}; + border-radius: 4px; + display: flex; + flex-direction: column; + gap: ${theme.spacing(1)}; + `; + return ( <> - + } /> = ({ } /> @@ -124,7 +135,7 @@ export const WorkspaceStats: FC = ({ } /> @@ -135,10 +146,10 @@ export const WorkspaceStats: FC = ({ /> {shouldDisplayScheduleLabel(workspace) && ( + = ({ : autostartDisplay(workspace.autostart_schedule)} {canUpdateWorkspace && canEditDeadline(workspace) && ( - + = ({ disabled={!deadlinePlusEnabled} size="small" title="Add hours to deadline" - className={styles.scheduleButton} + css={styles.scheduleButton} > = ({ )} {workspace.latest_build.daily_cost > 0 && ( = ({ {templatePoliciesEnabled && ( void; }) => { - const styles = useStyles(); const popover = usePopover(); return ( <> - Add hours to deadline - + Add hours to deadline + Delay the shutdown of this workspace for a few more hours. This is only applied once.
{ e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -264,9 +274,9 @@ const AddTimeContent = (props: { type="number" size="small" fullWidth - className={styles.timePopoverField} + css={styles.timePopoverField} InputProps={{ - className: styles.timePopoverFieldInput, + className: timePopoverFieldInputStyles, }} inputProps={{ min: 0, @@ -276,7 +286,7 @@ const AddTimeContent = (props: { }} /> -
@@ -288,20 +298,17 @@ export const DecreaseTimeContent = (props: { onDeadlineMinus: (hours: number) => void; maxDeadlineDecrease: number; }) => { - const styles = useStyles(); const popover = usePopover(); return ( <> - - Subtract hours to deadline - - + Subtract hours to deadline + Anticipate the shutdown of this workspace for a few more hours. This is only applied once.
{ e.preventDefault(); const formData = new FormData(e.currentTarget); @@ -315,9 +322,9 @@ export const DecreaseTimeContent = (props: { type="number" size="small" fullWidth - className={styles.timePopoverField} + css={styles.timePopoverField} InputProps={{ - className: styles.timePopoverFieldInput, + className: timePopoverFieldInputStyles, }} inputProps={{ min: 0, @@ -327,7 +334,7 @@ export const DecreaseTimeContent = (props: { }} /> -
@@ -353,8 +360,14 @@ const getScheduleLabel = (workspace: Workspace) => { return isWorkspaceOn(workspace) ? "Stops at" : "Starts at"; }; -const useStyles = makeStyles((theme) => ({ - stats: { +const timePopoverFieldInputStyles = css` + font-size: 14px; + padding: 0px; + border-radius: 4px; +`; + +const styles = { + stats: (theme) => ({ padding: 0, border: 0, gap: theme.spacing(6), @@ -367,7 +380,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "flex-start", gap: theme.spacing(1), }, - }, + }), statsItem: { flexDirection: "column", @@ -380,19 +393,19 @@ const useStyles = makeStyles((theme) => ({ }, }, - scheduleValue: { + scheduleValue: (theme) => ({ display: "flex", alignItems: "center", gap: theme.spacing(1.5), - }, + }), - scheduleControls: { + scheduleControls: (theme) => ({ display: "flex", alignItems: "center", gap: theme.spacing(0.5), - }, + }), - scheduleButton: { + scheduleButton: (theme) => ({ border: `1px solid ${theme.palette.divider}`, borderRadius: 4, width: 20, @@ -402,47 +415,31 @@ const useStyles = makeStyles((theme) => ({ width: theme.spacing(1.5), height: theme.spacing(1.5), }, - }, - - timePopoverPaper: { - padding: theme.spacing(3), - maxWidth: theme.spacing(36), - marginTop: theme.spacing(1), - borderRadius: 4, - display: "flex", - flexDirection: "column", - gap: theme.spacing(1), - }, + }), timePopoverTitle: { fontWeight: 600, }, - timePopoverDescription: { + timePopoverDescription: (theme) => ({ color: theme.palette.text.secondary, - }, + }), - timePopoverForm: { + timePopoverForm: (theme) => ({ display: "flex", alignItems: "center", gap: theme.spacing(1), padding: theme.spacing(1, 0), - }, + }), timePopoverField: { margin: 0, }, - timePopoverFieldInput: { - fontSize: 14, - padding: theme.spacing(0), - borderRadius: 4, - }, - - timePopoverButton: { + timePopoverButton: (theme) => ({ borderRadius: 4, paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), flexShrink: 0, - }, -})); + }), +} satisfies Record>; From 90a62524da6a261ca89c6697ebadbd38913efa21 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:03:07 +0000 Subject: [PATCH 14/27] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/TableToolbar/TableToolbar.tsx | 2 +- site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx index 9c5ef7708f278..ae249ba093f0e 100644 --- a/site/src/components/TableToolbar/TableToolbar.tsx +++ b/site/src/components/TableToolbar/TableToolbar.tsx @@ -5,7 +5,7 @@ import Skeleton from "@mui/material/Skeleton"; export const TableToolbar = styled(Box)(({ theme }) => ({ fontSize: 13, marginBottom: theme.spacing(1), - marginTop: theme.spacing(0), + marginTop: 0, height: 36, // The size of a small button color: theme.palette.text.secondary, "& strong": { color: theme.palette.text.primary }, diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx index f4d32f3f52f32..90b1a96d769d3 100644 --- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx +++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx @@ -77,7 +77,7 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) { flexFlow: "column nowrap", fontSize: theme.typography.body2.fontSize, padding: theme.spacing(0.5, 0.25), - gap: theme.spacing(0), + gap: 0, }} > {userGroups.map((group) => { From f61ad920860177cf7b169836184bf8c3c9ab1de6 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:04:57 +0000 Subject: [PATCH 15/27] emotion: `StarterTemplatePageView` --- .../StarterTemplatePageView.tsx | 66 +++++++++---------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index 0264ce0eef4b4..c9cbe0d793203 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -1,5 +1,6 @@ import Button from "@mui/material/Button"; import { makeStyles } from "@mui/styles"; +import { useTheme } from "@emotion/react"; import { Loader } from "components/Loader/Loader"; import { Margins } from "components/Margins/Margins"; import { MemoizedMarkdown } from "components/Markdown/Markdown"; @@ -8,13 +9,13 @@ import { PageHeaderSubtitle, PageHeaderTitle, } from "components/PageHeader/PageHeader"; -import { FC } from "react"; +import { type FC } from "react"; import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined"; import PlusIcon from "@mui/icons-material/AddOutlined"; import { Stack } from "components/Stack/Stack"; import { Link } from "react-router-dom"; import { ErrorAlert } from "components/Alert/ErrorAlert"; -import { TemplateExample } from "api/typesGenerated"; +import type { TemplateExample } from "api/typesGenerated"; export interface StarterTemplatePageViewProps { starterTemplate?: TemplateExample; @@ -25,7 +26,7 @@ export const StarterTemplatePageView: FC = ({ starterTemplate, error, }) => { - const styles = useStyles(); + const theme = useTheme(); if (error) { return ( @@ -65,7 +66,19 @@ export const StarterTemplatePageView: FC = ({ } > -
+
@@ -77,39 +90,24 @@ export const StarterTemplatePageView: FC = ({ -
-
+
+
{starterTemplate.markdown}
); }; - -export const useStyles = makeStyles((theme) => { - return { - icon: { - height: theme.spacing(6), - width: theme.spacing(6), - display: "flex", - alignItems: "center", - justifyContent: "center", - - "& img": { - width: "100%", - }, - }, - - markdownSection: { - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadius, - }, - - markdownWrapper: { - padding: theme.spacing(5, 5, 8), - maxWidth: 800, - margin: "auto", - }, - }; -}); From 44f9d4232c26c3e53560b0ea49537a06917db4dc Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:07:47 +0000 Subject: [PATCH 16/27] emotion: `WorkspaceBuildProgress` --- .../WorkspacePage/WorkspaceBuildProgress.tsx | 43 ++++++++++--------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx index 64fdabc67c5f0..03fd0bf65e85b 100644 --- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx @@ -1,8 +1,9 @@ +import { css } from "@emotion/css"; +import { type Interpolation, type Theme } from "@emotion/react"; import LinearProgress from "@mui/material/LinearProgress"; -import makeStyles from "@mui/styles/makeStyles"; -import { TransitionStats, Template, Workspace } from "api/typesGenerated"; -import dayjs, { Dayjs } from "dayjs"; -import { FC, useEffect, useState } from "react"; +import type { TransitionStats, Template, Workspace } from "api/typesGenerated"; +import dayjs, { type Dayjs } from "dayjs"; +import { type FC, useEffect, useState } from "react"; import capitalize from "lodash/capitalize"; import duration from "dayjs/plugin/duration"; @@ -68,7 +69,6 @@ export const WorkspaceBuildProgress: FC = ({ workspace, transitionStats: transitionStats, }) => { - const styles = useStyles(); const job = workspace.latest_build.job; const [progressValue, setProgressValue] = useState(0); const [progressText, setProgressText] = useState( @@ -107,7 +107,7 @@ export const WorkspaceBuildProgress: FC = ({ return <>; } return ( -
+
= ({ // If a transition is set, there is a moment on new load where the // bar accelerates to progressValue and then rapidly decelerates, which // is not indicative of true progress. - classes={{ bar: styles.noTransition }} + classes={{ + bar: css` + transition: none; + `, + }} /> -
-
+
+
{capitalize(workspace.latest_build.status)} workspace...
-
+
{progressText}
@@ -137,23 +141,20 @@ export const WorkspaceBuildProgress: FC = ({ ); }; -const useStyles = makeStyles((theme) => ({ - stack: { +const styles = { + stack: (theme) => ({ paddingLeft: theme.spacing(0.2), paddingRight: theme.spacing(0.2), - }, - noTransition: { - transition: "none", - }, - barHelpers: { + }), + barHelpers: (theme) => ({ display: "flex", justifyContent: "space-between", marginTop: theme.spacing(0.5), - }, - label: { + }), + label: (theme) => ({ fontSize: 12, display: "block", fontWeight: 600, color: theme.palette.text.secondary, - }, -})); + }), +} satisfies Record>; From ec8e7b60387dafa7e73cdf0a8e8fa49cf988b302 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:10:11 +0000 Subject: [PATCH 17/27] emotion: `WorkspaceBuildPageView` --- .../WorkspaceBuildPageView.tsx | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx index c764a30bb67a9..15ae9ca17359c 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.tsx @@ -1,10 +1,10 @@ +import { type Interpolation, type Theme } from "@emotion/react"; import { BuildAvatar } from "components/BuildAvatar/BuildAvatar"; -import { FC } from "react"; +import { type FC } from "react"; import { ProvisionerJobLog, WorkspaceBuild } from "api/typesGenerated"; import { Loader } from "components/Loader/Loader"; import { Stack } from "components/Stack/Stack"; import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"; -import { makeStyles } from "@mui/styles"; import { FullWidthPageHeader, PageHeaderTitle, @@ -48,8 +48,6 @@ export const WorkspaceBuildPageView: FC = ({ builds, activeBuildNumber, }) => { - const styles = useStyles(); - if (!build) { return ; } @@ -65,9 +63,9 @@ export const WorkspaceBuildPageView: FC = ({
- + = ({ } /> @@ -240,8 +238,8 @@ const BuildSidebarItemSkeleton = () => { ); }; -const useStyles = makeStyles((theme) => ({ - stats: { +const styles = { + stats: (theme) => ({ padding: 0, border: 0, gap: theme.spacing(6), @@ -254,7 +252,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: "flex-start", gap: theme.spacing(1), }, - }, + }), statsItem: { flexDirection: "column", @@ -266,4 +264,4 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 500, }, }, -})); +} satisfies Record>; From 0bf94491c0e0ae2d9e5aa32ee62d8f92cfc003f4 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 1 Nov 2023 18:14:28 +0000 Subject: [PATCH 18/27] emotion: `EditRolesButton` --- .../UsersPage/UsersTable/EditRolesButton.tsx | 70 ++++++++++--------- 1 file changed, 36 insertions(+), 34 deletions(-) diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx index eca9bcf389f9f..e4c9a500d730e 100644 --- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx +++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx @@ -1,7 +1,8 @@ +import { css } from "@emotion/css"; +import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import IconButton from "@mui/material/IconButton"; import { EditSquare } from "components/Icons/EditSquare"; -import { FC } from "react"; -import { makeStyles } from "@mui/styles"; +import { type FC } from "react"; import { Stack } from "components/Stack/Stack"; import Checkbox from "@mui/material/Checkbox"; import UserIcon from "@mui/icons-material/PersonOutline"; @@ -34,15 +35,13 @@ const Option: React.FC<{ isChecked: boolean; onChange: (roleName: string) => void; }> = ({ value, name, description, isChecked, onChange }) => { - const styles = useStyles(); - return ( -