synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-09 11:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: use px values instead of theme.spacing and theme.shape.borderRadius (#10519)

Browse Source
This commit is contained in:
Kayla Washburn
2023-11-06 11:43:06 -05:00
committed by GitHub
parent 0cb875cba5
commit ca6e6213bf
144 changed files with 774 additions and 958 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
site/src/components/Avatar/Avatar.tsx
View File

@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
};
const sizeStyles = {
xs: (theme) => ({
width: theme.spacing(2),
height: theme.spacing(2),
fontSize: theme.spacing(1),
xs: {
width: 16,
height: 16,
fontSize: 8,
fontWeight: 700,
}),
sm: (theme) => ({
width: theme.spacing(3),
height: theme.spacing(3),
fontSize: theme.spacing(1.5),
},
sm: {
width: 24,
height: 24,
fontSize: 12,
fontWeight: 600,
}),
},
md: {},
xl: (theme) => ({
width: theme.spacing(6),
height: theme.spacing(6),
fontSize: theme.spacing(3),
}),
xl: {
width: 48,
height: 48,
fontSize: 24,
},
} satisfies Record<string, Interpolation<Theme>>;
const colorStyles = {

2
site/src/components/AvatarData/AvatarData.tsx
View File

@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
direction="row"
alignItems="center"
css={{
minHeight: theme.spacing(5), // Make it predictable for the skeleton
minHeight: 40, // Make it predictable for the skeleton
width: "100%",
lineHeight: "150%",
}}

6
site/src/components/CodeExample/CodeExample.tsx
View File

@ -26,8 +26,8 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
color: theme.palette.primary.contrastText,
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 14,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(1),
borderRadius: 8,
padding: 8,
lineHeight: "150%",
border: `1px solid ${theme.palette.divider}`,
}}
@ -35,7 +35,7 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
>
<code
css={{
padding: theme.spacing(0, 1),
padding: "0 8px",
width: "100%",
display: "flex",
alignItems: "center",

14
site/src/components/CopyButton/CopyButton.tsx
View File

@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
<IconButton
className={buttonClassName}
css={(theme) => css`
border-radius: ${theme.shape.borderRadius}px;
padding: ${theme.spacing(0.85)};
border-radius: 8px;
padding: 8px;
min-width: 32px;
&:hover {
@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
) : (
<FileCopyIcon css={fileCopyIconStyles} />
)}
{ctaCopy && (
<div
css={(theme) => ({
marginLeft: theme.spacing(1),
})}
>
{ctaCopy}
</div>
)}
{ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
</IconButton>
</div>
</Tooltip>

2
site/src/components/Dashboard/DashboardLayout.tsx
View File

@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
sx: (theme) => ({
background: theme.palette.background.paper,
color: theme.palette.text.primary,
maxWidth: theme.spacing(55),
maxWidth: 440,
flexDirection: "row",
borderColor: theme.palette.info.light,

57
site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx
View File

@ -46,18 +46,18 @@ const styles = {
align-items: center;
`,
category: (theme) => ({
marginRight: theme.spacing(2),
marginRight: 16,
color: theme.palette.text.primary,
}),
values: (theme) => ({
display: "flex",
gap: theme.spacing(1),
gap: 8,
color: theme.palette.text.secondary,
}),
value: (theme) => css`
value: css`
display: flex;
align-items: center;
gap: ${theme.spacing(0.5)};
gap: 4px;
& svg {
width: 12px;
@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
align-items: center;
justify-content: center;
background-color: ${unhealthy ? colors.red[10] : undefined};
padding: ${theme.spacing(0, 1.5)};
padding: 0 12px;
height: ${bannerHeight}px;
color: #fff;
@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
const statusSummaryStyle = className`
${theme.typography.body2 as CSSObject}
margin: ${theme.spacing(0, 0, 0.5, 1.5)};
width: ${theme.spacing(50)};
padding: ${theme.spacing(2)};
margin: 0 0 4px 12px;
width: 400px;
padding: 16px;
color: ${theme.palette.text.primary};
background-color: ${theme.palette.background.paper};
border: 1px solid ${theme.palette.divider};
@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
height: bannerHeight,
bottom: 0,
zIndex: 1,
paddingRight: theme.spacing(2),
paddingRight: 16,
backgroundColor: theme.palette.background.paper,
display: "flex",
alignItems: "center",
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 12,
gap: theme.spacing(4),
gap: 32,
borderTop: `1px solid ${theme.palette.divider}`,
overflowX: "auto",
whiteSpace: "nowrap",
@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
)
}
open={process.env.STORYBOOK === "true" ? true : undefined}
css={{ marginRight: theme.spacing(-2) }}
css={{ marginRight: -16 }}
>
{unhealthy ? (
<Link component={RouterLink} to="/health" css={statusBadgeStyle}>
@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
marginLeft: "auto",
display: "flex",
alignItems: "center",
gap: theme.spacing(2),
gap: 16,
}}
>
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
<Tooltip title="A countdown until stats are fetched again. Click to refresh!">
<Button
css={css`
${styles.value(theme)}
css={[
styles.value,
css`
margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;
margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;
& svg {
margin-right: ${theme.spacing(0.5)};
}
`}
& svg {
margin-right: 4px;
}
`,
]}
onClick={() => {
if (fetchStats) {
fetchStats();

14
site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx
View File

@ -21,10 +21,10 @@ export const Language = {
};
const styles = {
leftContent: (theme) => ({
marginRight: theme.spacing(1),
marginLeft: theme.spacing(1),
}),
leftContent: {
marginRight: 8,
marginLeft: 8,
},
} satisfies Record<string, Interpolation<Theme>>;
export interface LicenseBannerViewProps {
@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
display: flex;
align-items: center;
padding: ${theme.spacing(1.5)};
padding: 12px;
background-color: ${type === "error"
? colors.red[12]
: theme.palette.warning.main};
@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
</Link>
</div>
<Expander expanded={showDetails} setExpanded={setShowDetails}>
<ul css={{ padding: theme.spacing(1), margin: 0 }}>
<ul css={{ padding: 8, margin: 0 }}>
{messages.map((message) => (
<li css={{ margin: theme.spacing(0.5) }} key={message}>
<li css={{ margin: 4 }} key={message}>
{message}
</li>
))}

23
site/src/components/Dashboard/Navbar/NavbarView.tsx
View File

@ -70,17 +70,17 @@ const styles = {
justify-content: flex-start;
}
`,
drawerHeader: (theme) => ({
padding: theme.spacing(2),
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
}),
drawerHeader: {
padding: 16,
paddingTop: 32,
paddingBottom: 32,
},
logo: (theme) => css`
align-items: center;
display: flex;
height: ${navHeight}px;
color: ${theme.palette.text.primary};
padding: ${theme.spacing(2)};
padding: 16px;
// svg is for the Coder logo, img is for custom images
& svg,
@ -89,10 +89,10 @@ const styles = {
object-fit: contain;
}
`,
drawerLogo: (theme) => ({
drawerLogo: {
padding: 0,
maxHeight: theme.spacing(5),
}),
maxHeight: 40,
},
item: {
padding: 0,
},
@ -102,7 +102,7 @@ const styles = {
display: flex;
flex: 1;
font-size: 16px;
padding: ${theme.spacing(1.5)} ${theme.spacing(2)};
padding: 12px 16px;
text-decoration: none;
transition: background-color 0.15s ease-in-out;
@ -117,7 +117,7 @@ const styles = {
${theme.breakpoints.up("md")} {
height: ${navHeight}px;
padding: 0 ${theme.spacing(3)};
padding: 0 24px;
}
`,
} satisfies Record<string, Interpolation<Theme>>;
@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
</nav>
);
};
export const NavbarView: FC<NavbarViewProps> = ({
user,
logo_url,

8
site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
View File

@ -1,7 +1,7 @@
import Badge from "@mui/material/Badge";
import { FC, PropsWithChildren } from "react";
import { type FC, type PropsWithChildren } from "react";
import { colors } from "theme/colors";
import * as TypesGen from "api/typesGenerated";
import type * as TypesGen from "api/typesGenerated";
import { navHeight } from "theme/constants";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
<>
<PopoverTrigger>
<button
css={(theme) => css`
css={css`
background: none;
border: 0;
cursor: pointer;
height: ${navHeight}px;
padding: ${theme.spacing(1.5, 0)};
padding: 12px 0;
&:hover {
background-color: transparent;

10
site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View File

@ -28,7 +28,7 @@ const styles = {
info: (theme) => [
theme.typography.body2 as CSSObject,
{
padding: theme.spacing(2.5),
padding: 20,
},
],
userName: {
@ -45,8 +45,8 @@ const styles = {
color: "inherit",
},
menuItem: (theme) => css`
gap: ${theme.spacing(2.5)};
padding: ${theme.spacing(1, 2.5)};
gap: 20px;
padding: 8px 20px;
&:hover {
background-color: ${theme.palette.action.hover};
@ -55,8 +55,8 @@ const styles = {
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: theme.spacing(2.5),
height: theme.spacing(2.5),
width: 20,
height: 20,
}),
menuItemText: {
fontSize: 14,

2
site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx
View File

@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
return (
<div
css={css`
padding: ${theme.spacing(1.5)};
padding: 12px;
background-color: ${backgroundColor ?? theme.palette.warning.main};
display: flex;
align-items: center;

10
site/src/components/DeploySettingsLayout/Badges.tsx
View File

@ -5,19 +5,19 @@ import { Stack } from "components/Stack/Stack";
import { colors } from "theme/colors";
const styles = {
badge: (theme) => ({
badge: {
fontSize: 10,
height: 24,
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.085em",
padding: theme.spacing(0, 1.5),
padding: "0 12px",
borderRadius: 9999,
display: "flex",
alignItems: "center",
width: "fit-content",
whiteSpace: "nowrap",
}),
},
enabledBadge: (theme) => ({
border: `1px solid ${theme.palette.success.light}`,
@ -125,9 +125,7 @@ export const AlphaBadge: FC = () => {
export const Badges: FC<PropsWithChildren> = ({ children }) => {
return (
<Stack
css={(theme) => ({
margin: theme.spacing(0, 0, 2),
})}
css={{ margin: "0 0 16px" }}
direction="row"
alignItems="center"
spacing={1}

6
site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
View File

@ -35,11 +35,7 @@ export const DeploySettingsLayout: FC = () => {
return (
<RequirePermission isFeatureVisible={permissions.viewDeploymentValues}>
<Margins>
<Stack
css={(theme) => ({ padding: theme.spacing(6, 0) })}
direction="row"
spacing={6}
>
<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
<Sidebar />
<main css={{ maxWidth: 800, width: "100%" }}>
{deploymentConfigQuery.data ? (

19
site/src/components/DeploySettingsLayout/Fieldset.tsx
View File

@ -27,17 +27,17 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
return (
<form
css={{
borderRadius: theme.spacing(1),
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
background: theme.palette.background.paper,
marginTop: theme.spacing(4),
marginTop: 32,
}}
onSubmit={onSubmit}
>
<header css={{ padding: theme.spacing(3) }}>
<header css={{ padding: 24 }}>
<div
css={{
fontSize: theme.spacing(2.5),
fontSize: 20,
margin: 0,
fontWeight: 600,
}}
@ -49,18 +49,13 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
css={{
color: theme.palette.text.secondary,
fontSize: 14,
marginTop: theme.spacing(1),
marginTop: 8,
}}
>
{subtitle}
</div>
)}
<div
css={[
theme.typography.body2 as CSSObject,
{ paddingTop: theme.spacing(2) },
]}
>
<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
{children}
</div>
</header>
@ -69,7 +64,7 @@ export const Fieldset: FC<FieldsetProps> = (props) => {
theme.typography.body2 as CSSObject,
{
background: theme.palette.background.paperLight,
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
padding: "16px 24px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",

6
site/src/components/DeploySettingsLayout/Header.tsx
View File

@ -14,7 +14,7 @@ export const Header: FC<{
return (
<Stack alignItems="baseline" direction="row" justifyContent="space-between">
<div css={{ maxWidth: 420, marginBottom: theme.spacing(3) }}>
<div css={{ maxWidth: 420, marginBottom: 24 }}>
<h1
css={[
{
@ -24,8 +24,8 @@ export const Header: FC<{
alignItems: "center",
lineHeight: "initial",
margin: 0,
marginBottom: theme.spacing(0.5),
gap: theme.spacing(1),
marginBottom: 4,
gap: 8,
},
secondary && {
fontSize: 24,

24
site/src/components/DeploySettingsLayout/Option.tsx
View File

@ -30,7 +30,7 @@ export const OptionDescription: FC<PropsWithChildren> = (props) => {
display: "block",
color: theme.palette.text.secondary,
fontSize: 14,
marginTop: theme.spacing(0.5),
marginTop: 4,
}}
>
{children}
@ -53,18 +53,10 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
user-select: all;
& ul {
padding: ${theme.spacing(2)};
padding: 16px;
}
`;
const listStyles = css`
margin: 0,
padding: 0,
display: "flex",
flex-direction: "column",
gap: theme.spacing(0.5),
`;
if (typeof value === "boolean") {
return value ? <EnabledBadge /> : <DisabledBadge />;
}
@ -83,7 +75,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
if (typeof value === "object" && !Array.isArray(value)) {
return (
<ul css={listStyles && { listStyle: "none" }}>
<ul css={{ listStyle: "none" }}>
{Object.entries(value)
.sort((a, b) => a[0].localeCompare(b[0]))
.map(([option, isEnabled]) => (
@ -109,7 +101,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
width: 16,
height: 16,
color: (theme) => theme.palette.success.light,
margin: (theme) => theme.spacing(0, 1),
margin: "0 8px",
}}
/>
)}
@ -123,7 +115,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
if (Array.isArray(value)) {
return (
<ul css={listStyles && { listStylePosition: "inside" }}>
<ul css={{ listStylePosition: "inside" }}>
{value.map((item) => (
<li key={item} css={optionStyles}>
{item}
@ -162,7 +154,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
display: "inline-flex",
alignItems: "center",
borderRadius: 0.25,
padding: (theme) => theme.spacing(0, 1),
padding: "0 8px",
border: `1px solid ${borderColor}`,
...sx,
}}
@ -183,12 +175,12 @@ export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
sx={{
fontSize: 10,
fontWeight: 600,
margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
margin: "0 6px 0 -4px",
display: "block",
backgroundColor: (theme) =>
source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
lineHeight: 1,
padding: (theme) => theme.spacing(0.25, 0.5),
padding: "2px 4px",
borderRadius: 0.25,
...sx,
}}

8
site/src/components/DeploySettingsLayout/OptionsTable.tsx
View File

@ -28,15 +28,15 @@ const OptionsTable: FC<{
return (
<TableContainer>
<Table
css={(theme) => css`
css={css`
& td {
padding-top: ${theme.spacing(3)};
padding-bottom: ${theme.spacing(3)};
padding-top: 24px;
padding-bottom: 24px;
}
& td:last-child,
& th:last-child {
padding-left: ${theme.spacing(4)};
padding-left: 32px;
}
`}
>

18
site/src/components/DeploySettingsLayout/Sidebar.tsx
View File

@ -32,8 +32,8 @@ const SidebarNavItem: FC<
left: 0;
top: 0;
background-color: ${theme.palette.secondary.dark};
border-top-left-radius: ${theme.shape.borderRadius};
border-bottom-left-radius: ${theme.shape.borderRadius};
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
`;
@ -47,8 +47,8 @@ const SidebarNavItem: FC<
display: block;
font-size: 14px;
text-decoration: none;
padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
border-radius: ${theme.shape.borderRadius / 2}px;
padding: 12px 12px 12px 16px;
border-radius: 4px;
transition: background-color 0.15s ease-in-out;
margin-bottom: 1;
position: relative;
@ -67,15 +67,7 @@ const SidebarNavItem: FC<
};
const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
const theme = useTheme();
return (
<Icon
css={{
width: theme.spacing(2),
height: theme.spacing(2),
}}
/>
);
return <Icon css={{ width: 16, height: 16 }} />;
};
export const Sidebar: React.FC = () => {

12
site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
View File

@ -58,22 +58,22 @@ const styles = {
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
width: "100%",
maxWidth: theme.spacing(55),
maxWidth: 440,
},
"& .MuiDialogActions-spacing": {
padding: `0 ${theme.spacing(5)} ${theme.spacing(5)}`,
padding: "0 40px 40px",
},
}),
dialogContent: (theme) => ({
color: theme.palette.text.secondary,
padding: theme.spacing(5),
padding: 40,
}),
dialogTitle: (theme) => ({
margin: 0,
marginBottom: theme.spacing(2),
marginBottom: 16,
color: theme.palette.text.primary,
fontWeight: 400,
fontSize: theme.spacing(2.5),
fontSize: 20,
}),
dialogDescription: (theme) => ({
color: theme.palette.text.secondary,
@ -89,7 +89,7 @@ const styles = {
},
"& > p": {
margin: theme.spacing(1, 0),
margin: "8px 0",
},
}),
} satisfies Record<string, Interpolation<Theme>>;

2
site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
View File

@ -75,7 +75,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
<TextField
fullWidth
autoFocus
sx={{ marginTop: theme.spacing(3) }}
css={{ marginTop: 24 }}
name="confirmation"
autoComplete="off"
id={`${hookId}-confirm`}

2
site/src/components/DropdownArrow/DropdownArrow.tsx
View File

@ -19,7 +19,7 @@ export const DropdownArrow: FC<ArrowProps> = (props) => {
aria-label={close ? "close-dropdown" : "open-dropdown"}
css={(theme: Theme) => ({
color: color ?? theme.palette.primary.contrastText,
marginLeft: margin ? theme.spacing(1) : 0,
marginLeft: margin ? 8 : 0,
width: 16,
height: 16,
})}

27
site/src/components/EmptyState/EmptyState.tsx
View File

@ -1,7 +1,6 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import type { FC, ReactNode } from "react";
import { useTheme } from "@emotion/react";
export interface EmptyStateProps {
/** Text Message to display, placed inside Typography component */
@ -25,7 +24,6 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
props,
) => {
const { message, description, cta, image, ...boxProps } = props;
const theme = useTheme();
return (
<Box
@ -37,17 +35,12 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
alignItems: "center",
textAlign: "center",
minHeight: 360,
padding: theme.spacing(10, 5),
padding: "80px 40px",
position: "relative",
}}
{...boxProps}
>
<Typography
variant="h5"
css={{
fontSize: theme.spacing(3),
}}
>
<Typography variant="h5" css={{ fontSize: 24 }}>
{message}
</Typography>
{description && (
@ -55,24 +48,16 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
variant="body2"
color="textSecondary"
css={{
marginTop: theme.spacing(1.5),
fontSize: theme.spacing(2),
marginTop: 12,
fontSize: 16,
lineHeight: "140%",
maxWidth: theme.spacing(60),
maxWidth: 480,
}}
>
{description}
</Typography>
)}
{cta && (
<div
css={{
marginTop: theme.spacing(4),
}}
>
{cta}
</div>
)}
{cta && <div css={{ marginTop: 32 }}>{cta}</div>}
{image}
</Box>
);

47
site/src/components/ErrorBoundary/RuntimeErrorState.tsx
View File

@ -4,7 +4,7 @@ import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
import { type FC, useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import { css } from "@emotion/css";
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
import { type Interpolation, type Theme } from "@emotion/react";
import type { BuildInfoResponse } from "api/typesGenerated";
import { CopyButton } from "components/CopyButton/CopyButton";
import { CoderIcon } from "components/Icons/CoderIcon";
@ -18,7 +18,6 @@ const fetchDynamicallyImportedModuleError =
export type RuntimeErrorStateProps = { error: Error };
export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
const theme = useTheme();
const [checkingError, setCheckingError] = useState(true);
const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
const coderVersion = staticBuildInfo?.version;
@ -102,10 +101,10 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
background-color: transparent;
border: 0;
border-radius: 999px;
min-height: ${theme.spacing(4)};
min-width: ${theme.spacing(4)};
height: ${theme.spacing(4)};
width: ${theme.spacing(4)};
min-height: 32px;
min-width: 32px;
height: 32px;
width: 32px;
& svg {
width: 16px;
@ -147,38 +146,38 @@ const getStaticBuildInfo = () => {
};
const styles = {
root: (theme) => ({
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
root: {
paddingTop: 32,
paddingBottom: 32,
textAlign: "center",
display: "flex",
alignItems: "center",
justifyContent: "center",
minHeight: "100%",
maxWidth: theme.spacing(75),
}),
maxWidth: 600,
},
logo: (theme) => ({
fontSize: theme.spacing(8),
}),
logo: {
fontSize: 64,
},
title: (theme) => ({
fontSize: theme.spacing(4),
title: {
fontSize: 32,
fontWeight: 400,
}),
},
text: (theme) => ({
fontSize: 16,
color: theme.palette.text.secondary,
lineHeight: "160%",
marginBottom: theme.spacing(4),
marginBottom: 32,
}),
stack: (theme) => ({
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: 4,
marginTop: theme.spacing(8),
marginTop: 64,
display: "block",
textAlign: "left",
}),
@ -188,7 +187,7 @@ const styles = {
textTransform: "uppercase",
fontWeight: 600,
letterSpacing: 1,
padding: theme.spacing(1, 1, 1, 2),
padding: "8px 8px 8px 16px",
backgroundColor: theme.palette.background.paperLight,
borderBottom: `1px solid ${theme.palette.divider}`,
color: theme.palette.text.secondary,
@ -198,15 +197,15 @@ const styles = {
alignItems: "center",
}),
stackCode: (theme) => ({
padding: theme.spacing(2),
stackCode: {
padding: 16,
margin: 0,
wordWrap: "break-word",
whiteSpace: "break-spaces",
}),
},
version: (theme) => ({
marginTop: theme.spacing(4),
marginTop: 32,
fontSize: 12,
color: theme.palette.text.secondary,
}),

6
site/src/components/Expander/Expander.tsx
View File

@ -49,9 +49,9 @@ const styles = {
cursor: "pointer",
color: theme.palette.text.secondary,
}),
collapseLink: (theme) => ({
marginTop: theme.spacing(2),
}),
collapseLink: {
marginTop: 16,
},
text: (theme) => ({
display: "flex",
alignItems: "center",

22
site/src/components/FileUpload/FileUpload.tsx
View File

@ -133,9 +133,9 @@ const styles = {
display: flex;
align-items: center;
justify-content: center;
border-radius: ${theme.shape.borderRadius}px;
border-radius: 8px;
border: 2px dashed ${theme.palette.divider};
padding: ${theme.spacing(6)};
padding: 48px;
cursor: pointer;
&:hover {
@ -148,18 +148,18 @@ const styles = {
opacity: 0.75,
},
icon: (theme) => ({
fontSize: theme.spacing(8),
}),
icon: {
fontSize: 64,
},
title: (theme) => ({
fontSize: theme.spacing(2),
}),
title: {
fontSize: 16,
},
description: (theme) => ({
color: theme.palette.text.secondary,
textAlign: "center",
maxWidth: theme.spacing(50),
maxWidth: 400,
}),
input: {
@ -167,9 +167,9 @@ const styles = {
},
file: (theme) => ({
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2),
padding: 16,
background: theme.palette.background.paper,
}),
} satisfies Record<string, Interpolation<Theme>>;

24
site/src/components/Form/Form.tsx
View File

@ -34,10 +34,10 @@ export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
css={{
display: "flex",
flexDirection: "column",
gap: theme.spacing(direction === "horizontal" ? 10 : 5),
gap: direction === "horizontal" ? 80 : 40,
[theme.breakpoints.down("md")]: {
gap: theme.spacing(8),
gap: 64,
},
}}
/>
@ -88,11 +88,11 @@ export const FormSection: FC<
display: "flex",
alignItems: "flex-start",
flexDirection: direction === "horizontal" ? "row" : "column",
gap: theme.spacing(direction === "horizontal" ? 15 : 3),
gap: direction === "horizontal" ? 120 : 24,
[theme.breakpoints.down("md")]: {
flexDirection: "column",
gap: theme.spacing(2),
gap: 16,
},
}}
className={classes.root}
@ -103,7 +103,7 @@ export const FormSection: FC<
maxWidth: direction === "horizontal" ? 312 : undefined,
flexShrink: 0,
position: direction === "horizontal" ? "sticky" : undefined,
top: theme.spacing(3),
top: 24,
[theme.breakpoints.down("md")]: {
width: "100%",
@ -144,15 +144,15 @@ const styles = {
color: theme.palette.text.primary,
fontWeight: 400,
margin: 0,
marginBottom: theme.spacing(1),
marginBottom: 8,
}),
formSectionInfoTitleAlpha: (theme) => ({
formSectionInfoTitleAlpha: {
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: theme.spacing(1.5),
}),
gap: 12,
},
formSectionInfoDescription: (theme) => ({
fontSize: 14,
@ -172,7 +172,7 @@ export const FormFooter = (props: Exclude<FormFooterProps, "styles">) => (
const footerStyles = {
button: (theme) => ({
minWidth: theme.spacing(23),
minWidth: 184,
[theme.breakpoints.down("md")]: {
width: "100%",
@ -184,11 +184,11 @@ const footerStyles = {
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "row-reverse",
gap: theme.spacing(2),
gap: 16,
[theme.breakpoints.down("md")]: {
flexDirection: "column",
gap: theme.spacing(1),
gap: 8,
},
}),
} satisfies FormFooterStyles;

8
site/src/components/FormFooter/FormFooter.tsx
View File

@ -57,16 +57,16 @@ export const FormFooter: FC<FormFooterProps> = ({
};
const defaultStyles = {
footer: (theme) => ({
footer: {
display: "flex",
flex: "0",
// The first button is the submit so it is the first element to be focused
// on tab so we use row-reverse to display it on the right
flexDirection: "row-reverse",
gap: theme.spacing(1.5),
gap: 12,
alignItems: "center",
marginTop: theme.spacing(3),
}),
marginTop: 24,
},
button: {
width: "100%",
},

5
site/src/components/FullPageForm/FullPageForm.tsx
View File

@ -5,7 +5,6 @@ import {
PageHeaderTitle,
PageHeaderSubtitle,
} from "components/PageHeader/PageHeader";
import { useTheme } from "@emotion/react";
export interface FullPageFormProps {
title: string;
@ -17,11 +16,9 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
detail,
children,
}) => {
const theme = useTheme();
return (
<Margins size="small">
<PageHeader css={{ paddingBottom: theme.spacing(3) }}>
<PageHeader css={{ paddingBottom: 24 }}>
<PageHeaderTitle>{title}</PageHeaderTitle>
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
</PageHeader>

4
site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
View File

@ -35,8 +35,8 @@ export const EnterpriseSnackbar: FC<
const snackbarContentStyles = css`
border: 1px solid ${theme.palette.divider};
border-left: 4px solid ${variantColor(variant, theme)};
border-radius: ${theme.shape.borderRadius}px;
padding: ${theme.spacing(1, 3, 1, 2)};
border-radius: 8px;
padding: 8px 24px 8px 16px;
box-shadow: ${theme.shadows[6]};
align-items: inherit;
background-color: ${theme.palette.background.paper};

8
site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
View File

@ -125,11 +125,11 @@ const styles = {
fontSize: 14,
fontWeight: 600,
},
messageSubtitle: (theme) => ({
marginTop: theme.spacing(1.5),
}),
messageSubtitle: {
marginTop: 12,
},
errorIcon: (theme) => ({
color: theme.palette.error.contrastText,
marginRight: theme.spacing(2),
marginRight: 16,
}),
} satisfies Record<string, Interpolation<Theme>>;

30
site/src/components/HelpTooltip/HelpTooltip.tsx
View File

@ -59,9 +59,9 @@ export const HelpPopover: FC<
paper: className`
${theme.typography.body2 as CSSObject}
margin-top: ${theme.spacing(0.5)};
width: ${theme.spacing(38)};
padding: ${theme.spacing(2.5)};
margin-top: 4px;
width: 304px;
padding: 20px;
color: ${theme.palette.text.secondary};
pointer-events: auto;
`,
@ -239,7 +239,7 @@ const getIconSpacingFromSize = (size?: Size): number => {
const styles = {
title: (theme) => ({
marginTop: 0,
marginBottom: theme.spacing(1),
marginBottom: 8,
color: theme.palette.text.primary,
fontSize: 14,
lineHeight: "150%",
@ -247,8 +247,8 @@ const styles = {
}),
text: (theme) => ({
marginTop: theme.spacing(0.5),
marginBottom: theme.spacing(0.5),
marginTop: 4,
marginBottom: 4,
...(theme.typography.body2 as CSSObject),
}),
@ -258,16 +258,16 @@ const styles = {
...(theme.typography.body2 as CSSObject),
}),
linkIcon: (theme) => ({
linkIcon: {
color: "inherit",
width: 14,
height: 14,
marginRight: theme.spacing(1),
}),
marginRight: 8,
},
linksGroup: (theme) => ({
marginTop: theme.spacing(2),
}),
linksGroup: {
marginTop: 16,
},
action: (theme) => ({
display: "flex",
@ -280,10 +280,10 @@ const styles = {
fontSize: 14,
}),
actionIcon: (theme) => ({
actionIcon: {
color: "inherit",
width: 14,
height: 14,
marginRight: theme.spacing(1),
}),
marginRight: 8,
},
} satisfies Record<string, Interpolation<Theme>>;

4
site/src/components/IconField/IconField.tsx
View File

@ -62,8 +62,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
<InputAdornment
position="end"
css={{
width: theme.spacing(3),
height: theme.spacing(3),
width: 24,
height: 24,
display: "flex",
alignItems: "center",
justifyContent: "center",

18
site/src/components/Markdown/Markdown.tsx
View File

@ -66,7 +66,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
) : (
<code
css={(theme) => ({
padding: theme.spacing(0.125, 0.5),
padding: "1px 4px",
background: theme.palette.divider,
borderRadius: 4,
color: theme.palette.text.primary,
@ -120,14 +120,14 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
lineHeight: "24px",
"& h1, & h2, & h3, & h4, & h5, & h6": {
marginTop: theme.spacing(4),
marginBottom: theme.spacing(2),
marginTop: 32,
marginBottom: 16,
lineHeight: "1.25",
},
"& p": {
marginTop: 0,
marginBottom: theme.spacing(2),
marginBottom: 16,
},
"& p:only-child": {
@ -138,12 +138,12 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
"& ul, & ol": {
display: "flex",
flexDirection: "column",
gap: theme.spacing(1),
marginBottom: theme.spacing(2),
gap: 8,
marginBottom: 16,
},
"& li > ul, & li > ol": {
marginTop: theme.spacing(2),
marginTop: 16,
},
"& li > p": {
@ -152,8 +152,8 @@ const markdownStyles: Interpolation<Theme> = (theme: Theme) => ({
"& .prismjs": {
background: theme.palette.background.paperLight,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(2, 3),
borderRadius: 8,
padding: "16px 24px",
overflowX: "auto",
"& code": {

4
site/src/components/MoreMenu/MoreMenu.tsx
View File

@ -93,8 +93,8 @@ export const MoreMenuItem = (
fontSize: 14,
color: danger ? theme.palette.error.light : undefined,
"& .MuiSvgIcon-root": {
width: theme.spacing(2),
height: theme.spacing(2),
width: 16,
height: 16,
},
})}
onClick={(e) => {

4
site/src/components/PageHeader/FullWidthPageHeader.tsx
View File

@ -11,12 +11,12 @@ export const FullWidthPageHeader: FC<
css={[
{
...(theme.typography.body2 as CSSObject),
padding: theme.spacing(3),
padding: 24,
background: theme.palette.background.paper,
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex",
alignItems: "center",
gap: theme.spacing(6),
gap: 48,
zIndex: 10,
flexWrap: "wrap",

16
site/src/components/PageHeader/PageHeader.tsx
View File

@ -17,9 +17,9 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
css={(theme) => ({
display: "flex",
alignItems: "center",
paddingTop: theme.spacing(6),
paddingBottom: theme.spacing(6),
gap: theme.spacing(4),
paddingTop: 48,
paddingBottom: 48,
gap: 32,
[theme.breakpoints.down("md")]: {
flexDirection: "column",
@ -53,14 +53,14 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
}) => {
return (
<h1
css={(theme) => ({
fontSize: theme.spacing(3),
css={{
fontSize: 24,
fontWeight: 400,
margin: 0,
display: "flex",
alignItems: "center",
lineHeight: "140%",
})}
}}
>
{children}
</h1>
@ -73,12 +73,12 @@ export const PageHeaderSubtitle: FC<
return (
<h2
css={(theme) => ({
fontSize: theme.spacing(2),
fontSize: 16,
color: theme.palette.text.secondary,
fontWeight: 400,
display: "block",
margin: 0,
marginTop: condensed ? theme.spacing(0.5) : theme.spacing(1),
marginTop: condensed ? 4 : 8,
lineHeight: "140%",
})}
>

2
site/src/components/PaginationWidget/PageButton.tsx
View File

@ -24,7 +24,7 @@ export const PageButton = ({
css={[
css`
&:not(:last-of-type) {
margin-right: ${theme.spacing(0.5)};
margin-right: 4px;
}
`,
activePage === page && {

2
site/src/components/PaginationWidget/PaginationWidgetBase.tsx
View File

@ -41,7 +41,7 @@ export const PaginationWidgetBase = ({
>
<Button
css={{
marginRight: theme.spacing(0.5),
marginRight: 4,
}}
aria-label="Previous page"
disabled={isFirstPage}

16
site/src/components/Paywall/Paywall.tsx
View File

@ -52,24 +52,24 @@ const styles = {
alignItems: "center",
textAlign: "center",
minHeight: 300,
padding: theme.spacing(3),
padding: 24,
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
}),
header: (theme) => ({
marginBottom: theme.spacing(3),
borderRadius: 8,
}),
header: {
marginBottom: 24,
},
title: {
fontWeight: 600,
fontFamily: "inherit",
},
description: (theme) => ({
marginTop: theme.spacing(1),
description: {
marginTop: 8,
fontFamily: "inherit",
maxWidth: 420,
lineHeight: "160%",
}),
},
enterpriseChip: (theme) => ({
background: theme.palette.success.dark,
color: theme.palette.success.contrastText,

19
site/src/components/Pill/Pill.tsx
View File

@ -1,5 +1,5 @@
import { type FC, type ReactNode, useMemo, forwardRef } from "react";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import { css, type Interpolation, type Theme } from "@emotion/react";
import { colors } from "theme/colors";
export type PillType =
@ -53,7 +53,6 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
type = "neutral",
...attrs
} = props;
const theme = useTheme();
const typeStyles = useMemo(() => {
if (type in themeOverrides) {
@ -75,9 +74,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
borderRadius: 99999,
fontSize: 12,
color: "#FFF",
height: theme.spacing(3),
paddingLeft: icon ? theme.spacing(0.75) : theme.spacing(1.5),
paddingRight: theme.spacing(1.5),
height: 24,
paddingLeft: icon ? 6 : 12,
paddingRight: 12,
whiteSpace: "nowrap",
fontWeight: 400,
},
@ -89,9 +88,9 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
{icon && (
<div
css={css`
margin-right: ${theme.spacing(0.5)};
width: ${theme.spacing(1.75)};
height: ${theme.spacing(1.75)};
margin-right: 4px;
width: 14px;
height: 14px;
line-height: 0;
display: flex;
align-items: center;
@ -99,8 +98,8 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
& > img,
& > svg {
width: ${theme.spacing(1.75)};
height: ${theme.spacing(1.75)};
width: 14px;
height: 14px;
}
`}
>

8
site/src/components/Popover/Popover.tsx
View File

@ -128,19 +128,19 @@ export const PopoverContent = (
return (
<MuiPopover
disablePortal
css={(theme) => ({
css={{
// When it is on hover mode, and the mode is moving from the trigger to
// the popover, if there is any space, the popover will be closed. I
// found this is a limitation on how MUI structured the component. It is
// not a big issue for now but we can re-evaluate it in the future.
marginTop: hoverMode ? undefined : theme.spacing(1),
marginTop: hoverMode ? undefined : 8,
pointerEvents: hoverMode ? "none" : undefined,
"& .MuiPaper-root": {
minWidth: theme.spacing(40),
minWidth: 320,
fontSize: 14,
pointerEvents: hoverMode ? "auto" : undefined,
},
})}
}}
{...horizontalProps(horizontal)}
{...modeProps(popover)}
{...props}

6
site/src/components/Resources/AgentLatency.tsx
View File

@ -65,11 +65,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
first row is the preferred relay.
</HelpTooltipText>
<HelpTooltipText>
<Stack
direction="column"
spacing={1}
css={{ marginTop: theme.spacing(2) }}
>
<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
{Object.entries(agent.latency)
.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
.map(([regionName, region]) => (

18
site/src/components/Resources/AgentMetadata.tsx
View File

@ -205,26 +205,26 @@ const StaticWidth = (props: BoxProps) => {
// site/src/components/Resources/ResourceCard.tsx
const styles = {
root: (theme) => ({
padding: theme.spacing(2.5, 4),
padding: "20px 32px",
borderTop: `1px solid ${theme.palette.divider}`,
background: theme.palette.background.paper,
overflowX: "auto",
scrollPadding: theme.spacing(0, 4),
scrollPadding: "0 32px",
}),
metadata: (theme) => ({
metadata: {
fontSize: 12,
lineHeight: "normal",
display: "flex",
flexDirection: "column",
gap: theme.spacing(0.5),
gap: 4,
overflow: "visible",
// Because of scrolling
"&:last-child": {
paddingRight: theme.spacing(4),
paddingRight: 32,
},
}),
},
metadataLabel: (theme) => ({
color: theme.palette.text.secondary,
@ -255,9 +255,9 @@ const styles = {
cursor: "pointer",
}),
skeleton: (theme) => ({
marginTop: theme.spacing(0.5),
}),
skeleton: {
marginTop: 4,
},
inlineCommand: (theme) => ({
fontFamily: MONOSPACE_FONT_FAMILY,

30
site/src/components/Resources/AgentRow.tsx
View File

@ -563,31 +563,31 @@ const styles = {
}),
agentInfo: (theme) => ({
padding: theme.spacing(2, 4),
padding: "16px 32px",
display: "flex",
alignItems: "center",
gap: theme.spacing(6),
gap: 48,
flexWrap: "wrap",
[theme.breakpoints.down("md")]: {
gap: theme.spacing(2),
gap: 16,
},
}),
agentNameAndInfo: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(3),
gap: 24,
flexWrap: "wrap",
[theme.breakpoints.down("md")]: {
gap: theme.spacing(1.5),
gap: 12,
},
}),
agentButtons: (theme) => ({
display: "flex",
gap: theme.spacing(1),
gap: 8,
justifyContent: "flex-end",
flexWrap: "wrap",
flex: 1,
@ -607,7 +607,7 @@ const styles = {
maxHeight: 256,
borderBottom: `1px solid ${theme.palette.divider}`,
backgroundColor: theme.palette.background.paper,
paddingTop: theme.spacing(2),
paddingTop: 16,
// We need this to be able to apply the padding top from startupLogs
"& > div": {
@ -618,7 +618,7 @@ const styles = {
agentNameAndStatus: (theme) => ({
display: "flex",
alignItems: "center",
gap: theme.spacing(4),
gap: 32,
[theme.breakpoints.down("md")]: {
width: "100%",
@ -631,7 +631,7 @@ const styles = {
textOverflow: "ellipsis",
maxWidth: 260,
fontWeight: 600,
fontSize: theme.spacing(2),
fontSize: 16,
flexShrink: 0,
width: "fit-content",
@ -640,11 +640,11 @@ const styles = {
},
}),
agentDataGroup: (theme) => ({
agentDataGroup: {
display: "flex",
alignItems: "baseline",
gap: theme.spacing(6),
}),
gap: 48,
},
agentData: (theme) => ({
display: "flex",
@ -670,12 +670,12 @@ const styles = {
background: "transparent",
border: 0,
fontFamily: "inherit",
padding: theme.spacing(1.5, 4),
padding: "12px 32px",
color: theme.palette.text.secondary,
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: theme.spacing(1),
gap: 8,
whiteSpace: "nowrap",
"&:hover": {
@ -699,7 +699,7 @@ const styles = {
agentErrorMessage: (theme) => ({
fontSize: 12,
fontWeight: 400,
marginTop: theme.spacing(0.5),
marginTop: 4,
color: theme.palette.warning.light,
}),

12
site/src/components/Resources/AgentRowPreview.tsx
View File

@ -102,7 +102,7 @@ export const AgentRowPreview: FC<AgentRowPreviewProps> = ({
const styles = {
agentRow: (theme) => ({
padding: theme.spacing(2, 4),
padding: "16px 32px",
backgroundColor: theme.palette.background.paperLight,
fontSize: 16,
position: "relative",
@ -122,12 +122,12 @@ const styles = {
},
}),
agentStatusWrapper: (theme) => ({
width: theme.spacing(4.5),
agentStatusWrapper: {
width: 36,
display: "flex",
justifyContent: "center",
flexShrink: 0,
}),
},
agentStatusPreview: (theme) => ({
width: 10,
@ -153,7 +153,7 @@ const styles = {
color: theme.palette.text.secondary,
[theme.breakpoints.down("md")]: {
gap: theme.spacing(2),
gap: 16,
flexWrap: "wrap",
},
}),
@ -170,7 +170,7 @@ const styles = {
[theme.breakpoints.down("md")]: {
flexDirection: "column",
alignItems: "flex-start",
gap: theme.spacing(1),
gap: 8,
width: "fit-content",
},
}),

16
site/src/components/Resources/AgentStatus.tsx
View File

@ -353,12 +353,12 @@ export const AgentStatus: React.FC<{
};
const styles = {
status: (theme) => ({
width: theme.spacing(1),
height: theme.spacing(1),
status: {
width: 8,
height: 8,
borderRadius: "100%",
flexShrink: 0,
}),
},
connected: (theme) => ({
backgroundColor: theme.palette.success.light,
@ -388,15 +388,15 @@ const styles = {
timeoutWarning: (theme) => ({
color: theme.palette.warning.light,
width: theme.spacing(2),
height: theme.spacing(2),
width: 16,
height: 16,
position: "relative",
}),
errorWarning: (theme) => ({
color: theme.palette.error.main,
width: theme.spacing(2),
height: theme.spacing(2),
width: 16,
height: 16,
position: "relative",
}),
} satisfies Record<string, Interpolation<Theme>>;

2
site/src/components/Resources/AppLink/AppLink.tsx
View File

@ -94,7 +94,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
<span
css={
!isPrivateApp && {
marginRight: theme.spacing(1),
marginRight: 8,
}
}
>

2
site/src/components/Resources/AppLink/AppPreviewLink.tsx
View File

@ -12,7 +12,7 @@ export const AppPreviewLink: FC<AppPreviewProps> = ({ app }) => {
return (
<Stack
css={(theme) => ({
padding: theme.spacing(0.25, 1.5),
padding: "2px 12px",
borderRadius: 9999,
border: `1px solid ${theme.palette.divider}`,
color: theme.palette.text.primary,

2
site/src/components/Resources/PortForwardButton.stories.tsx
View File

@ -13,7 +13,7 @@ const meta: Meta<typeof PortForwardPopoverView> = {
(Story) => (
<Box
sx={{
width: (theme) => theme.spacing(38),
width: 304,
border: (theme) => `1px solid ${theme.palette.divider}`,
borderRadius: 1,
backgroundColor: (theme) => theme.palette.background.paper,

49
site/src/components/Resources/PortForwardButton.tsx
View File

@ -54,7 +54,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
fontWeight: 500,
height: 20,
minWidth: 20,
padding: (theme) => theme.spacing(0, 0.5),
padding: "0 4px",
borderRadius: "50%",
display: "flex",
alignItems: "center",
@ -75,9 +75,9 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
classes={{
paper: css`
padding: 0;
width: ${theme.spacing(38)};
width: 304px;
color: ${theme.palette.text.secondary};
margin-top: ${theme.spacing(0.5)};
margin-top: 4px;
`,
}}
>
@ -90,25 +90,24 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
export const PortForwardPopoverView: React.FC<
PortForwardButtonProps & { ports?: WorkspaceAgentListeningPort[] }
> = (props) => {
const theme = useTheme();
const { host, workspaceName, agent, username, ports } = props;
return (
<>
<Box
sx={{
padding: (theme) => theme.spacing(2.5),
borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
css={{
padding: 20,
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
<HelpTooltipTitle>Forwarded ports</HelpTooltipTitle>
<HelpTooltipText
sx={{ color: (theme) => theme.palette.text.secondary }}
>
<HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
{ports?.length === 0
? "No open ports were detected."
: "The forwarded ports are exclusively accessible to you."}
</HelpTooltipText>
<Box sx={{ marginTop: (theme) => theme.spacing(1.5) }}>
<Box css={{ marginTop: 12 }}>
{ports?.map((p) => {
const url = portForwardURL(
host,
@ -122,7 +121,7 @@ export const PortForwardPopoverView: React.FC<
<Link
underline="none"
sx={{
color: (theme) => theme.palette.text.primary,
color: theme.palette.text.primary,
fontSize: 14,
display: "flex",
alignItems: "center",
@ -141,7 +140,7 @@ export const PortForwardPopoverView: React.FC<
component="span"
sx={{
ml: "auto",
color: (theme) => theme.palette.text.secondary,
color: theme.palette.text.secondary,
fontSize: 13,
fontWeight: 400,
}}
@ -154,28 +153,22 @@ export const PortForwardPopoverView: React.FC<
</Box>
</Box>
<Box
sx={{
padding: (theme) => theme.spacing(2.5),
}}
>
<Box css={{ padding: 20 }}>
<HelpTooltipTitle>Forward port</HelpTooltipTitle>
<HelpTooltipText
sx={{ color: (theme) => theme.palette.text.secondary }}
>
<HelpTooltipText sx={{ color: theme.palette.text.secondary }}>
Access ports running on the agent:
</HelpTooltipText>
<Box
component="form"
sx={{
border: (theme) => `1px solid ${theme.palette.divider}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: "4px",
mt: 2,
display: "flex",
alignItems: "center",
"&:focus-within": {
borderColor: (theme) => theme.palette.primary.main,
borderColor: theme.palette.primary.main,
},
}}
onSubmit={(e) => {
@ -201,26 +194,26 @@ export const PortForwardPopoverView: React.FC<
min={0}
max={65535}
required
sx={{
css={{
fontSize: 14,
height: 34,
p: (theme) => theme.spacing(0, 1.5),
padding: "0 12px",
background: "none",
border: 0,
outline: "none",
color: (theme) => theme.palette.text.primary,
color: theme.palette.text.primary,
appearance: "textfield",
display: "block",
width: "100%",
}}
/>
<OpenInNewOutlined
sx={{
css={{
flexShrink: 0,
width: 14,
height: 14,
marginRight: (theme) => theme.spacing(1.5),
color: (theme) => theme.palette.text.primary,
marginRight: 12,
color: theme.palette.text.primary,
}}
/>
</Box>

18
site/src/components/Resources/ResourceCard.tsx
View File

@ -2,9 +2,9 @@ import { type FC, useState } from "react";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { CopyableValue } from "components/CopyableValue/CopyableValue";
import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
import { DropdownArrow } from "../DropdownArrow/DropdownArrow";
import { CopyableValue } from "../CopyableValue/CopyableValue";
import { Stack } from "../Stack/Stack";
import { ResourceAvatar } from "./ResourceAvatar";
import { SensitiveValue } from "./SensitiveValue";
@ -12,7 +12,7 @@ import { SensitiveValue } from "./SensitiveValue";
const styles = {
resourceCard: (theme) => ({
background: theme.palette.background.paper,
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
"&:not(:first-of-type)": {
@ -33,7 +33,7 @@ const styles = {
},
resourceCardHeader: (theme) => ({
padding: theme.spacing(3, 4),
padding: "24px 32px",
borderBottom: `1px solid ${theme.palette.divider}`,
"&:last-child": {
@ -112,13 +112,13 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
</Stack>
<div
css={(theme) => ({
css={{
flexGrow: 2,
display: "grid",
gridTemplateColumns: `repeat(${gridWidth}, minmax(0, 1fr))`,
gap: theme.spacing(5),
rowGap: theme.spacing(3),
})}
gap: 40,
rowGap: 24,
}}
>
{resource.daily_cost > 0 && (
<div css={styles.metadata}>

6
site/src/components/Resources/Resources.tsx
View File

@ -55,12 +55,12 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
};
const styles = {
buttonWrapper: (theme) => ({
buttonWrapper: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginTop: theme.spacing(2),
}),
marginTop: 16,
},
showMoreButton: {
borderRadius: 9999,

12
site/src/components/Resources/SSHButton/SSHButton.tsx
View File

@ -41,10 +41,10 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
horizontal="right"
classes={{
paper: css`
padding: ${theme.spacing(2, 3, 3)};
width: ${theme.spacing(38)};
padding: 16px 24px 24px;
width: 304px;
color: ${theme.palette.text.secondary};
margin-top: ${theme.spacing(0.25)};
margin-top: 2px;
`,
}}
>
@ -94,9 +94,9 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
};
const styles = {
codeExamples: (theme) => ({
marginTop: theme.spacing(1.5),
}),
codeExamples: {
marginTop: 12,
},
codeExampleLabel: {
fontSize: 12,

10
site/src/components/Resources/SensitiveValue.tsx
View File

@ -2,7 +2,7 @@ import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";
import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
import { useState } from "react";
import { type FC, useState } from "react";
import { css } from "@emotion/react";
import { CopyableValue } from "components/CopyableValue/CopyableValue";
@ -11,7 +11,7 @@ const Language = {
hideLabel: "Hide value",
};
export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
const [shouldDisplay, setShouldDisplay] = useState(false);
const displayValue = shouldDisplay ? value : "••••••••";
const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@ -23,11 +23,11 @@ export const SensitiveValue: React.FC<{ value: string }> = ({ value }) => {
return (
<div
css={(theme) => ({
css={{
display: "flex",
alignItems: "center",
gap: theme.spacing(0.5),
})}
gap: 4,
}}
>
<CopyableValue
value={value}

12
site/src/components/RichParameterInput/MultiTextField.tsx
View File

@ -72,15 +72,15 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
const styles = {
root: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
minHeight: theme.spacing(6), // Chip height + paddings
padding: theme.spacing(1.25, 1.75),
fontSize: theme.spacing(2),
borderRadius: 8,
minHeight: 48, // Chip height + paddings
padding: "10px 14px",
fontSize: 16,
display: "flex",
flexWrap: "wrap",
gap: theme.spacing(1),
gap: 8,
position: "relative",
margin: theme.spacing(1, 0, 0.5), // Have same margin than TextField
margin: "8px 0 4px", // Have same margin than TextField
"&:has(input:focus)": {
borderColor: theme.palette.primary.main,

41
site/src/components/RichParameterInput/RichParameterInput.tsx
View File

@ -4,7 +4,7 @@ import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import TextField, { TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import { type Interpolation, type Theme } from "@emotion/react";
import { type FC } from "react";
import { TemplateVersionParameter } from "api/typesGenerated";
import { MemoizedMarkdown } from "components/Markdown/Markdown";
@ -17,9 +17,9 @@ const isBoolean = (parameter: TemplateVersionParameter) => {
};
const styles = {
label: (theme) => ({
marginBottom: theme.spacing(0.5),
}),
label: {
marginBottom: 4,
},
labelCaption: (theme) => ({
fontSize: 14,
color: theme.palette.text.secondary,
@ -43,11 +43,11 @@ const styles = {
fontSize: 14,
},
}),
labelImmutable: (theme) => ({
marginTop: theme.spacing(0.5),
marginBottom: theme.spacing(0.5),
labelImmutable: {
marginTop: 4,
marginBottom: 4,
color: colors.yellow[7],
}),
},
textField: {
".small & .MuiInputBase-root": {
height: 36,
@ -55,32 +55,32 @@ const styles = {
borderRadius: 6,
},
},
radioGroup: (theme) => ({
radioGroup: {
".small & .MuiFormControlLabel-label": {
fontSize: 14,
},
".small & .MuiRadio-root": {
padding: theme.spacing(0.75, "9px"), // 8px + 1px border
padding: "6px 9px", // 8px + 1px border
},
".small & .MuiRadio-root svg": {
width: 16,
height: 16,
},
}),
checkbox: (theme) => ({
},
checkbox: {
display: "flex",
alignItems: "center",
gap: theme.spacing(1),
}),
labelIconWrapper: (theme) => ({
width: theme.spacing(2.5),
height: theme.spacing(2.5),
gap: 8,
},
labelIconWrapper: {
width: 20,
height: 20,
display: "block",
".small &": {
display: "none",
},
}),
},
labelIcon: {
width: "100%",
height: "100%",
@ -175,7 +175,6 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
size,
...props
}) => {
const theme = useTheme();
const small = size === "small";
if (isBoolean(parameter)) {
@ -232,9 +231,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
spacing={small ? 1 : 0}
alignItems={small ? "center" : undefined}
direction={small ? "row" : "column"}
css={{
padding: small ? undefined : `${theme.spacing(0.5)} 0`,
}}
css={{ padding: small ? undefined : "4px 0" }}
>
{small ? (
<Tooltip

13
site/src/components/SettingsLayout/Section.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from "@emotion/react";
import Typography from "@mui/material/Typography";
import { type FC, type ReactNode, type PropsWithChildren } from "react";
import { SectionAction } from "./SectionAction";
@ -32,8 +31,6 @@ export const Section: SectionFC = ({
children,
layout = "fixed",
}) => {
const theme = useTheme();
return (
<section className={className} id={id} data-testid={id}>
<div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
@ -55,7 +52,7 @@ export const Section: SectionFC = ({
{toolbar && <div>{toolbar}</div>}
</div>
)}
{alert && <div css={{ marginBottom: theme.spacing(1) }}>{alert}</div>}
{alert && <div css={{ marginBottom: 8 }}>{alert}</div>}
{children}
</div>
</section>
@ -66,16 +63,16 @@ export const Section: SectionFC = ({
Section.Action = SectionAction;
const styles = {
header: (theme) => ({
marginBottom: theme.spacing(3),
header: {
marginBottom: 24,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}),
},
description: (theme) => ({
color: theme.palette.text.secondary,
fontSize: 16,
marginTop: theme.spacing(0.5),
marginTop: 4,
lineHeight: "140%",
}),
} satisfies Record<string, Interpolation<Theme>>;

10
site/src/components/SettingsLayout/SectionAction.tsx
View File

@ -7,13 +7,5 @@ import { type FC } from "react";
export const SectionAction: FC<React.PropsWithChildren<unknown>> = ({
children,
}) => {
return (
<div
css={(theme) => ({
marginTop: theme.spacing(3),
})}
>
{children}
</div>
);
return <div css={{ marginTop: 24 }}>{children}</div>;
};

15
site/src/components/SettingsLayout/SettingsLayout.tsx
View File

@ -18,21 +18,10 @@ export const SettingsLayout: FC = () => {
</Helmet>
<Margins>
<Stack
css={(theme) => ({
padding: theme.spacing(6, 0),
})}
direction="row"
spacing={6}
>
<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
<Sidebar user={me} />
<Suspense fallback={<Loader />}>
<main
css={{
maxWidth: 800,
width: "100%",
}}
>
<main css={{ maxWidth: 800, width: "100%" }}>
<Outlet />
</main>
</Suspense>

19
site/src/components/SettingsLayout/Sidebar.tsx
View File

@ -33,8 +33,8 @@ const SidebarNavItem: FC<
display: block;
font-size: 14px;
text-decoration: none;
padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
border-radius: ${theme.shape.borderRadius / 2}px;
padding: 12px 12px 12px 16px;
border-radius: 4px;
transition: background-color 0.15s ease-in-out;
margin-bottom: 1px;
position: relative;
@ -56,8 +56,8 @@ const SidebarNavItem: FC<
left: 0;
top: 0;
background-color: ${theme.palette.secondary.dark};
border-top-left-radius: ${theme.shape.borderRadius};
border-bottom-left-radius: ${theme.shape.borderRadius};
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
`;
@ -82,14 +82,7 @@ const SidebarNavItem: FC<
const SidebarNavItemIcon: React.FC<{
icon: ComponentType<{ className?: string }>;
}> = ({ icon: Icon }) => {
return (
<Icon
css={(theme) => ({
width: theme.spacing(2),
height: theme.spacing(2),
})}
/>
);
return <Icon css={{ width: 16, height: 16 }} />;
};
export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
@ -150,7 +143,7 @@ const styles = {
},
userInfo: (theme) => ({
...(theme.typography.body2 as CSSObject),
marginBottom: theme.spacing(2),
marginBottom: 16,
}),
userData: {
overflow: "hidden",

10
site/src/components/Sidebar/Sidebar.tsx
View File

@ -5,7 +5,7 @@ import { colors } from "theme/colors";
export const Sidebar = styled((props: BoxProps) => (
<Box {...props} component="nav" />
))(({ theme }) => ({
width: theme.spacing(32),
width: 256,
flexShrink: 0,
borderRight: `1px solid ${theme.palette.divider}`,
height: "100%",
@ -22,7 +22,7 @@ export const SidebarItem = styled(
fontSize: 14,
width: "100%",
textAlign: "left",
padding: theme.spacing(0, 3),
padding: "0 24px",
cursor: "pointer",
pointerEvents: active ? "none" : "auto",
color: active ? theme.palette.text.primary : theme.palette.text.secondary,
@ -30,8 +30,8 @@ export const SidebarItem = styled(
background: theme.palette.action.hover,
color: theme.palette.text.primary,
},
paddingTop: theme.spacing(1.25),
paddingBottom: theme.spacing(1.25),
paddingTop: 10,
paddingBottom: 10,
}));
export const SidebarCaption = styled(Box)(({ theme }) => ({
@ -39,6 +39,6 @@ export const SidebarCaption = styled(Box)(({ theme }) => ({
textTransform: "uppercase",
fontWeight: 500,
color: theme.palette.text.secondary,
padding: theme.spacing(1.5, 3),
padding: "12px 24px",
letterSpacing: "0.5px",
}));

2
site/src/components/SignInLayout/SignInLayout.tsx
View File

@ -32,7 +32,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
css={(theme) => ({
fontSize: 12,
color: theme.palette.text.secondary,
marginTop: theme.spacing(3),
marginTop: 24,
})}
>
{`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}

6
site/src/components/Stack/Stack.tsx
View File

@ -25,15 +25,15 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
<div
{...divProps}
ref={ref}
css={(theme) => ({
css={{
display: "flex",
flexDirection: direction,
gap: spacing && theme.spacing(spacing),
gap: spacing * 8,
alignItems: alignItems,
justifyContent: justifyContent,
flexWrap: wrap,
maxWidth: "100%",
})}
}}
>
{children}
</div>

20
site/src/components/Stats/Stats.tsx
View File

@ -23,9 +23,9 @@ export const StatsItem: FC<
const styles = {
stats: (theme) => ({
...(theme.typography.body2 as CSSObject),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
borderRadius: theme.shape.borderRadius,
paddingLeft: 16,
paddingRight: 16,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
display: "flex",
alignItems: "center",
@ -35,20 +35,20 @@ const styles = {
[theme.breakpoints.down("md")]: {
display: "block",
padding: theme.spacing(2),
padding: 16,
},
}),
statItem: (theme) => ({
padding: theme.spacing(1.75),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
padding: 14,
paddingLeft: 16,
paddingRight: 16,
display: "flex",
alignItems: "baseline",
gap: theme.spacing(1),
gap: 8,
[theme.breakpoints.down("md")]: {
padding: theme.spacing(1),
padding: 8,
},
}),
@ -58,7 +58,7 @@ const styles = {
},
statsValue: (theme) => ({
marginTop: theme.spacing(0.25),
marginTop: 2,
display: "flex",
wordWrap: "break-word",
color: theme.palette.text.primary,

2
site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
View File

@ -35,7 +35,7 @@ export const SyntaxHighlighter: FC<{
return (
<div
css={(theme) => ({
padding: theme.spacing(1, 0),
padding: "8px 0",
background: theme.palette.background.paper,
height: "100%",
})}

11
site/src/components/TableLoader/TableLoader.tsx
View File

@ -1,21 +1,12 @@
import TableCell from "@mui/material/TableCell";
import TableRow, { type TableRowProps } from "@mui/material/TableRow";
import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
import { useTheme } from "@emotion/react";
import { Loader } from "../Loader/Loader";
export const TableLoader: FC = () => {
const theme = useTheme();
return (
<TableRow>
<TableCell
colSpan={999}
css={{
textAlign: "center",
height: theme.spacing(20),
}}
>
<TableCell colSpan={999} css={{ textAlign: "center", height: 160 }}>
<Loader />
</TableCell>
</TableRow>

8
site/src/components/TableToolbar/TableToolbar.tsx
View File

@ -4,13 +4,15 @@ import Skeleton from "@mui/material/Skeleton";
export const TableToolbar = styled(Box)(({ theme }) => ({
fontSize: 13,
marginBottom: theme.spacing(1),
marginBottom: "8px",
marginTop: 0,
height: 36, // The size of a small button
height: "36px", // The size of a small button
color: theme.palette.text.secondary,
"& strong": { color: theme.palette.text.primary },
display: "flex",
alignItems: "center",
"& strong": {
color: theme.palette.text.primary,
},
}));
type BasePaginationStatusProps = {

10
site/src/components/Tabs/Tabs.tsx
View File

@ -10,15 +10,15 @@ export const Tabs = ({ children }: { children: ReactNode }) => {
<div
css={(theme) => ({
borderBottom: `1px solid ${theme.palette.divider}`,
marginBottom: theme.spacing(5),
marginBottom: 40,
})}
>
<Margins
css={(theme) => ({
css={{
display: "flex",
alignItems: "center",
gap: theme.spacing(0.25),
})}
gap: 2,
}}
>
{children}
</Margins>
@ -34,7 +34,7 @@ export const TabLink = (props: NavLinkProps) => {
color: ${theme.palette.text.secondary};
font-size: 14px;
display: block;
padding: ${theme.spacing(0, 2, 2)};
padding: 0 16px 16px;
&:hover {
color: ${theme.palette.text.primary};

26
site/src/components/TemplateExampleCard/TemplateExampleCard.tsx
View File

@ -33,7 +33,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
const styles = {
template: (theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
background: theme.palette.background.paper,
textDecoration: "none",
textAlign: "left",
@ -47,36 +47,36 @@ const styles = {
},
}),
templateIcon: (theme) => ({
width: theme.spacing(12),
height: theme.spacing(12),
templateIcon: {
width: 96,
height: 96,
display: "flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
"& img": {
height: theme.spacing(4),
height: 32,
},
}),
},
templateInfo: (theme) => ({
padding: theme.spacing(2, 2, 2, 0),
templateInfo: {
padding: "16px 16px 16px 0",
display: "flex",
flexDirection: "column",
overflow: "hidden",
}),
},
templateName: (theme) => ({
fontSize: theme.spacing(2),
templateName: {
fontSize: 16,
textOverflow: "ellipsis",
width: "100%",
overflow: "hidden",
whiteSpace: "nowrap",
}),
},
templateDescription: (theme) => ({
fontSize: theme.spacing(1.75),
fontSize: 14,
color: theme.palette.text.secondary,
textOverflow: "ellipsis",
width: "100%",

10
site/src/components/TemplateFiles/TemplateFiles.tsx
View File

@ -99,13 +99,13 @@ const styles = {
tab: (theme) => ({
background: "transparent",
border: 0,
padding: theme.spacing(0, 3),
padding: "0 24px",
display: "flex",
alignItems: "center",
height: theme.spacing(6),
height: 48,
opacity: 0.85,
cursor: "pointer",
gap: theme.spacing(0.5),
gap: 4,
position: "relative",
color: theme.palette.text.secondary,
whiteSpace: "nowrap",
@ -142,7 +142,7 @@ const styles = {
width: 6,
backgroundColor: theme.palette.warning.light,
borderRadius: "100%",
marginLeft: theme.spacing(0.5),
marginLeft: 4,
}),
codeWrapper: (theme) => ({
@ -150,7 +150,7 @@ const styles = {
}),
files: (theme) => ({
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
}),

2
site/src/components/Timeline/TimelineDateRow.tsx
View File

@ -23,7 +23,7 @@ export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
>
<TableCell
css={{
padding: `${theme.spacing(1, 4)} !important`,
padding: `8px 32px !important`,
background: `${theme.palette.background.paperLight} !important`,
fontSize: 12,
position: "relative",

8
site/src/components/UserAutocomplete/UserAutocomplete.tsx
View File

@ -1,5 +1,4 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
@ -33,7 +32,6 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
className,
size = "small",
}) => {
const theme = useTheme();
const [autoComplete, setAutoComplete] = useState<{
value: string;
open: boolean;
@ -130,10 +128,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
),
classes: {
root: css`
padding-left: ${theme.spacing(
1.75,
)} !important; // Same padding left as input
gap: ${theme.spacing(0.5)};
padding-left: 14px !important; // Same padding left as input
gap: 4px;
`,
},
}}

8
site/src/components/Welcome/Welcome.tsx
View File

@ -27,18 +27,16 @@ export const Welcome: FC<
<CoderIcon
css={{
color: theme.palette.text.primary,
fontSize: theme.spacing(8),
fontSize: 64,
}}
/>
</div>
<Typography
css={css`
text-align: center;
font-size: ${theme.spacing(4)};
font-size: 32px;
font-weight: 400;
margin: 0;
margin-bottom: ${theme.spacing(4)};
margin-top: ${theme.spacing(2)};
margin: 16px 0 32px;
line-height: 1.25;
& strong {

28
site/src/components/WorkspaceBuildLogs/Logs.tsx
View File

@ -25,7 +25,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
}) => {
return (
<div css={styles.root} className={className}>
<div css={styles.scrollWrapper}>
<div css={{ minWidth: "fit-content" }}>
{lines.map((line, idx) => (
<div css={styles.line} className={line.level} key={idx}>
{!hideTimestamps && (
@ -63,7 +63,7 @@ export const LogLine: FC<{
return (
<div
css={[styles.line, isUsingLineNumber && styles.lineNumber]}
css={[styles.line, isUsingLineNumber && { paddingLeft: 16 }]}
className={line.level}
style={style}
>
@ -93,8 +93,8 @@ export const LogLine: FC<{
const styles = {
root: (theme) => ({
minHeight: 156,
padding: theme.spacing(1, 0),
borderRadius: theme.shape.borderRadius,
padding: "8px 0",
borderRadius: 8,
overflowX: "auto",
background: theme.palette.background.default,
@ -103,9 +103,6 @@ const styles = {
borderRadius: 0,
},
}),
scrollWrapper: {
minWidth: "fit-content",
},
line: (theme) => ({
wordBreak: "break-all",
display: "flex",
@ -116,7 +113,7 @@ const styles = {
height: "auto",
// Whitespace is significant in terminal output for alignment
whiteSpace: "pre",
padding: theme.spacing(0, 4),
padding: "0 32px",
"&.error": {
backgroundColor: theme.palette.error.dark,
@ -130,23 +127,20 @@ const styles = {
backgroundColor: theme.palette.warning.dark,
},
}),
lineNumber: (theme) => ({
paddingLeft: theme.spacing(2),
}),
space: (theme) => ({
space: {
userSelect: "none",
width: theme.spacing(3),
width: 24,
display: "block",
flexShrink: 0,
}),
},
time: (theme) => ({
userSelect: "none",
whiteSpace: "pre",
display: "inline-block",
color: theme.palette.text.secondary,
}),
number: (theme) => ({
width: theme.spacing(4),
number: {
width: 32,
textAlign: "right",
}),
},
} satisfies Record<string, Interpolation<Theme>>;

2
site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
View File

@ -97,7 +97,7 @@ const styles = {
header: (theme) => ({
fontSize: 13,
fontWeight: 600,
padding: theme.spacing(0.5, 3),
padding: "4px 24px",
display: "flex",
alignItems: "center",
fontFamily: "Inter",

2
site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
View File

@ -89,7 +89,7 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
backgroundColor: theme.palette.background.paperLight,
border: `1px solid ${theme.palette.divider}`,
fontSize: 12,
padding: theme.spacing(1, 1.25),
padding: "8px 10px",
},
}));

4
site/src/hooks/useClickableTableRow.ts
View File

@ -42,8 +42,8 @@ export const useClickableTableRow = ({
},
"&:last-of-type": {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
borderBottomLeftRadius: 8,
borderBottomRightRadius: 8,
},
},
hover: true,

4
site/src/pages/404Page/404Page.tsx
View File

@ -15,8 +15,8 @@ export const NotFoundPage: FC = () => {
>
<div
css={(theme) => ({
margin: theme.spacing(1),
padding: theme.spacing(1),
margin: 8,
padding: 8,
borderRight: theme.palette.divider,
})}
>

24
site/src/pages/AuditPage/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
View File

@ -69,15 +69,15 @@ const styles = {
zIndex: 2,
}),
diffColumn: (theme) => ({
diffColumn: {
flex: 1,
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2.5),
paddingRight: theme.spacing(2),
paddingTop: 16,
paddingBottom: 20,
paddingRight: 16,
lineHeight: "160%",
alignSelf: "stretch",
overflowWrap: "anywhere",
}),
},
diffOld: (theme) => ({
backgroundColor: theme.palette.error.dark,
@ -89,15 +89,15 @@ const styles = {
alignItems: "baseline",
},
diffLine: (theme) => ({
diffLine: {
opacity: 0.5,
width: theme.spacing(6),
width: 48,
textAlign: "right",
flexShrink: 0,
}),
},
diffIcon: (theme) => ({
width: theme.spacing(4),
width: 32,
textAlign: "center",
fontSize: theme.typography.body1.fontSize,
flexShrink: 0,
@ -108,10 +108,10 @@ const styles = {
color: theme.palette.success.contrastText,
}),
diffValue: (theme) => ({
diffValue: {
padding: 1,
borderRadius: theme.shape.borderRadius / 2,
}),
borderRadius: 4,
},
diffValueOld: {
backgroundColor: colors.red[12],

6
site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View File

@ -168,9 +168,9 @@ const styles = {
border: 0,
},
auditLogHeader: (theme) => ({
padding: theme.spacing(2, 4),
}),
auditLogHeader: {
padding: "16px 32px",
},
auditLogHeaderInfo: {
flex: 1,

4
site/src/pages/CliAuthPage/CliAuthPageView.tsx
View File

@ -26,7 +26,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
css={{
fontSize: 16,
color: theme.palette.text.secondary,
marginBottom: theme.spacing(4),
marginBottom: 32,
textAlign: "center",
lineHeight: "160%",
}}
@ -48,7 +48,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
css={{
display: "flex",
justifyContent: "flex-end",
paddingTop: theme.spacing(1),
paddingTop: 8,
}}
>
<Button component={RouterLink} size="large" to="/workspaces" fullWidth>

14
site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
View File

@ -695,18 +695,18 @@ const styles = {
},
optionText: (theme) => ({
fontSize: theme.spacing(2),
fontSize: 16,
color: theme.palette.text.primary,
}),
optionHelperText: (theme) => ({
fontSize: theme.spacing(1.5),
fontSize: 12,
color: theme.palette.text.secondary,
}),
error: (theme) => ({
padding: theme.spacing(3),
borderRadius: theme.spacing(1),
padding: 24,
borderRadius: 8,
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.error.main}`,
}),
@ -719,13 +719,13 @@ const styles = {
errorDescription: (theme) => ({
margin: 0,
color: theme.palette.text.secondary,
marginTop: theme.spacing(0.5),
marginTop: 4,
}),
errorDetails: (theme) => ({
display: "block",
marginTop: theme.spacing(1),
marginTop: 8,
color: theme.palette.error.light,
fontSize: theme.spacing(2),
fontSize: 16,
}),
} satisfies Record<string, Interpolation<Theme>>;

2
site/src/pages/CreateTemplatePage/VariableInput.tsx
View File

@ -114,7 +114,7 @@ const styles = {
fontSize: 14,
color: theme.palette.text.secondary,
display: "block",
marginBottom: theme.spacing(0.5),
marginBottom: 4,
}),
labelDescription: (theme) => ({
fontSize: 16,

6
site/src/pages/CreateTokenPage/CreateTokenPage.tsx
View File

@ -72,12 +72,12 @@ export const CreateTokenPage: FC = () => {
<p>Make sure you copy the below token before proceeding:</p>
<CodeExample
code={newToken?.key ?? ""}
css={(theme) => ({
css={{
minHeight: "auto",
userSelect: "all",
width: "100%",
marginTop: theme.spacing(3),
})}
marginTop: 24,
}}
/>
</>
);

12
site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
View File

@ -234,9 +234,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
border: 1px solid ${theme.palette.warning.light};
border-radius: 8px;
background-color: ${theme.palette.background.paper};
padding: ${theme.spacing(10)};
margin-left: ${theme.spacing(-10)};
margin-right: ${theme.spacing(-10)};
padding: 80px;
margin-left: -80px;
margin-right: -80px;
`,
}}
getInputProps={(parameter, index) => {
@ -308,9 +308,9 @@ const useExternalAuthVerification = (
};
const styles = {
hasDescription: (theme) => ({
paddingBottom: theme.spacing(2),
}),
hasDescription: {
paddingBottom: 16,
},
description: (theme) => ({
fontSize: 13,
color: theme.palette.text.secondary,

4
site/src/pages/CreateWorkspacePage/SelectedTemplate.tsx
View File

@ -40,8 +40,8 @@ export const SelectedTemplate: FC<SelectedTemplateProps> = ({ template }) => {
const styles = {
template: (theme) => ({
padding: theme.spacing(2.5, 3),
borderRadius: theme.shape.borderRadius,
padding: "20px 24px",
borderRadius: 8,
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
}),

4
site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
View File

@ -134,8 +134,8 @@ export const AppearanceSettingsPageView = ({
<InputAdornment
position="end"
css={{
width: theme.spacing(3),
height: theme.spacing(3),
width: 24,
height: 24,
"& img": {
maxWidth: "100%",

14
site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
View File

@ -1,4 +1,4 @@
import { css, useTheme } from "@emotion/react";
import { css } from "@emotion/react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
@ -18,8 +18,6 @@ export type ExternalAuthSettingsPageViewProps = {
export const ExternalAuthSettingsPageView = ({
config,
}: ExternalAuthSettingsPageViewProps): JSX.Element => {
const theme = useTheme();
return (
<>
<Header
@ -42,8 +40,8 @@ export const ExternalAuthSettingsPageView = ({
<div
css={{
marginTop: theme.spacing(3),
marginBottom: theme.spacing(3),
marginTop: 24,
marginBottom: 24,
}}
>
<Alert severity="info" actions={<EnterpriseBadge key="enterprise" />}>
@ -56,13 +54,13 @@ export const ExternalAuthSettingsPageView = ({
<Table
css={css`
& td {
padding-top: ${theme.spacing(3)};
padding-bottom: ${theme.spacing(3)};
padding-top: 24px;
padding-bottom: 24px;
}
& td:last-child,
& th:last-child {
padding-left: ${theme.spacing(4)};
padding-left: 32px;
}
`}
>

11
site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx
View File

@ -28,7 +28,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
<Paper
css={{
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
}}
elevation={0}
>
@ -38,7 +38,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
alignItems: "center",
display: "flex",
justifyContent: "space-between",
padding: theme.spacing(1.5, 2),
padding: "12px 16px",
}}
>
<h6
@ -54,12 +54,7 @@ export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
</div>
)}
<div
{...contentsProps}
css={{
margin: theme.spacing(2),
}}
>
<div {...contentsProps} css={{ margin: 16 }}>
{children}
</div>
</Paper>

5
site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
View File

@ -1,4 +1,3 @@
import { useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
@ -23,8 +22,6 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
isSavingLicense,
savingLicenseError,
}) => {
const theme = useTheme();
function handleFileUploaded(files: File[]) {
const fileReader = new FileReader();
fileReader.onload = () => {
@ -76,7 +73,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
description="Select a text file that contains your license key."
/>
<Stack css={{ paddingTop: theme.spacing(5) }}>
<Stack css={{ paddingTop: 40 }}>
<DividerWithText>or</DividerWithText>
<Fieldset

8
site/src/pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText.tsx
View File

@ -21,10 +21,10 @@ const styles = {
width: "100%",
}),
content: (theme) => ({
paddingTop: theme.spacing(0.5),
paddingBottom: theme.spacing(0.5),
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2),
paddingTop: 4,
paddingBottom: 4,
paddingRight: 16,
paddingLeft: 16,
fontSize: theme.typography.h5.fontSize,
color: theme.palette.text.secondary,
}),

8
site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx
View File

@ -118,7 +118,7 @@ const styles = {
}),
licenseCard: (theme) => ({
...(theme.typography.body2 as CSSObject),
padding: theme.spacing(2),
padding: 16,
}),
cardContent: {},
licenseId: (theme) => ({
@ -135,9 +135,9 @@ const styles = {
licenseExpires: (theme) => ({
color: theme.palette.text.secondary,
}),
expiredBadge: (theme) => ({
marginBottom: theme.spacing(0.5),
}),
expiredBadge: {
marginBottom: 4,
},
secondaryMaincolor: (theme) => ({
color: theme.palette.text.secondary,
}),

16
site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
View File

@ -128,25 +128,25 @@ const LicensesSettingsPageView: FC<Props> = ({
};
const styles = {
title: (theme) => ({
fontSize: theme.spacing(2),
}),
title: {
fontSize: 16,
},
root: (theme) => ({
minHeight: theme.spacing(30),
minHeight: 240,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: theme.shape.borderRadius,
borderRadius: 8,
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(6),
padding: 48,
}),
description: (theme) => ({
color: theme.palette.text.secondary,
textAlign: "center",
maxWidth: theme.spacing(58),
marginTop: theme.spacing(1),
maxWidth: 464,
marginTop: 8,
}),
} satisfies Record<string, Interpolation<Theme>>;

24
site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
View File

@ -232,30 +232,30 @@ const styles = {
color: theme.palette.text.primary,
}),
installAlert: (theme) => ({
margin: theme.spacing(2),
}),
installAlert: {
margin: 16,
},
links: (theme) => ({
links: {
display: "flex",
gap: theme.spacing(0.5),
margin: theme.spacing(2),
gap: 4,
margin: 16,
flexDirection: "column",
}),
},
link: (theme) => ({
link: {
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 16,
gap: theme.spacing(1),
}),
gap: 8,
},
status: (theme) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: theme.spacing(1),
gap: 8,
color: theme.palette.text.disabled,
}),
@ -263,6 +263,6 @@ const styles = {
display: "flex",
gap: 4,
color: theme.palette.text.disabled,
margin: theme.spacing(4),
margin: 32,
}),
} satisfies Record<string, Interpolation<Theme>>;

2
site/src/pages/GroupsPage/GroupsPageView.tsx
View File

@ -220,7 +220,7 @@ const styles = {
},
"& .MuiTableCell-root:last-child": {
paddingRight: `${theme.spacing(2)} !important`,
paddingRight: `16px !important`,
},
}),
arrowRight: (theme) => ({

12
site/src/pages/HealthPage/HealthPage.tsx
View File

@ -114,7 +114,7 @@ export function HealthPageView({
>
<Box
sx={{
width: (theme) => theme.spacing(32),
width: 256,
flexShrink: 0,
borderRight: (theme) => `1px solid ${theme.palette.divider}`,
}}
@ -125,7 +125,7 @@ export function HealthPageView({
textTransform: "uppercase",
fontWeight: 500,
color: (theme) => theme.palette.text.secondary,
padding: (theme) => theme.spacing(1.5, 3),
padding: "12px 24px",
letterSpacing: "0.5px",
}}
>
@ -157,7 +157,7 @@ export function HealthPageView({
gap: 1,
textAlign: "left",
height: 36,
padding: (theme) => theme.spacing(0, 3),
padding: "0 24px",
cursor: "pointer",
pointerEvents: isActive ? "none" : "auto",
color: (theme) =>
@ -214,15 +214,15 @@ const styles = {
stats: (theme) => ({
padding: 0,
border: 0,
gap: theme.spacing(6),
rowGap: theme.spacing(3),
gap: 48,
rowGap: 24,
flex: 1,
[theme.breakpoints.down("md")]: {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: theme.spacing(1),
gap: 8,
},
}),

8
site/src/pages/IconsPage/IconsPage.tsx
View File

@ -82,7 +82,7 @@ export const IconsPage: FC = () => {
title={
<Box
css={{
padding: theme.spacing(1),
padding: 8,
fontSize: 13,
lineHeight: 1.5,
}}
@ -153,14 +153,14 @@ export const IconsPage: FC = () => {
wrap="wrap"
spacing={1}
justifyContent="center"
css={(theme) => ({ marginTop: theme.spacing(4) })}
css={{ marginTop: 32 }}
>
{searchedIcons.length === 0 && (
<EmptyState message="No results matched your search" />
)}
{searchedIcons.map((icon) => (
<CopyableValue key={icon.url} value={icon.url} placement="bottom">
<Stack alignItems="center" css={{ margin: theme.spacing(1.5) }}>
<Stack alignItems="center" css={{ margin: 12 }}>
<img
alt={icon.url}
src={icon.url}
@ -169,7 +169,7 @@ export const IconsPage: FC = () => {
height: 60,
objectFit: "contain",
pointerEvents: "none",
padding: theme.spacing(1.5),
padding: 12,
}}
/>
<figcaption

20
site/src/pages/LoginPage/LoginPageView.tsx
View File

@ -64,31 +64,31 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
};
const styles = {
root: (theme) => ({
padding: theme.spacing(3),
root: {
padding: 24,
display: "flex",
alignItems: "center",
justifyContent: "center",
minHeight: "100%",
textAlign: "center",
}),
},
container: (theme) => ({
container: {
width: "100%",
maxWidth: 385,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: theme.spacing(2),
}),
gap: 16,
},
icon: (theme) => ({
fontSize: theme.spacing(8),
}),
icon: {
fontSize: 64,
},
footer: (theme) => ({
fontSize: 12,
color: theme.palette.text.secondary,
marginTop: theme.spacing(3),
marginTop: 24,
}),
} satisfies Record<string, Interpolation<Theme>>;

7
site/src/pages/LoginPage/OAuthSignInForm.tsx
View File

@ -4,7 +4,6 @@ import GitHubIcon from "@mui/icons-material/GitHub";
import KeyIcon from "@mui/icons-material/VpnKey";
import Box from "@mui/material/Box";
import { type FC } from "react";
import { useTheme } from "@emotion/react";
import { Language } from "./SignInForm";
import { type AuthMethods } from "api/typesGenerated";
@ -19,11 +18,9 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
redirectTo,
authMethods,
}) => {
const theme = useTheme();
const iconStyles = {
width: theme.spacing(2),
height: theme.spacing(2),
width: 16,
height: 16,
};
return (

32
site/src/pages/LoginPage/SignInForm.tsx
View File

@ -25,27 +25,27 @@ const styles = {
root: {
width: "100%",
},
title: (theme) => ({
fontSize: theme.spacing(4),
title: {
fontSize: 32,
fontWeight: 400,
margin: 0,
marginBottom: theme.spacing(4),
marginBottom: 32,
lineHeight: 1,
"& strong": {
fontWeight: 600,
},
}),
alert: (theme) => ({
marginBottom: theme.spacing(4),
}),
divider: (theme) => ({
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
},
alert: {
marginBottom: 32,
},
divider: {
paddingTop: 24,
paddingBottom: 24,
display: "flex",
alignItems: "center",
gap: theme.spacing(2),
}),
gap: 16,
},
dividerLine: (theme) => ({
width: "100%",
height: 1,
@ -58,10 +58,10 @@ const styles = {
fontSize: 12,
letterSpacing: 1,
}),
icon: (theme) => ({
width: theme.spacing(2),
height: theme.spacing(2),
}),
icon: {
width: 16,
height: 16,
},
} satisfies Record<string, Interpolation<Theme>>;
export interface SignInFormProps {

Some files were not shown because too many files have changed in this diff Show More