diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 2c91e4aa0b..d2d49662cf 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -1,6 +1,6 @@ -import type { Interpolation, Theme } from "@emotion/react"; import TextField from "@mui/material/TextField"; import { type FC, type FormEvent, useId, useState } from "react"; +import { Alert } from "#/components/Alert/Alert"; import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"; interface DeleteDialogProps { @@ -65,7 +65,11 @@ export const DeleteDialog: FC = ({

{verb ?? "Deleting"} this {entity} is irreversible!

- {Boolean(info) &&
{info}
} + {Boolean(info) && ( + + {info} + + )}

Type {name} below to confirm.

@@ -102,13 +106,3 @@ export const DeleteDialog: FC = ({ /> ); }; - -const styles = { - callout: (theme) => ({ - backgroundColor: theme.roles.danger.background, - border: `1px solid ${theme.roles.danger.outline}`, - borderRadius: theme.shape.borderRadius, - color: theme.roles.danger.text, - padding: "8px 16px", - }), -} satisfies Record>; diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx index ac636eb87c..1b1ea7c553 100644 --- a/site/src/components/FileUpload/FileUpload.tsx +++ b/site/src/components/FileUpload/FileUpload.tsx @@ -1,9 +1,9 @@ -import { css, type Interpolation, type Theme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react"; import { type DragEvent, type FC, type ReactNode, useRef } from "react"; import { Button } from "#/components/Button/Button"; import { useClickable } from "#/hooks/useClickable"; +import { cn } from "#/utils/cn"; interface FileUploadProps { isUploading: boolean; @@ -34,10 +34,7 @@ export const FileUpload: FC = ({ if (!isUploading && file) { return ( -
+
{file.name} @@ -59,12 +56,16 @@ export const FileUpload: FC = ({ <>
-
+
{isUploading ? ( ) : ( @@ -73,8 +74,10 @@ export const FileUpload: FC = ({
- {title} - {description} + {title} + + {description} +
@@ -83,7 +86,7 @@ export const FileUpload: FC = ({ type="file" data-testid="file-upload" ref={inputRef} - css={styles.input} + className="hidden" accept={extensions?.map((ext) => `.${ext}`).join(",")} onChange={(event) => { const file = event.currentTarget.files?.[0]; @@ -136,58 +139,3 @@ const useFileDrop = ( onDrop, }; }; - -const styles = { - root: (theme) => css` - display: flex; - align-items: center; - justify-content: center; - border-radius: 8px; - border: 2px dashed ${theme.palette.divider}; - padding: 48px; - cursor: pointer; - - &:hover { - background-color: ${theme.palette.background.paper}; - } - `, - - disabled: { - pointerEvents: "none", - opacity: 0.75, - }, - - // Used to maintain the size of icon and spinner - iconWrapper: { - width: 64, - height: 64, - display: "flex", - alignItems: "center", - justifyContent: "center", - }, - - title: { - fontSize: 16, - lineHeight: "1", - }, - - description: (theme) => ({ - color: theme.palette.text.secondary, - textAlign: "center", - maxWidth: 400, - fontSize: 14, - lineHeight: "1.5", - marginTop: 4, - }), - - input: { - display: "none", - }, - - file: (theme) => ({ - borderRadius: 8, - border: `1px solid ${theme.palette.divider}`, - padding: 16, - background: theme.palette.background.paper, - }), -} satisfies Record>; diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx index 2f07a6a711..5b4d4d3343 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -1,4 +1,4 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import { type ComponentProps, createContext, @@ -91,27 +91,34 @@ export const FormSection: FC = ({ return (
-

+

{title}

{alpha && } {deprecated && }
-
{description}
+
+ {description} +
{children} @@ -124,71 +131,10 @@ export const FormFields: FC> = ({ ...props }) => { return ( -
+
); }; -const styles = { - formSection: (theme) => ({ - display: "flex", - alignItems: "flex-start", - flexDirection: "column", - gap: 24, - - [theme.breakpoints.down("lg")]: { - flexDirection: "column", - gap: 16, - }, - }), - formSectionHorizontal: { - flexDirection: "row", - gap: 120, - }, - formSectionInfo: (theme) => ({ - width: "100%", - flexShrink: 0, - top: 24, - - [theme.breakpoints.down("md")]: { - width: "100%", - position: "initial" as const, - }, - }), - formSectionInfoHorizontal: (theme) => ({ - maxWidth: 312, - - [theme.breakpoints.up("lg")]: { - position: "sticky", - }, - }), - formSectionInfoTitle: (theme) => ({ - fontSize: 20, - color: theme.palette.text.primary, - fontWeight: 500, - margin: 0, - marginBottom: 8, - display: "flex", - flexDirection: "row", - alignItems: "center", - gap: 12, - }), - - formSectionInfoDescription: (theme) => ({ - fontSize: 14, - color: theme.palette.text.secondary, - lineHeight: "160%", - margin: 0, - }), - - formSectionFields: { - width: "100%", - }, -} satisfies Record>; - export const FormFooter: FC> = ({ className, ...props diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx index 3effedbb88..b28ebeb3f7 100644 --- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx +++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import CircularProgress from "@mui/material/CircularProgress"; import Link from "@mui/material/Link"; import { isAxiosError } from "axios"; @@ -72,7 +71,7 @@ export const GitDeviceAuth: FC = ({ deviceExchangeError, }) => { let status = ( -

+

Checking for authentication...

@@ -131,10 +130,12 @@ export const GitDeviceAuth: FC = ({ return (
-

+

Copy your one-time code:  -

- {externalAuthDevice.user_code} +
+ + {externalAuthDevice.user_code} +  {" "} = ({
Then open the link below and paste it:

-
+
= ({
); }; - -const styles = { - text: (theme) => ({ - fontSize: 16, - color: theme.palette.text.secondary, - textAlign: "center", - lineHeight: "160%", - margin: 0, - }), - - copyCode: { - display: "inline-flex", - alignItems: "center", - }, - - code: (theme) => ({ - fontWeight: "bold", - color: theme.palette.text.primary, - }), - - links: { - display: "flex", - gap: 4, - margin: 16, - flexDirection: "column", - }, - - link: { - display: "flex", - alignItems: "center", - justifyContent: "center", - fontSize: 16, - gap: 8, - }, - - status: (theme) => ({ - display: "flex", - alignItems: "center", - justifyContent: "center", - gap: 8, - color: theme.palette.text.disabled, - }), -} satisfies Record>; diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx index 24740fd841..73b9f7dd93 100644 --- a/site/src/components/Pill/Pill.stories.tsx +++ b/site/src/components/Pill/Pill.stories.tsx @@ -64,6 +64,13 @@ export const Active: Story = { }, }; +export const Muted: Story = { + args: { + children: "Muted", + type: "muted" as const, + }, +}; + export const WithIcon: Story = { args: { children: "Information", diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx index a62e52e79f..6793f52bb3 100644 --- a/site/src/components/Pill/Pill.tsx +++ b/site/src/components/Pill/Pill.tsx @@ -1,46 +1,58 @@ -import type { Interpolation, Theme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import CircularProgress, { type CircularProgressProps, } from "@mui/material/CircularProgress"; import { type FC, type ReactNode, useMemo } from "react"; import type { ThemeRole } from "#/theme/roles"; +import { cn } from "#/utils/cn"; + +type PillType = ThemeRole | "muted"; type PillProps = React.ComponentPropsWithRef<"div"> & { icon?: ReactNode; - type?: ThemeRole; + type?: PillType; size?: "md" | "lg"; }; -const themeStyles = (type: ThemeRole) => (theme: Theme) => { - const palette = theme.roles[type]; - return { - backgroundColor: palette.background, - borderColor: palette.outline, - }; -}; - -const PILL_HEIGHT = 24; const PILL_ICON_SIZE = 14; -const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2; export const Pill: FC = ({ icon, type = "inactive", children, size = "md", + className, + style, ...divProps }) => { - const typeStyles = useMemo(() => themeStyles(type), [type]); + const theme = useTheme(); + const roleColors = useMemo(() => { + if (type === "muted") { + return undefined; + } + const palette = theme.roles[type]; + return { + backgroundColor: palette.background, + borderColor: palette.outline, + color: palette.text, + }; + }, [theme, type]); return (
svg]:size-[14px]", + type === "muted" && + "bg-surface-tertiary border-border-secondary text-content-secondary", + size === "md" && "h-6 gap-[5px] px-3", + Boolean(icon) && size === "md" && "pl-[5px]", + size === "lg" && "h-[30px] gap-[10px] px-4", + Boolean(icon) && size === "lg" && "pl-[10px]", + className, + )} + style={{ ...roleColors, ...style }} {...divProps} > {icon} @@ -50,53 +62,13 @@ export const Pill: FC = ({ }; export const PillSpinner: FC = (props) => { + const theme = useTheme(); return ( - + ); }; - -const styles = { - pill: (theme) => ({ - fontSize: 12, - color: theme.experimental.l1.text, - cursor: "default", - display: "inline-flex", - alignItems: "center", - whiteSpace: "nowrap", - fontWeight: 400, - borderWidth: 1, - borderStyle: "solid", - borderRadius: 99999, - lineHeight: 1, - height: PILL_HEIGHT, - gap: PILL_ICON_SPACING, - paddingLeft: 12, - paddingRight: 12, - - "& svg": { - width: PILL_ICON_SIZE, - height: PILL_ICON_SIZE, - }, - }), - - pillWithIcon: { - paddingLeft: PILL_ICON_SPACING, - }, - - pillLg: { - gap: PILL_ICON_SPACING * 2, - padding: "14px 16px", - }, - - pillLgWithIcon: { - paddingLeft: PILL_ICON_SPACING * 2, - }, - - spinner: (theme) => ({ - color: theme.experimental.l1.text, - // It is necessary to align it with the MUI Icons internal padding - "& svg": { - transform: "scale(.75)", - }, - }), -} satisfies Record>; diff --git a/site/src/modules/provisioners/ProvisionerTag.tsx b/site/src/modules/provisioners/ProvisionerTag.tsx index 3ad4562d82..be2b5f4dd1 100644 --- a/site/src/modules/provisioners/ProvisionerTag.tsx +++ b/site/src/modules/provisioners/ProvisionerTag.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react"; import type { ComponentProps, FC } from "react"; import { Button } from "#/components/Button/Button"; @@ -85,9 +84,9 @@ const BooleanPill: FC = ({ size="lg" icon={ value ? ( - + ) : ( - + ) } {...divProps} @@ -96,12 +95,3 @@ const BooleanPill: FC = ({ ); }; - -const styles = { - truePill: (theme) => ({ - color: theme.roles.active.outline, - }), - falsePill: (theme) => ({ - color: theme.roles.danger.outline, - }), -} satisfies Record>; diff --git a/site/src/modules/resources/AgentRowPreview.tsx b/site/src/modules/resources/AgentRowPreview.tsx index 00db3bde07..cd119c4df8 100644 --- a/site/src/modules/resources/AgentRowPreview.tsx +++ b/site/src/modules/resources/AgentRowPreview.tsx @@ -1,8 +1,8 @@ -import type { Interpolation, Theme } from "@emotion/react"; import type { FC } from "react"; import type { WorkspaceAgent } from "#/api/typesGenerated"; import { TerminalIcon } from "#/components/Icons/TerminalIcon"; import { VSCodeIcon } from "#/components/Icons/VSCodeIcon"; +import { cn } from "#/utils/cn"; import { DisplayAppNameMap } from "./AppLink/AppLink"; import { AppPreview } from "./AppLink/AppPreview"; import { BaseIcon } from "./AppLink/BaseIcon"; @@ -23,55 +23,36 @@ export const AgentRowPreview: FC = ({ return (
-
-
+
+
-
+
({ - [theme.breakpoints.up("sm")]: { - minWidth: alignValues ? 240 : undefined, - }, - }), - ]} + className={cn( + "flex shrink-0 flex-row items-baseline gap-2 max-md:w-fit max-md:flex-col max-md:items-start max-md:gap-2", + alignValues && "sm:min-w-[240px]", + )} > Agent: - {agent.name} + {agent.name}
({ - [theme.breakpoints.up("sm")]: { - minWidth: alignValues ? 100 : undefined, - }, - }), - ]} + className={cn( + "flex shrink-0 flex-row items-baseline gap-2 max-md:w-fit max-md:flex-col max-md:items-start max-md:gap-2", + alignValues && "sm:min-w-[100px]", + )} > OS: - + {agent.operating_system}
-
+
Apps:
{/* We display all modules returned in agent.apps */} @@ -112,7 +93,7 @@ export const AgentRowPreview: FC = ({ ) )} {agent.apps.length === 0 && agent.display_apps.length === 0 && ( - None + None )}
@@ -121,79 +102,3 @@ export const AgentRowPreview: FC = ({
); }; - -const styles = { - agentRow: (theme) => ({ - padding: "16px 32px", - backgroundColor: theme.palette.background.paper, - fontSize: 16, - position: "relative", - - "&:not(:last-child)": { - paddingBottom: 0, - }, - - "&:after": { - content: "''", - height: "100%", - width: 2, - backgroundColor: theme.palette.divider, - position: "absolute", - top: 0, - left: 43, - }, - }), - - agentStatusWrapper: { - width: 24, - display: "flex", - justifyContent: "center", - flexShrink: 0, - }, - - agentStatusPreview: (theme) => ({ - width: 10, - height: 10, - border: `2px solid ${theme.palette.text.secondary}`, - borderRadius: "100%", - position: "relative", - zIndex: 1, - background: theme.palette.background.paper, - }), - - agentName: { - fontWeight: 600, - }, - - agentOS: { - textTransform: "capitalize", - fontSize: 14, - }, - - agentData: (theme) => ({ - fontSize: 14, - color: theme.palette.text.secondary, - - [theme.breakpoints.down("md")]: { - gap: 16, - flexWrap: "wrap", - }, - }), - - agentDataValue: (theme) => ({ - color: theme.palette.text.primary, - }), - - noShrink: { - flexShrink: 0, - }, - - agentDataItem: (theme) => ({ - [theme.breakpoints.down("md")]: { - flexDirection: "column", - alignItems: "flex-start", - gap: 8, - width: "fit-content", - }, - }), -} satisfies Record>; diff --git a/site/src/modules/resources/AgentStatus.tsx b/site/src/modules/resources/AgentStatus.tsx index 65c9eb007d..fc0e8f65c8 100644 --- a/site/src/modules/resources/AgentStatus.tsx +++ b/site/src/modules/resources/AgentStatus.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Link from "@mui/material/Link"; import { TriangleAlertIcon } from "lucide-react"; import type { FC } from "react"; @@ -24,6 +23,13 @@ import { agentScriptMessages, } from "../workspaces/health"; +const statusDotBaseClassName = "size-1.5 shrink-0 rounded-full"; +const statusDotConnectedClassName = + "bg-content-success shadow-[0_0_12px_0] shadow-content-success"; +const statusDotDisconnectedClassName = "bg-content-secondary"; +const statusDotConnectingClassName = + "bg-content-link animate-pulse [animation-delay:0.5s]"; + // If we think in the agent status and lifecycle into a single enum/state I'd // say we would have: connecting, timeout, disconnected, connected:created, // connected:starting, connected:start_timeout, connected:start_error, @@ -86,7 +92,7 @@ const ReadyLifecycle: FC = () => { role="status" data-testid="agent-status-ready" aria-label="Ready" - css={[styles.status, styles.connected]} + className={cn(statusDotBaseClassName, statusDotConnectedClassName)} /> ); }; @@ -98,7 +104,7 @@ const StartingLifecycle: FC = () => {
Starting... @@ -146,7 +152,7 @@ const ShuttingDownLifecycle: FC = () => {
Stopping... @@ -180,7 +186,7 @@ const OffLifecycle: FC = () => {
Stopped @@ -225,7 +231,7 @@ const DisconnectedStatus: FC = () => {
Disconnected @@ -240,7 +246,7 @@ const ConnectingStatus: FC = () => {
Connecting... @@ -310,38 +316,3 @@ export const DevcontainerStatus: FC = ({ return ; }; - -const styles = { - status: { - width: 6, - height: 6, - borderRadius: "100%", - flexShrink: 0, - }, - - connected: (theme) => ({ - backgroundColor: theme.palette.success.light, - boxShadow: `0 0 12px 0 ${theme.palette.success.light}`, - }), - - disconnected: (theme) => ({ - backgroundColor: theme.palette.text.secondary, - }), - - "@keyframes pulse": { - "0%": { - opacity: 1, - }, - "50%": { - opacity: 0.4, - }, - "100%": { - opacity: 1, - }, - }, - - connecting: (theme) => ({ - backgroundColor: theme.palette.info.light, - animation: "$pulse 1.5s 0.5s ease-in-out forwards infinite", - }), -} satisfies Record>; diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx index c7cc0a9edf..ebd5be8929 100644 --- a/site/src/modules/resources/ResourceCard.tsx +++ b/site/src/modules/resources/ResourceCard.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import { Children, type FC, type JSX, useState } from "react"; import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated"; import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown"; @@ -13,66 +12,6 @@ import { import { ResourceAvatar } from "./ResourceAvatar"; import { SensitiveValue } from "./SensitiveValue"; -const styles = { - resourceCard: (theme) => ({ - border: `1px solid ${theme.palette.divider}`, - background: theme.palette.background.default, - - "&:not(:last-child)": { - borderBottom: 0, - }, - - "&:first-of-type": { - borderTopLeftRadius: 8, - borderTopRightRadius: 8, - }, - - "&:last-child": { - borderBottomLeftRadius: 8, - borderBottomRightRadius: 8, - }, - }), - - resourceCardProfile: { - flexShrink: 0, - width: "fit-content", - minWidth: 220, - }, - - resourceCardHeader: (theme) => ({ - padding: "24px 32px", - borderBottom: `1px solid ${theme.palette.divider}`, - - "&:last-child": { - borderBottom: 0, - }, - - [theme.breakpoints.down("md")]: { - width: "100%", - overflow: "scroll", - }, - }), - - metadata: () => ({ - lineHeight: "1.5", - fontSize: 14, - }), - - metadataLabel: (theme) => ({ - fontSize: 12, - color: theme.palette.text.secondary, - textOverflow: "ellipsis", - overflow: "hidden", - whiteSpace: "nowrap", - }), - - metadataValue: () => ({ - textOverflow: "ellipsis", - overflow: "hidden", - whiteSpace: "nowrap", - }), -} satisfies Record>; - interface ResourceCardProps { resource: WorkspaceResource; agentRow: (agent: WorkspaceAgent) => JSX.Element; @@ -95,18 +34,22 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { const gridWidth = mLength === 1 ? 1 : 4; return ( -
-
-
+
+
+
-
-
{resource.type}
-
{resource.name}
+
+
+ {resource.type} +
+
+ {resource.name} +
@@ -117,18 +60,22 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { }} > {resource.daily_cost > 0 && ( -
-
+
+
Daily cost
-
{resource.daily_cost}
+
+ {resource.daily_cost} +
)} {visibleMetadata.map((meta) => { return ( -
-
{meta.key}
-
+
+
+ {meta.key} +
+
{meta.sensitive ? ( ) : ( diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx index a651c67ed0..5fa57842c1 100644 --- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx +++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Link from "@mui/material/Link"; import type { FC, HTMLAttributes } from "react"; import { Link as RouterLink } from "react-router"; @@ -6,6 +5,7 @@ import type { TemplateExample } from "#/api/typesGenerated"; import { Button } from "#/components/Button/Button"; import { ExternalImage } from "#/components/ExternalImage/ExternalImage"; import { Pill } from "#/components/Pill/Pill"; +import { cn } from "#/utils/cn"; type TemplateExampleCardProps = HTMLAttributes & { example: TemplateExample; @@ -15,22 +15,35 @@ type TemplateExampleCardProps = HTMLAttributes & { export const TemplateExampleCard: FC = ({ example, activeTag, + className, ...divProps }) => { return ( -
-
-
+
+
+
-
+
{example.tags.map((tag) => ( - + {tag} @@ -40,7 +53,7 @@ export const TemplateExampleCard: FC = ({

{example.name}

- + {example.description}{" "} = ({
-
+
); }; - -const styles = { - card: (theme) => ({ - width: "320px", - padding: 24, - borderRadius: 6, - border: `1px solid ${theme.palette.divider}`, - textAlign: "left", - color: "inherit", - display: "flex", - flexDirection: "column", - }), - - header: { - display: "flex", - alignItems: "center", - justifyContent: "space-between", - marginBottom: 24, - }, - - icon: { - flexShrink: 0, - paddingTop: 4, - width: 32, - height: 32, - }, - - tags: { - display: "flex", - flexWrap: "wrap", - gap: 8, - justifyContent: "end", - }, - - tag: (theme) => ({ - borderColor: theme.palette.divider, - textDecoration: "none", - cursor: "pointer", - "&: hover": { - borderColor: theme.palette.primary.main, - }, - }), - - activeTag: (theme) => ({ - borderColor: theme.roles.active.outline, - backgroundColor: theme.roles.active.background, - }), - - description: (theme) => ({ - fontSize: 13, - color: theme.palette.text.secondary, - lineHeight: "1.6", - display: "block", - }), - - useButtonContainer: { - display: "flex", - gap: 12, - flexDirection: "column", - paddingTop: 24, - marginTop: "auto", - alignItems: "center", - }, -} satisfies Record>; diff --git a/site/src/modules/templates/TemplateUpdateMessage.tsx b/site/src/modules/templates/TemplateUpdateMessage.tsx index 6f4eca2b4f..18636f0eff 100644 --- a/site/src/modules/templates/TemplateUpdateMessage.tsx +++ b/site/src/modules/templates/TemplateUpdateMessage.tsx @@ -1,6 +1,6 @@ -import type { Interpolation, Theme } from "@emotion/react"; import type { FC } from "react"; import { MemoizedMarkdown } from "#/components/Markdown/Markdown"; +import { cn } from "#/utils/cn"; interface TemplateUpdateMessageProps { children: string; @@ -10,35 +10,16 @@ export const TemplateUpdateMessage: FC = ({ children, }) => { return ( - {children} + + {children} + ); }; - -const styles = { - versionMessage: { - fontSize: 14, - lineHeight: 1.2, - - "& h1, & h2, & h3, & h4, & h5, & h6": { - margin: "0 0 0.75em", - }, - "& h1": { - fontSize: "1.2em", - }, - "& h2": { - fontSize: "1.15em", - }, - "& h3": { - fontSize: "1.1em", - }, - "& h4": { - fontSize: "1.05em", - }, - "& h5": { - fontSize: "1em", - }, - "& h6": { - fontSize: "0.95em", - }, - }, -} satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx index 7089bc0c16..1d4e16d22a 100644 --- a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx +++ b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx @@ -1,5 +1,4 @@ import { css } from "@emotion/css"; -import type { Interpolation, Theme } from "@emotion/react"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; @@ -60,13 +59,13 @@ export const UpdateBuildParametersDialog: FC< > Workspace parameters - + This template has new parameters that must be configured to complete the update @@ -96,7 +95,7 @@ export const UpdateBuildParametersDialog: FC< )} - +
); }; - -const styles = { - root: { - width: 800, - height: "100%", - display: "flex", - flexDirection: "column", - }, - header: (theme) => ({ - height: navHeight, - padding: "0 24px", - display: "flex", - alignItems: "center", - justifyContent: "space-between", - borderBottom: `1px solid ${theme.palette.divider}`, - }), - title: { - margin: 0, - fontWeight: 500, - fontSize: 16, - }, - logs: (theme) => ({ - flex: 1, - overflow: "auto", - backgroundColor: theme.palette.background.default, - }), -} satisfies Record>; - -const bannerStyles = { - root: { - display: "flex", - alignItems: "center", - justifyContent: "center", - padding: 40, - }, - content: { - display: "flex", - flexDirection: "column", - alignItems: "center", - textAlign: "center", - maxWidth: 360, - }, - icon: (theme) => ({ - color: theme.roles.warning.fill.outline, - }), - title: { - fontWeight: 500, - lineHeight: "1", - margin: 0, - marginTop: 16, - }, - description: (theme) => ({ - color: theme.palette.text.secondary, - fontSize: 14, - margin: 0, - marginTop: 8, - lineHeight: "1.5", - }), - button: { - marginTop: 16, - }, -} satisfies Record>; diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx index 3df3fe44a0..3d2e4c1070 100644 --- a/site/src/pages/CreateTemplatePage/VariableInput.tsx +++ b/site/src/pages/CreateTemplatePage/VariableInput.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import FormControlLabel from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; @@ -17,11 +16,13 @@ interface VariableLabelProps { const VariableLabel: FC = ({ variable }) => { return ( ); }; @@ -42,7 +43,7 @@ export const VariableInput: FC = ({ return (
-
+
= ({ /> ); }; - -const styles = { - labelName: (theme) => ({ - fontSize: 14, - color: theme.palette.text.secondary, - display: "block", - marginBottom: 4, - }), - labelDescription: (theme) => ({ - fontSize: 16, - color: theme.palette.text.primary, - display: "block", - fontWeight: 600, - }), - input: { - display: "flex", - flexDirection: "column", - }, -} satisfies Record>; diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx index a490cb736e..fd746b2c0b 100644 --- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx +++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerItem.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Checkbox from "@mui/material/Checkbox"; import { EllipsisVerticalIcon } from "lucide-react"; import type { FC } from "react"; @@ -39,12 +38,12 @@ export const AnnouncementBannerItem: FC = ({ /> - + {message || No message} -
+
@@ -71,15 +70,3 @@ export const AnnouncementBannerItem: FC = ({ ); }; - -const styles = { - disabled: (theme) => ({ - color: theme.roles.inactive.fill.outline, - }), - - colorSample: { - width: 24, - height: 24, - borderRadius: 4, - }, -} satisfies Record>; diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx index 741a895ac8..931f875c19 100644 --- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx +++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/OrganizationPills.tsx @@ -5,7 +5,6 @@ import { TooltipContent, TooltipTrigger, } from "#/components/Tooltip/Tooltip"; -import { cn } from "#/utils/cn"; import { isUUID } from "#/utils/uuid"; interface OrganizationPillsProps { @@ -23,12 +22,7 @@ export const OrganizationPills: FC = ({ return (
{orgs.length > 0 ? ( - + {orgs[0].name} ) : ( @@ -48,10 +42,7 @@ const OverflowPillList: FC = ({ organizations }) => { return ( - + +{organizations.length} @@ -61,12 +52,8 @@ const OverflowPillList: FC = ({ organizations }) => { {organizations.map((organization) => (
  • {organization.name} diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx index ae6b524c3f..f4c6389ed8 100644 --- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx @@ -1,4 +1,4 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { useTheme } from "@emotion/react"; import Divider from "@mui/material/Divider"; import { ChevronLeftIcon, CopyIcon } from "lucide-react"; import { type FC, useState } from "react"; @@ -143,7 +143,7 @@ export const EditOAuth2AppPageView: FC = ({ onCancel={() => setShowDelete(false)} /> -
    +
    Client ID
    @@ -311,16 +311,3 @@ const OAuth2SecretRow: FC = ({ ); }; - -const styles = { - dataList: { - display: "grid", - gridTemplateColumns: "max-content auto", - "& > dt": { - fontWeight: "bold", - }, - "& > dd": { - marginLeft: 10, - }, - }, -} satisfies Record>; diff --git a/site/src/pages/DeploymentSettingsPage/Option.tsx b/site/src/pages/DeploymentSettingsPage/Option.tsx index e77628627e..6dc215fe55 100644 --- a/site/src/pages/DeploymentSettingsPage/Option.tsx +++ b/site/src/pages/DeploymentSettingsPage/Option.tsx @@ -1,8 +1,7 @@ -import { css, type Interpolation, type Theme, useTheme } from "@emotion/react"; import { WrenchIcon } from "lucide-react"; import type { FC, HTMLAttributes, PropsWithChildren } from "react"; import { DisabledBadge, EnabledBadge } from "#/components/Badges/Badges"; -import { MONOSPACE_FONT_FAMILY } from "#/theme/constants"; +import { cn } from "#/utils/cn"; export const OptionName: FC = ({ children }) => { return ( @@ -22,7 +21,8 @@ interface OptionValueProps { export const OptionValue: FC = (props) => { const { children: value } = props; - const theme = useTheme(); + const optionClassName = + "text-sm font-mono [overflow-wrap:anywhere] select-all [&_ul]:p-4"; if (typeof value === "boolean") { return ( @@ -34,7 +34,7 @@ export const OptionValue: FC = (props) => { if (typeof value === "number") { return ( - + {value} ); @@ -42,15 +42,13 @@ export const OptionValue: FC = (props) => { if (!value || value.length === 0) { return ( - - Not set - + Not set ); } if (typeof value === "string") { return ( - + {value} ); @@ -64,16 +62,13 @@ export const OptionValue: FC = (props) => { .map(([option, isEnabled]) => (
  • {isEnabled && } @@ -89,7 +84,7 @@ export const OptionValue: FC = (props) => { return (
      {value.map((item) => ( -
    • +
    • {item}
      • ))} @@ -98,7 +93,7 @@ export const OptionValue: FC = (props) => { } return ( - + {JSON.stringify(value)} ); @@ -107,66 +102,36 @@ export const OptionValue: FC = (props) => { type OptionConfigProps = HTMLAttributes & { isSource: boolean }; // OptionConfig takes a isSource bool to indicate if the Option is the source of the configured value. -export const OptionConfig: FC = ({ isSource, ...attrs }) => { +export const OptionConfig: FC = ({ + isSource, + className, + ...attrs +}) => { return (
      ); }; export const OptionConfigFlag: FC> = (props) => { - const theme = useTheme(); - return (
      ); }; - -const styles = { - configOption: (theme) => ({ - fontSize: 13, - fontFamily: MONOSPACE_FONT_FAMILY, - fontWeight: 600, - backgroundColor: theme.palette.background.paper, - display: "inline-flex", - alignItems: "center", - borderRadius: 4, - padding: 6, - lineHeight: 1, - gap: 6, - border: `1px solid ${theme.palette.divider}`, - }), - - sourceConfigOption: (theme) => ({ - border: `1px solid ${theme.roles.active.fill.outline}`, - - "& .OptionConfigFlag": { - background: theme.roles.active.fill.solid, - }, - }), - - option: css` - font-size: 14px; - font-family: ${MONOSPACE_FONT_FAMILY}; - overflow-wrap: anywhere; - user-select: all; - - & ul { - padding: 16px; - } - `, -} satisfies Record>; diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index ed4e98c892..bace48e326 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Link from "@mui/material/Link"; import { ExternalLinkIcon, RotateCwIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; @@ -69,7 +68,7 @@ const ExternalAuthPageView: FC = ({ You've authenticated with {externalAuth.display_name}! -

      +

      {externalAuth.user?.login && `Hey @${externalAuth.user?.login}! 👋`} {(!externalAuth.app_installable || externalAuth.installations.length > 0) && @@ -77,10 +76,7 @@ const ExternalAuthPageView: FC = ({

      {externalAuth.installations.length > 0 && ( -
      +
      {externalAuth.installations.map((install) => { if (!install.account) { return; @@ -111,9 +107,9 @@ const ExternalAuthPageView: FC = ({
      )} -
      +
      {!hasInstallations && externalAuth.app_installable && ( - + You must {installTheApp} to clone private repositories. Accounts will appear here once authorized. @@ -126,7 +122,7 @@ const ExternalAuthPageView: FC = ({ href={externalAuth.app_install_url} target="_blank" rel="noreferrer" - css={styles.link} + className="flex items-center justify-center gap-2 text-base" > {externalAuth.installations.length > 0 ? "Configure" : "Install"}{" "} @@ -134,7 +130,7 @@ const ExternalAuthPageView: FC = ({ )} { onReauthenticate(); @@ -148,39 +144,3 @@ const ExternalAuthPageView: FC = ({ }; export default ExternalAuthPageView; - -const styles = { - text: (theme) => ({ - fontSize: 16, - color: theme.palette.text.secondary, - textAlign: "center", - lineHeight: "160%", - margin: 0, - }), - - installAlert: { - margin: 16, - }, - - links: { - display: "flex", - gap: 4, - margin: 16, - flexDirection: "column", - }, - - link: { - display: "flex", - alignItems: "center", - justifyContent: "center", - fontSize: 16, - gap: 8, - }, - - authorizedInstalls: (theme) => ({ - display: "flex", - gap: 4, - color: theme.palette.text.disabled, - margin: 32, - }), -} satisfies Record>; diff --git a/site/src/pages/GroupsPage/GroupMembersPage.tsx b/site/src/pages/GroupsPage/GroupMembersPage.tsx index 7aa58559f0..00273344f5 100644 --- a/site/src/pages/GroupsPage/GroupMembersPage.tsx +++ b/site/src/pages/GroupsPage/GroupMembersPage.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import { EllipsisVerticalIcon, UserPlusIcon } from "lucide-react"; import { type FC, useState } from "react"; import { useMutation, useQueryClient } from "react-query"; @@ -41,6 +40,7 @@ import { TableRow, } from "#/components/Table/Table"; import { isEveryoneGroup } from "#/modules/groups"; +import { cn } from "#/utils/cn"; import type { GroupPageOutletContext } from "./GroupPage"; const GroupMembersPage: FC = () => { @@ -249,7 +249,10 @@ const GroupMemberRow: FC = ({
      {member.status}
      @@ -279,13 +282,4 @@ const GroupMemberRow: FC = ({ ); }; -const styles = { - status: { - textTransform: "capitalize", - }, - suspended: (theme) => ({ - color: theme.palette.text.secondary, - }), -} satisfies Record>; - export default GroupMembersPage; diff --git a/site/src/pages/LoginOAuthDevicePage/LoginOAuthDevicePageView.tsx b/site/src/pages/LoginOAuthDevicePage/LoginOAuthDevicePageView.tsx index 9a5ec03c21..d2edf136fd 100644 --- a/site/src/pages/LoginOAuthDevicePage/LoginOAuthDevicePageView.tsx +++ b/site/src/pages/LoginOAuthDevicePage/LoginOAuthDevicePageView.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import type { FC } from "react"; import type { ApiErrorResponse } from "#/api/errors"; import type { ExternalAuthDevice } from "#/api/typesGenerated"; @@ -36,7 +35,7 @@ const LoginOAuthDevicePageView: FC = ({ You've authenticated with GitHub! -

      +

      If you're not redirected automatically,{" "} click here.

      @@ -45,13 +44,3 @@ const LoginOAuthDevicePageView: FC = ({ }; export default LoginOAuthDevicePageView; - -const styles = { - text: (theme) => ({ - fontSize: 16, - color: theme.palette.text.secondary, - textAlign: "center", - lineHeight: "160%", - margin: 0, - }), -} satisfies Record>; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx index ddadb31ba1..fdb437fc8d 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePageView.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Checkbox from "@mui/material/Checkbox"; import FormControlLabel from "@mui/material/FormControlLabel"; import TextField from "@mui/material/TextField"; @@ -324,7 +323,7 @@ const PermissionCheckboxGroup: FC = ({ return ( -
    • +
    • = ({ } /> {resourceKey} -
        +
          {Object.entries(value).map(([actionKey, value]) => ( -
        • - +
        • + = ({ /> {actionKey} - {value} + {value}
          • ))}
        @@ -402,22 +401,4 @@ const ShowAllResourcesCheckbox: FC = ({ ); }; -const styles = { - checkBoxes: { - margin: 0, - listStyleType: "none", - }, - actionText: (theme) => ({ - color: theme.palette.text.primary, - }), - actionDescription: (theme) => ({ - color: theme.palette.text.secondary, - paddingTop: 6, - }), - actionItem: { - display: "grid", - gridTemplateColumns: "270px 1fr", - }, -} satisfies Record>; - export default CreateEditRolePageView; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx index ba36bd203d..c763d1c5e5 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.tsx @@ -1,4 +1,3 @@ -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import Stack from "@mui/material/Stack"; import type { FC } from "react"; import type { Permission } from "#/api/typesGenerated"; @@ -58,7 +57,7 @@ const PermissionsPill: FC = ({ ); return ( - + {resource}:{" "} {actions.map((p) => `${p.negate ? "!" : ""}${p.action}`).join(", ")} @@ -74,16 +73,12 @@ const OverflowPermissionPill: FC = ({ resources, permissions, }) => { - const theme = useTheme(); - return ( +{resources.length} more @@ -102,12 +97,3 @@ const OverflowPermissionPill: FC = ({ ); }; - -const styles = { - permissionPill: (theme) => ({ - backgroundColor: theme.experimental.pillDefault.background, - borderColor: theme.experimental.pillDefault.outline, - color: theme.experimental.pillDefault.text, - width: "fit-content", - }), -} satisfies Record>; diff --git a/site/src/pages/OrganizationSettingsPage/Horizontal.tsx b/site/src/pages/OrganizationSettingsPage/Horizontal.tsx index d089327c45..e32f1096b6 100644 --- a/site/src/pages/OrganizationSettingsPage/Horizontal.tsx +++ b/site/src/pages/OrganizationSettingsPage/Horizontal.tsx @@ -1,9 +1,8 @@ -import type { Interpolation, Theme } from "@emotion/react"; import type { FC, HTMLAttributes, ReactNode } from "react"; export const HorizontalContainer: FC> = ({ ...attrs }) => { - return
        ; + return
        ; }; interface HorizontalSectionProps @@ -20,68 +19,17 @@ export const HorizontalSection: FC = ({ ...attrs }) => { return ( -
        -
        -

        {title}

        -
        {description}
        +
        +
        +

        + {title} +

        +
        + {description} +
        {children}
        ); }; - -const styles = { - horizontalContainer: (theme) => ({ - display: "flex", - flexDirection: "column", - gap: 80, - - [theme.breakpoints.down("md")]: { - gap: 64, - }, - }), - - formSection: (theme) => ({ - display: "flex", - flexDirection: "row", - gap: 120, - - [theme.breakpoints.down("lg")]: { - flexDirection: "column", - gap: 16, - }, - }), - - formSectionInfo: (theme) => ({ - width: "100%", - flexShrink: 0, - top: 24, - maxWidth: 312, - position: "sticky", - - [theme.breakpoints.down("md")]: { - width: "100%", - position: "initial", - }, - }), - - formSectionInfoTitle: (theme) => ({ - fontSize: 20, - color: theme.palette.text.primary, - fontWeight: 400, - margin: 0, - marginBottom: 8, - display: "flex", - flexDirection: "row", - alignItems: "center", - gap: 12, - }), - - formSectionInfoDescription: (theme) => ({ - fontSize: 14, - color: theme.palette.text.secondary, - lineHeight: "160%", - margin: 0, - }), -} satisfies Record>; diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx index 8bb6fb5f83..4053056372 100644 --- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx +++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpPillList.tsx @@ -1,4 +1,3 @@ -import type { Interpolation, Theme } from "@emotion/react"; import Stack from "@mui/material/Stack"; import type { FC } from "react"; import { Pill } from "#/components/Pill/Pill"; @@ -17,7 +16,7 @@ export const IdpPillList: FC = ({ roles }) => { return ( {roles.length > 0 ? ( - + {roles[0]} ) : ( @@ -37,14 +36,16 @@ const OverflowPill: FC = ({ roles }) => { return ( - +{roles.length} more + + +{roles.length} more +
          {roles.map((role) => (
        • - + {role}
          • @@ -54,18 +55,3 @@ const OverflowPill: FC = ({ roles }) => { ); }; - -const styles = { - pill: (theme) => ({ - backgroundColor: theme.experimental.pillDefault.background, - borderColor: theme.experimental.pillDefault.outline, - color: theme.experimental.pillDefault.text, - width: "fit-content", - }), - errorPill: (theme) => ({ - backgroundColor: theme.roles.error.background, - borderColor: theme.roles.error.outline, - color: theme.roles.error.text, - width: "fit-content", - }), -} satisfies Record>; diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index 73c5df58fa..3aac57cbae 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -1,4 +1,3 @@ -import type { CSSObject, Interpolation, Theme } from "@emotion/react"; import type { FC } from "react"; import { useNavigate } from "react-router"; import type { TemplateVersion } from "#/api/typesGenerated"; @@ -34,25 +33,15 @@ export const VersionRow: FC = ({ const jobStatus = version.job.status; return ( - - -
          + + +
          -
          +
          {version.created_by.username} created the version {version.name} @@ -60,7 +49,7 @@ export const VersionRow: FC = ({ {version.message && ( )} - + {new Date(version.created_at).toLocaleTimeString()}
          @@ -130,25 +119,3 @@ export const VersionRow: FC = ({ ); }; - -const styles = { - versionWrapper: { - padding: "16px 32px", - }, - - versionCell: { - padding: "0 !important", - position: "relative", - borderBottom: 0, - }, - - versionSummary: (theme) => ({ - ...(theme.typography.body1 as CSSObject), - fontFamily: "inherit", - }), - - versionTime: (theme) => ({ - color: theme.palette.text.secondary, - fontSize: 12, - }), -} satisfies Record>; diff --git a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx index 7445063373..136e75ddfc 100644 --- a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx +++ b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx @@ -1,5 +1,3 @@ -import { css } from "@emotion/css"; -import type { Interpolation, Theme } from "@emotion/react"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; @@ -47,16 +45,16 @@ export const MissingTemplateVariablesDialog: FC< > Template variables - - + + There are a few missing template variable values. Please fill them in. { e.preventDefault(); @@ -89,7 +87,7 @@ export const MissingTemplateVariablesDialog: FC< )} - + @@ -105,34 +103,3 @@ export const MissingTemplateVariablesDialog: FC< ); }; - -const classNames = { - root: css` - padding: 24px 40px; - - & h2 { - font-size: 20px; - font-weight: 400; - } - `, -}; - -const styles = { - content: { - padding: "0 40px", - }, - - info: { - margin: 0, - }, - - form: { - paddingTop: 32, - }, - - dialogActions: { - padding: 40, - flexDirection: "column", - gap: 8, - }, -} satisfies Record>; diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx index 5979ac62b0..8380f6e6da 100644 --- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx +++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx @@ -45,7 +45,10 @@ export const ProvisionerTagsPopover: FC = ({ > = ({ asChild variant="outline" size="sm" + className="transition-none group-hover:border-border-secondary" title={`Create a workspace using the ${template.display_name} template`} onClick={(e) => { e.stopPropagation(); @@ -142,7 +143,7 @@ const TemplateRow: FC = ({ key={template.id} data-testid={`template-${template.id}`} {...clickableRow} - css={styles.tableRow} + className={cn("group", clickableRow.className)} > = ({ /> - + {showOrganizations ? ( = ({ )} - + {formatTemplateBuildTime(template.build_time_stats.start.P50)} - + {createDayString(template.updated_at)} - + { ); }; - -const styles = { - templateIconWrapper: { - // Same size then the avatar component - width: 36, - height: 36, - padding: 2, - - "& img": { - width: "100%", - }, - }, - actionCell: { - whiteSpace: "nowrap", - }, - cellPrimaryLine: (theme) => ({ - color: theme.palette.text.primary, - fontWeight: 600, - }), - cellSecondaryLine: (theme) => ({ - fontSize: 13, - color: theme.palette.text.secondary, - lineHeight: "150%", - }), - secondary: (theme) => ({ - color: theme.palette.text.secondary, - }), - tableRow: (theme) => ({ - "&:hover .actionButton": { - color: theme.experimental.l2.hover.text, - borderColor: theme.experimental.l2.hover.outline, - }, - }), - actionButton: (theme) => ({ - transition: "none", - color: theme.palette.text.primary, - }), -} satisfies Record>;