From 1a7c55173a2664e2c0d3edf7a4863141febce6c1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 3 Nov 2023 19:18:09 +0000 Subject: [PATCH 1/6] chore: quit using `theme.spacing` --- site/src/components/Avatar/Avatar.tsx | 22 +++---- site/src/components/AvatarData/AvatarData.tsx | 2 +- .../components/CodeExample/CodeExample.tsx | 4 +- site/src/components/CopyButton/CopyButton.tsx | 4 +- .../components/Dashboard/DashboardLayout.tsx | 2 +- .../DeploymentBanner/DeploymentBannerView.tsx | 57 ++++++++++--------- .../LicenseBanner/LicenseBannerView.tsx | 10 ++-- .../Dashboard/Navbar/NavbarView.tsx | 14 ++--- .../Navbar/UserDropdown/UserDropdown.tsx | 2 +- .../UserDropdown/UserDropdownContent.tsx | 10 ++-- .../ServiceBanner/ServiceBannerView.tsx | 2 +- .../DeploySettingsLayout/Badges.tsx | 6 +- .../DeploySettingsLayout.tsx | 6 +- .../DeploySettingsLayout/Fieldset.tsx | 19 +++---- .../DeploySettingsLayout/Header.tsx | 6 +- .../DeploySettingsLayout/Option.tsx | 24 +++----- .../DeploySettingsLayout/OptionsTable.tsx | 8 +-- .../DeploySettingsLayout/Sidebar.tsx | 18 ++---- .../Dialogs/ConfirmDialog/ConfirmDialog.tsx | 12 ++-- .../Dialogs/DeleteDialog/DeleteDialog.tsx | 2 +- .../DropdownArrow/DropdownArrow.tsx | 2 +- site/src/components/EmptyState/EmptyState.tsx | 27 ++------- .../ErrorBoundary/RuntimeErrorState.tsx | 47 ++++++++------- site/src/components/Expander/Expander.tsx | 2 +- site/src/components/FileUpload/FileUpload.tsx | 18 +++--- site/src/components/Form/Form.tsx | 24 ++++---- site/src/components/FormFooter/FormFooter.tsx | 4 +- .../components/FullPageForm/FullPageForm.tsx | 2 +- .../GlobalSnackbar/EnterpriseSnackbar.tsx | 2 +- .../GlobalSnackbar/GlobalSnackbar.tsx | 4 +- .../components/HelpTooltip/HelpTooltip.tsx | 30 +++++----- site/src/components/IconField/IconField.tsx | 4 +- site/src/components/Markdown/Markdown.tsx | 16 +++--- site/src/components/MoreMenu/MoreMenu.tsx | 4 +- .../PageHeader/FullWidthPageHeader.tsx | 4 +- site/src/components/PageHeader/PageHeader.tsx | 12 ++-- .../PaginationWidget/PageButton.tsx | 2 +- .../PaginationWidget/PaginationWidgetBase.tsx | 2 +- site/src/components/Paywall/Paywall.tsx | 6 +- site/src/components/Pill/Pill.tsx | 16 +++--- site/src/components/Popover/Popover.tsx | 8 +-- .../src/components/Resources/AgentLatency.tsx | 6 +- .../components/Resources/AgentMetadata.tsx | 18 +++--- site/src/components/Resources/AgentRow.tsx | 26 ++++----- .../components/Resources/AgentRowPreview.tsx | 12 ++-- site/src/components/Resources/AgentStatus.tsx | 12 ++-- .../components/Resources/AppLink/AppLink.tsx | 2 +- .../Resources/AppLink/AppPreviewLink.tsx | 2 +- .../Resources/PortForwardButton.stories.tsx | 2 +- .../Resources/PortForwardButton.tsx | 20 +++---- .../src/components/Resources/ResourceCard.tsx | 9 +-- .../Resources/Resources.stories.tsx | 19 +++++++ site/src/components/Resources/Resources.tsx | 2 +- .../Resources/SSHButton/SSHButton.tsx | 12 ++-- .../components/Resources/SensitiveValue.tsx | 2 +- .../RichParameterInput/MultiTextField.tsx | 10 ++-- .../RichParameterInput/RichParameterInput.tsx | 36 ++++++------ .../src/components/SettingsLayout/Section.tsx | 6 +- .../SettingsLayout/SectionAction.tsx | 2 +- .../SettingsLayout/SettingsLayout.tsx | 15 +---- .../src/components/SettingsLayout/Sidebar.tsx | 15 ++--- site/src/components/Sidebar/Sidebar.tsx | 10 ++-- .../components/SignInLayout/SignInLayout.tsx | 2 +- site/src/components/Stack/Stack.tsx | 6 +- site/src/components/Stats/Stats.tsx | 18 +++--- .../SyntaxHighlighter/SyntaxHighlighter.tsx | 2 +- .../components/TableLoader/TableLoader.tsx | 11 +--- .../components/TableToolbar/TableToolbar.tsx | 2 +- site/src/components/Tabs/Tabs.tsx | 10 ++-- .../TemplateExampleCard.tsx | 24 ++++---- .../TemplateFiles/TemplateFiles.tsx | 8 +-- .../components/Timeline/TimelineDateRow.tsx | 2 +- .../UserAutocomplete/UserAutocomplete.tsx | 6 +- site/src/components/Welcome/Welcome.tsx | 8 +-- .../components/WorkspaceBuildLogs/Logs.tsx | 26 ++++----- .../WorkspaceBuildLogs/WorkspaceBuildLogs.tsx | 2 +- .../WorkspaceStatusBadge.tsx | 2 +- site/src/pages/404Page/404Page.tsx | 4 +- .../AuditLogRow/AuditLogDiff/AuditLogDiff.tsx | 10 ++-- .../AuditPage/AuditLogRow/AuditLogRow.tsx | 6 +- .../src/pages/CliAuthPage/CliAuthPageView.tsx | 4 +- .../CreateTemplatePage/CreateTemplateForm.tsx | 14 ++--- .../CreateTemplatePage/VariableInput.tsx | 2 +- .../pages/CreateTokenPage/CreateTokenPage.tsx | 2 +- .../CreateWorkspacePageView.tsx | 8 +-- .../CreateWorkspacePage/SelectedTemplate.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 4 +- .../ExternalAuthSettingsPageView.tsx | 14 ++--- .../GeneralSettingsPage/ChartSection.tsx | 9 +-- .../AddNewLicensePageView.tsx | 2 +- .../LicensesSettingsPage/DividerWithText.tsx | 8 +-- .../LicensesSettingsPage/LicenseCard.tsx | 4 +- .../LicensesSettingsPageView.tsx | 14 ++--- .../ExternalAuthPage/ExternalAuthPageView.tsx | 12 ++-- site/src/pages/GroupsPage/GroupsPageView.tsx | 2 +- site/src/pages/HealthPage/HealthPage.tsx | 12 ++-- site/src/pages/IconsPage/IconsPage.tsx | 8 +-- site/src/pages/LoginPage/LoginPageView.tsx | 8 +-- site/src/pages/LoginPage/OAuthSignInForm.tsx | 4 +- site/src/pages/LoginPage/SignInForm.tsx | 16 +++--- site/src/pages/SetupPage/SetupPageView.tsx | 8 +-- .../StarterTemplatePageView.tsx | 6 +- .../StarterTemplatesPageView.tsx | 12 ++-- .../TemplateDocsPage/TemplateDocsPage.tsx | 4 +- .../TemplateInsightsPage.tsx | 18 +++--- .../src/pages/TemplatePage/TemplateLayout.tsx | 2 +- .../TemplateVersionsPage/VersionRow.tsx | 6 +- .../pages/TemplateSettingsPage/Sidebar.tsx | 10 ++-- .../TemplateSettingsForm.tsx | 4 +- .../TemplatePermissionsPageView.tsx | 18 +++--- .../TemplateSchedulePage/ScheduleDialog.tsx | 12 ++-- .../TemplateSettingsLayout.tsx | 6 +- .../TemplateVariablesPageView.tsx | 2 +- .../FileTreeView.tsx | 4 +- .../MissingTemplateVariablesDialog.tsx | 24 ++++---- .../TemplateVersionEditor.tsx | 14 ++--- .../pages/TemplatesPage/EmptyTemplates.tsx | 14 ++--- site/src/pages/TerminalPage/TerminalPage.tsx | 6 +- .../SecurityPage/SingleSignOnSection.tsx | 2 +- .../TokensPage/TokensPage.tsx | 2 +- .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 4 +- .../pages/UsersPage/ResetPasswordDialog.tsx | 2 +- .../UsersPage/UsersTable/EditRolesButton.tsx | 28 ++++----- .../UsersPage/UsersTable/UserGroupsCell.tsx | 6 +- .../UsersPage/UsersTable/UserRoleCell.tsx | 6 +- .../WorkspaceBuildPageView.tsx | 6 +- site/src/pages/WorkspacePage/BuildRow.tsx | 6 +- .../WorkspacePage/ChangeVersionDialog.tsx | 6 +- .../UpdateBuildParametersDialog.tsx | 24 ++++---- site/src/pages/WorkspacePage/Workspace.tsx | 2 +- .../BuildParametersPopover.tsx | 2 +- .../WorkspaceActions/WorkspaceActions.tsx | 2 +- .../WorkspaceBuildLogsSection.tsx | 2 +- .../WorkspacePage/WorkspaceBuildProgress.tsx | 14 ++--- .../pages/WorkspacePage/WorkspaceStats.tsx | 42 +++++++------- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 10 ++-- .../WorkspaceScheduleForm.tsx | 2 +- .../WorkspaceSettingsLayout.tsx | 6 +- site/src/pages/WorkspacesPage/LastUsed.tsx | 4 +- .../pages/WorkspacesPage/WorkspacesButton.tsx | 11 ++-- .../pages/WorkspacesPage/WorkspacesEmpty.tsx | 8 +-- .../pages/WorkspacesPage/WorkspacesTable.tsx | 2 +- site/src/theme/theme.ts | 2 +- 143 files changed, 647 insertions(+), 726 deletions(-) diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index 89de1f174ba4b..9d94aa4887da2 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -11,23 +11,23 @@ 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), + width: 24, + height: 24, + fontSize: 12, fontWeight: 600, }), md: {}, xl: (theme) => ({ - width: theme.spacing(6), - height: theme.spacing(6), - fontSize: theme.spacing(3), + width: 48, + height: 48, + fontSize: 24, }), } satisfies Record>; diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx index ba5d7db14dfeb..2f8b59a30a451 100644 --- a/site/src/components/AvatarData/AvatarData.tsx +++ b/site/src/components/AvatarData/AvatarData.tsx @@ -28,7 +28,7 @@ export const AvatarData: FC = ({ 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%", }} diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx index aaf5aca6432a0..0e04c4f889931 100644 --- a/site/src/components/CodeExample/CodeExample.tsx +++ b/site/src/components/CodeExample/CodeExample.tsx @@ -27,7 +27,7 @@ export const CodeExample: FC = (props) => { fontFamily: MONOSPACE_FONT_FAMILY, fontSize: 14, borderRadius: theme.shape.borderRadius, - padding: theme.spacing(1), + padding: 8, lineHeight: "150%", border: `1px solid ${theme.palette.divider}`, }} @@ -35,7 +35,7 @@ export const CodeExample: FC = (props) => { > > = ({ className={buttonClassName} css={(theme) => css` border-radius: ${theme.shape.borderRadius}px; - padding: ${theme.spacing(0.85)}; + padding: 8px; min-width: 32px; &:hover { @@ -67,7 +67,7 @@ export const CopyButton: React.FC> = ({ {ctaCopy && (
({ - marginLeft: theme.spacing(1), + marginLeft: 8, })} > {ctaCopy} diff --git a/site/src/components/Dashboard/DashboardLayout.tsx b/site/src/components/Dashboard/DashboardLayout.tsx index 1947e3ef9cbda..e06888c6b3776 100644 --- a/site/src/components/Dashboard/DashboardLayout.tsx +++ b/site/src/components/Dashboard/DashboardLayout.tsx @@ -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, diff --git a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx index fe742c9b9c495..847761dceda55 100644 --- a/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx @@ -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 = (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 = (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 = (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 = (props) => { ) } open={process.env.STORYBOOK === "true" ? true : undefined} - css={{ marginRight: theme.spacing(-2) }} + css={{ marginRight: -16 }} > {unhealthy ? ( @@ -323,7 +323,7 @@ export const DeploymentBannerView: FC = (props) => { marginLeft: "auto", display: "flex", alignItems: "center", - gap: theme.spacing(2), + gap: 16, }} > @@ -335,23 +335,24 @@ export const DeploymentBannerView: FC = (props) => {
-
    +
      {messages.map((message) => ( -
    • +
    • {message}
      • ))} diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx index ba3735a1b00b3..35e5119f7c19f 100644 --- a/site/src/components/Dashboard/Navbar/NavbarView.tsx +++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx @@ -71,16 +71,16 @@ const styles = { } `, drawerHeader: (theme) => ({ - padding: theme.spacing(2), - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), + 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, @@ -91,7 +91,7 @@ const styles = { `, drawerLogo: (theme) => ({ 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 24; } `, } satisfies Record>; diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx index d8194ac8c567e..1e0fb37fab84a 100644 --- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -40,7 +40,7 @@ export const UserDropdown: FC> = ({ border: 0; cursor: pointer; height: ${navHeight}px; - padding: ${theme.spacing(1.5, 0)}; + padding: 12px 0; &:hover { background-color: transparent; diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx index 99d2d65a48f9a..af3ca9061e324 100644 --- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx +++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx @@ -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, diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx index 526613cd1f55f..b79c6e5929c85 100644 --- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx +++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx @@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC = ({ return (
      { export const Badges: FC = ({ children }) => { return ( ({ - margin: theme.spacing(0, 0, 2), - })} + css={{ margin: "0 0 16px" }} direction="row" alignItems="center" spacing={1} diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx index 399915678465d..e862a72c2569b 100644 --- a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx +++ b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx @@ -35,11 +35,7 @@ export const DeploySettingsLayout: FC = () => { return ( - ({ padding: theme.spacing(6, 0) })} - direction="row" - spacing={6} - > +
      {deploymentConfigQuery.data ? ( diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx index 627db642eef03..9100b3e307110 100644 --- a/site/src/components/DeploySettingsLayout/Fieldset.tsx +++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx @@ -27,17 +27,17 @@ export const Fieldset: FC = (props) => { return (
      -
      +
      = (props) => { css={{ color: theme.palette.text.secondary, fontSize: 14, - marginTop: theme.spacing(1), + marginTop: 8, }} > {subtitle}
      )} -
      +
      {children}
      @@ -69,7 +64,7 @@ export const Fieldset: FC = (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", diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx index cc12d1a269af6..8be28d1e0d72e 100644 --- a/site/src/components/DeploySettingsLayout/Header.tsx +++ b/site/src/components/DeploySettingsLayout/Header.tsx @@ -14,7 +14,7 @@ export const Header: FC<{ return ( -
      +

      = (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 = (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 ? : ; } @@ -83,7 +75,7 @@ export const OptionValue: FC = (props) => { if (typeof value === "object" && !Array.isArray(value)) { return ( -
        +
          {Object.entries(value) .sort((a, b) => a[0].localeCompare(b[0])) .map(([option, isEnabled]) => ( @@ -109,7 +101,7 @@ export const OptionValue: FC = (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 = (props) => { if (Array.isArray(value)) { return ( -
            +
              {value.map((item) => (
            • {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, }} diff --git a/site/src/components/DeploySettingsLayout/OptionsTable.tsx b/site/src/components/DeploySettingsLayout/OptionsTable.tsx index a8920c2eddc02..c36f97b9b56c9 100644 --- a/site/src/components/DeploySettingsLayout/OptionsTable.tsx +++ b/site/src/components/DeploySettingsLayout/OptionsTable.tsx @@ -28,15 +28,15 @@ const OptionsTable: FC<{ return ( 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; } `} > diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index e13b0c68abc20..a8683b0cc926b 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -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 ( - - ); + return ; }; export const Sidebar: React.FC = () => { diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx index 8ba40f079b729..be2f1ee55c9fe 100644 --- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx +++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx @@ -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>; diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index ab1134bb6a397..7ace20bacebda 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -75,7 +75,7 @@ export const DeleteDialog: FC> = ({ = (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, })} diff --git a/site/src/components/EmptyState/EmptyState.tsx b/site/src/components/EmptyState/EmptyState.tsx index 3d605b3334d98..d1d702b35e51e 100644 --- a/site/src/components/EmptyState/EmptyState.tsx +++ b/site/src/components/EmptyState/EmptyState.tsx @@ -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> = ( props, ) => { const { message, description, cta, image, ...boxProps } = props; - const theme = useTheme(); return ( > = ( alignItems: "center", textAlign: "center", minHeight: 360, - padding: theme.spacing(10, 5), + padding: "80px 40px", position: "relative", }} {...boxProps} > - + {message} {description && ( @@ -55,24 +48,16 @@ export const EmptyState: FC> = ( 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} )} - {cta && ( -
              - {cta} -
              - )} + {cta &&
              {cta}
              } {image}               ); diff --git a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx index 0b6ecdd893b41..5563cacb2d9e2 100644 --- a/site/src/components/ErrorBoundary/RuntimeErrorState.tsx +++ b/site/src/components/ErrorBoundary/RuntimeErrorState.tsx @@ -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 = ({ error }) => { - const theme = useTheme(); const [checkingError, setCheckingError] = useState(true); const [staticBuildInfo, setStaticBuildInfo] = useState(); const coderVersion = staticBuildInfo?.version; @@ -102,10 +101,10 @@ export const RuntimeErrorState: FC = ({ 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, }), diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx index c736f73168ebc..482b5e14ab0b5 100644 --- a/site/src/components/Expander/Expander.tsx +++ b/site/src/components/Expander/Expander.tsx @@ -50,7 +50,7 @@ const styles = { color: theme.palette.text.secondary, }), collapseLink: (theme) => ({ - marginTop: theme.spacing(2), + marginTop: 16, }), text: (theme) => ({ display: "flex", diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx index 0416f2c182d43..c3dfbdd3652ce 100644 --- a/site/src/components/FileUpload/FileUpload.tsx +++ b/site/src/components/FileUpload/FileUpload.tsx @@ -135,7 +135,7 @@ const styles = { justify-content: center; border-radius: ${theme.shape.borderRadius}px; 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: { @@ -169,7 +169,7 @@ const styles = { file: (theme) => ({ borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, - padding: theme.spacing(2), + 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 92356b38ec1bc..c0e88ad473ce7 100644 --- a/site/src/components/Form/Form.tsx +++ b/site/src/components/Form/Form.tsx @@ -34,10 +34,10 @@ export const Form: FC = ({ 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) => ( 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; diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx index 17d1a81d51230..423045c6d3bca 100644 --- a/site/src/components/FormFooter/FormFooter.tsx +++ b/site/src/components/FormFooter/FormFooter.tsx @@ -63,9 +63,9 @@ const defaultStyles = { // 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%", diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx index 9e8163dceef4e..efd8b42ec194b 100644 --- a/site/src/components/FullPageForm/FullPageForm.tsx +++ b/site/src/components/FullPageForm/FullPageForm.tsx @@ -21,7 +21,7 @@ export const FullPageForm: FC> = ({ return ( - + {title} {detail && {detail}} diff --git a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx index b39edb1209bd9..073fbae6385ce 100644 --- a/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx @@ -36,7 +36,7 @@ export const EnterpriseSnackbar: FC< 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)}; + padding: 8px 24px 8px 16px; box-shadow: ${theme.shadows[6]}; align-items: inherit; background-color: ${theme.palette.background.paper}; diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx index d521812316468..fca3a7c8d89a6 100644 --- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx +++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx @@ -126,10 +126,10 @@ const styles = { fontWeight: 600, }, messageSubtitle: (theme) => ({ - marginTop: theme.spacing(1.5), + marginTop: 12, }), errorIcon: (theme) => ({ color: theme.palette.error.contrastText, - marginRight: theme.spacing(2), + marginRight: 16, }), } satisfies Record>; diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index b79babde64700..ca9647e8be8cf 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -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>; diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx index c1e26fe4acdc7..77f6e45a71ead 100644 --- a/site/src/components/IconField/IconField.tsx +++ b/site/src/components/IconField/IconField.tsx @@ -62,8 +62,8 @@ const IconField: FC = ({ onPickEmoji, ...textFieldProps }) => { = (props) => { ) : ( ({ - 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) => ({ 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) => ({ "& 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": { @@ -153,7 +153,7 @@ const markdownStyles: Interpolation = (theme: Theme) => ({ "& .prismjs": { background: theme.palette.background.paperLight, borderRadius: theme.shape.borderRadius, - padding: theme.spacing(2, 3), + padding: "16px 24px", overflowX: "auto", "& code": { diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx index fbececc20f0b4..b1af6c2caadda 100644 --- a/site/src/components/MoreMenu/MoreMenu.tsx +++ b/site/src/components/MoreMenu/MoreMenu.tsx @@ -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) => { diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx index c81be232be46e..8b2f23973c41f 100644 --- a/site/src/components/PageHeader/FullWidthPageHeader.tsx +++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx @@ -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", diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx index f963560958ea0..f6b8a674e6040 100644 --- a/site/src/components/PageHeader/PageHeader.tsx +++ b/site/src/components/PageHeader/PageHeader.tsx @@ -17,9 +17,9 @@ export const PageHeader: FC> = ({ 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", @@ -54,7 +54,7 @@ export const PageHeaderTitle: FC> = ({ return (

              ({ - fontSize: theme.spacing(3), + fontSize: 24, fontWeight: 400, margin: 0, display: "flex", @@ -73,12 +73,12 @@ export const PageHeaderSubtitle: FC< return (

              ({ - 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%", })} > diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx index 7a8f304b15eb5..9b89486359cfb 100644 --- a/site/src/components/PaginationWidget/PageButton.tsx +++ b/site/src/components/PaginationWidget/PageButton.tsx @@ -24,7 +24,7 @@ export const PageButton = ({ css={[ css` &:not(:last-of-type) { - margin-right: ${theme.spacing(0.5)}; + margin-right: 4px; } `, activePage === page && { diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx index 779dc1ec9d1a3..f72e9632ffdca 100644 --- a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx +++ b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx @@ -41,7 +41,7 @@ export const PaginationWidgetBase = ({ >

              diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx index 6ba75d0d7ee3a..74b45cec7a5b6 100644 --- a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx +++ b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx @@ -38,7 +38,7 @@ export const ChartSection: FC> = ({ alignItems: "center", display: "flex", justifyContent: "space-between", - padding: theme.spacing(1.5, 2), + padding: "12px 16px", }} >
              > = ({ )} -
              +
              {children}
              diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx index c17e7ca5056d8..98870cf31315a 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx @@ -76,7 +76,7 @@ export const AddNewLicensePageView: FC = ({ description="Select a text file that contains your license key." /> - + or
              ({ - 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, }), diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx index 1e06759207ed7..e7b461bdbc37e 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicenseCard.tsx @@ -118,7 +118,7 @@ const styles = { }), licenseCard: (theme) => ({ ...(theme.typography.body2 as CSSObject), - padding: theme.spacing(2), + padding: 16, }), cardContent: {}, licenseId: (theme) => ({ @@ -136,7 +136,7 @@ const styles = { color: theme.palette.text.secondary, }), expiredBadge: (theme) => ({ - marginBottom: theme.spacing(0.5), + marginBottom: 4, }), secondaryMaincolor: (theme) => ({ color: theme.palette.text.secondary, diff --git a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index ede23c64e317e..341186eea487c 100644 --- a/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -128,25 +128,25 @@ const LicensesSettingsPageView: FC = ({ }; 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, 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>; diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx index 7105e8acdeb0a..e3d239e119597 100644 --- a/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx +++ b/site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx @@ -233,13 +233,13 @@ const styles = { }), installAlert: (theme) => ({ - margin: theme.spacing(2), + margin: 16, }), links: (theme) => ({ display: "flex", - gap: theme.spacing(0.5), - margin: theme.spacing(2), + gap: 4, + margin: 16, flexDirection: "column", }), @@ -248,14 +248,14 @@ const styles = { 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>; diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx index b454dcc14b2b1..4d80b40111975 100644 --- a/site/src/pages/GroupsPage/GroupsPageView.tsx +++ b/site/src/pages/GroupsPage/GroupsPageView.tsx @@ -220,7 +220,7 @@ const styles = { }, "& .MuiTableCell-root:last-child": { - paddingRight: `${theme.spacing(2)} !important`, + paddingRight: `16px !important`, }, }), arrowRight: (theme) => ({ diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx index 6c5ecf05f7b2c..bd54bb430515d 100644 --- a/site/src/pages/HealthPage/HealthPage.tsx +++ b/site/src/pages/HealthPage/HealthPage.tsx @@ -114,7 +114,7 @@ export function HealthPageView({ > 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, }, }), diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx index 6b30c1079f245..06199bdf9b11e 100644 --- a/site/src/pages/IconsPage/IconsPage.tsx +++ b/site/src/pages/IconsPage/IconsPage.tsx @@ -82,7 +82,7 @@ export const IconsPage: FC = () => { title={ { wrap="wrap" spacing={1} justifyContent="center" - css={(theme) => ({ marginTop: theme.spacing(4) })} + css={{ marginTop: 32 }} > {searchedIcons.length === 0 && ( )} {searchedIcons.map((icon) => ( - + {icon.url} { height: 60, objectFit: "contain", pointerEvents: "none", - padding: theme.spacing(1.5), + padding: 12, }} />
              = ({ const styles = { root: (theme) => ({ - padding: theme.spacing(3), + padding: 24, display: "flex", alignItems: "center", justifyContent: "center", @@ -79,16 +79,16 @@ const styles = { display: "flex", flexDirection: "column", alignItems: "center", - gap: theme.spacing(2), + gap: 16, }), icon: (theme) => ({ - fontSize: theme.spacing(8), + fontSize: 64, }), footer: (theme) => ({ fontSize: 12, color: theme.palette.text.secondary, - marginTop: theme.spacing(3), + marginTop: 24, }), } satisfies Record>; diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx index 4def9696c9807..e224c0864da93 100644 --- a/site/src/pages/LoginPage/OAuthSignInForm.tsx +++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx @@ -22,8 +22,8 @@ export const OAuthSignInForm: FC = ({ const theme = useTheme(); const iconStyles = { - width: theme.spacing(2), - height: theme.spacing(2), + width: 16, + height: 16, }; return ( diff --git a/site/src/pages/LoginPage/SignInForm.tsx b/site/src/pages/LoginPage/SignInForm.tsx index c1b2e0524c38a..daa2d14342481 100644 --- a/site/src/pages/LoginPage/SignInForm.tsx +++ b/site/src/pages/LoginPage/SignInForm.tsx @@ -26,10 +26,10 @@ const styles = { width: "100%", }, title: (theme) => ({ - fontSize: theme.spacing(4), + fontSize: 32, fontWeight: 400, margin: 0, - marginBottom: theme.spacing(4), + marginBottom: 32, lineHeight: 1, "& strong": { @@ -37,14 +37,14 @@ const styles = { }, }), alert: (theme) => ({ - marginBottom: theme.spacing(4), + marginBottom: 32, }), divider: (theme) => ({ - paddingTop: theme.spacing(3), - paddingBottom: theme.spacing(3), + paddingTop: 24, + paddingBottom: 24, display: "flex", alignItems: "center", - gap: theme.spacing(2), + gap: 16, }), dividerLine: (theme) => ({ width: "100%", @@ -59,8 +59,8 @@ const styles = { letterSpacing: 1, }), icon: (theme) => ({ - width: theme.spacing(2), - height: theme.spacing(2), + width: 16, + height: 16, }), } satisfies Record>; diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx index a7939cf971f04..3483c8816fc35 100644 --- a/site/src/pages/SetupPage/SetupPageView.tsx +++ b/site/src/pages/SetupPage/SetupPageView.tsx @@ -67,27 +67,27 @@ export const SetupPageView: React.FC = ({
              ({ textAlign: "center", - marginBottom: theme.spacing(4), + marginBottom: 32, })} > ({ color: theme.palette.text.primary, - fontSize: theme.spacing(8), + fontSize: 64, })} />

              ({ fontWeight: 400, margin: 0, - marginTop: theme.spacing(2), + marginTop: 16, })} > Welcome to Coder

              ({ - marginTop: theme.spacing(1.5), + marginTop: 12, color: theme.palette.text.secondary, })} > diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index a37d0ca918714..a4cd006743679 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -67,8 +67,8 @@ export const StarterTemplatePageView: FC = ({
              = ({ >
              = ({ }; const styles = { - filter: (theme) => ({ - width: theme.spacing(26), + filter: { + width: 208, flexShrink: 0, - }), + }, filterCaption: (theme) => ({ textTransform: "uppercase", @@ -120,11 +120,11 @@ const styles = { fontWeight: 600, }), - templates: (theme) => ({ + templates: { flex: "1", display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", - gap: theme.spacing(2), + gap: 16, gridAutoRows: "min-content", - }), + }, } satisfies Record>; diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx index 728642d0081e7..a4be44321da21 100644 --- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx @@ -29,7 +29,7 @@ export default function TemplateDocsPage() { css={{ color: theme.palette.text.secondary, fontWeight: 600, - padding: theme.spacing(2, 3), + padding: "16px 24px", borderBottom: `1px solid ${theme.palette.divider}`, }} > @@ -37,7 +37,7 @@ export default function TemplateDocsPage() {
              ({ - marginBottom: theme.spacing(4), + marginBottom: 32, display: "flex", alignItems: "center", - gap: theme.spacing(1), + gap: 8, })} > {controls} @@ -179,7 +179,7 @@ export const TemplateInsightsPageView = ({ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gridTemplateRows: "440px 440px auto", - gap: (theme) => theme.spacing(3), + gap: (theme) => 24, }} > `1px solid ${theme.palette.divider}`, - width: (theme) => `calc(100% + ${theme.spacing(6)})`, + width: "calc(100% + 48px)", "&:first-child": { borderTop: 0, }, @@ -564,8 +564,8 @@ const ParameterUsageRow = styled(Box)(({ theme }) => ({ display: "flex", alignItems: "baseline", justifyContent: "space-between", - padding: theme.spacing(0.5, 0), - gap: theme.spacing(5), + padding: "4px 0", + gap: 40, })); const ParameterUsageLabel = ({ @@ -640,7 +640,7 @@ const ParameterUsageLabel = ({ theme.spacing(0.25, 1.5), + p: "2px 12px", borderRadius: 999, background: (theme) => theme.palette.divider, whiteSpace: "nowrap", @@ -704,7 +704,7 @@ const Panel = styled(Box)(({ theme }) => ({ type PanelProps = ComponentProps; const PanelHeader = styled(Box)(({ theme }) => ({ - padding: theme.spacing(2.5, 3, 3), + padding: "20px 24px 24px", })); const PanelTitle = styled(Box)(() => ({ @@ -713,7 +713,7 @@ const PanelTitle = styled(Box)(() => ({ })); const PanelContent = styled(Box)(({ theme }) => ({ - padding: theme.spacing(0, 3, 3), + padding: "0 24px 24px", flex: 1, })); diff --git a/site/src/pages/TemplatePage/TemplateLayout.tsx b/site/src/pages/TemplatePage/TemplateLayout.tsx index 41a15264c9a7b..5e1704221faa5 100644 --- a/site/src/pages/TemplatePage/TemplateLayout.tsx +++ b/site/src/pages/TemplatePage/TemplateLayout.tsx @@ -74,7 +74,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({ if (error) { return ( -
              +
              ); diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index 0fd8f80531324..62fc6cb25aa3a 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -139,9 +139,9 @@ const styles = { transition: "none", }), - versionWrapper: (theme) => ({ - padding: theme.spacing(2, 4), - }), + versionWrapper: { + padding: "16px 32px", + }, active: (theme) => ({ backgroundColor: theme.palette.background.paperLight, diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index fe10d385b6f80..c89b775d461b2 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -31,8 +31,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; @@ -130,12 +130,12 @@ const styles = { flexShrink: 0, }, sidebarNavItemIcon: (theme) => ({ - width: theme.spacing(2), - height: theme.spacing(2), + width: 16, + height: 16, }), templateInfo: (theme) => ({ ...(theme.typography.body2 as CSSObject), - marginBottom: theme.spacing(2), + marginBottom: 16, }), templateData: { overflow: "hidden", diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx index 0a280911a2f7a..a44c0ac4f5324 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx @@ -212,12 +212,12 @@ export const TemplateSettingsForm: FC = ({ 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, }), } satisfies Record>; diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx index 86fc73cc48690..c0f2f723bf0c4 100644 --- a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx @@ -365,34 +365,34 @@ const styles = { width: 100, }, - updateSelect: (theme) => ({ + updateSelect: { margin: 0, // Set a fixed width for the select. It avoids selects having different sizes // depending on how many roles they have selected. - width: theme.spacing(25), + width: 200, "& .MuiSelect-root": { // Adjusting padding because it does not have label - paddingTop: theme.spacing(1.5), - paddingBottom: theme.spacing(1.5), + paddingTop: 12, + paddingBottom: 12, ".secondary": { display: "none", }, }, - }), + }, role: { textTransform: "capitalize", }, - menuItem: (theme) => ({ + menuItem: { lineHeight: "140%", - paddingTop: theme.spacing(1.5), - paddingBottom: theme.spacing(1.5), + paddingTop: 12, + paddingBottom: 12, whiteSpace: "normal", inlineSize: "250px", - }), + }, menuItemSecondary: (theme) => ({ fontSize: 14, diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx index d8072bffbc40a..2203e1a1658f7 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx @@ -136,22 +136,22 @@ const styles = { background: theme.palette.background.paper, border: `1px solid ${theme.palette.divider}`, width: "100%", - maxWidth: theme.spacing(125), + maxWidth: 1000, }, "& .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, @@ -167,7 +167,7 @@ const styles = { }, "& > p": { - margin: theme.spacing(1, 0), + margin: "8px 0", }, }), } satisfies Record>; diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx index 4fab050d02876..876539f6109b3 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx @@ -57,9 +57,9 @@ export const TemplateSettingsLayout: FC = () => { ({ - padding: theme.spacing(6, 0), - })} + css={{ + padding: "48px 0", + }} direction="row" spacing={10} > diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx index 561e2ecbd3d76..5a2f1e9d83f22 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx @@ -48,7 +48,7 @@ export const TemplateVariablesPageView: FC = ({ Template variables {hasError && ( - ({ marginBottom: theme.spacing(8) })}> + {Boolean(errors.buildError) && ( )} diff --git a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx index 5557ea8f23c62..eba1649f1dc72 100644 --- a/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx +++ b/site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx @@ -74,7 +74,7 @@ export const FileTreeView: FC<{ } & > .MuiTreeItem-content { - padding: ${theme.spacing(0.25, 2)}; + padding: 2px 16px; color: ${theme.palette.text.secondary}; & svg { @@ -102,7 +102,7 @@ export const FileTreeView: FC<{ // We need to find a better way to recursive padding here & .MuiTreeItem-content { - padding-left: calc(var(--level) * ${theme.spacing(5)}); + padding-left: calc(var(--level) * 40px); } } `} diff --git a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx index 2c6a32ce3937e..d00880b5af19c 100644 --- a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx +++ b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx @@ -53,10 +53,10 @@ export const MissingTemplateVariablesDialog: FC< id="update-build-parameters-title" classes={{ root: css` - padding: ${theme.spacing(3, 5)}; + padding: 24px 40px; & h2 { - font-size: ${theme.spacing(2.5)}; + font-size: 20px; font-weight: 400; } `, @@ -115,21 +115,21 @@ export const MissingTemplateVariablesDialog: FC< }; const styles = { - content: (theme) => ({ - padding: theme.spacing(0, 5), - }), + content: { + padding: "0 40px", + }, info: { margin: 0, }, - form: (theme) => ({ - paddingTop: theme.spacing(4), - }), + form: { + paddingTop: 32, + }, - dialogActions: (theme) => ({ - padding: theme.spacing(5), + dialogActions: { + padding: 40, flexDirection: "column", - gap: theme.spacing(1), - }), + gap: 8, + }, } satisfies Record>; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx index 30c89a159f35a..a4aaa8debedcb 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx @@ -425,7 +425,7 @@ export const TemplateVersionEditor: FC = ({ css={[ styles.panel, { - paddingBottom: theme.spacing(2), + paddingBottom: 16, display: selectedTab !== "resources" ? "none" : undefined, }, ]} @@ -465,7 +465,7 @@ export const TemplateVersionEditor: FC = ({ const styles = { topbar: (theme) => ({ - padding: theme.spacing(2), + padding: 16, borderBottom: `1px solid ${theme.palette.divider}`, display: "flex", alignItems: "center", @@ -473,11 +473,11 @@ const styles = { height: topbarHeight, background: theme.palette.background.paper, }), - topbarSides: (theme) => ({ + topbarSides: { display: "flex", alignItems: "center", - gap: theme.spacing(2), - }), + gap: 16, + }, sidebarAndEditor: { display: "flex", flex: 1, @@ -492,7 +492,7 @@ const styles = { sidebarTitle: (theme) => ({ fontSize: 10, textTransform: "uppercase", - padding: theme.spacing(1, 2), + padding: "8px 16px", color: theme.palette.text.primary, fontWeight: 500, letterSpacing: "0.5px", @@ -538,7 +538,7 @@ const styles = { }), tab: (theme) => ({ cursor: "pointer", - padding: theme.spacing(1.5), + padding: 12, fontSize: 10, textTransform: "uppercase", letterSpacing: "0.5px", diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx index 62e89705c8e41..4446ecef63b45 100644 --- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx +++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx @@ -106,24 +106,24 @@ const styles = { paddingBottom: 0, }, - emptyImage: (theme) => ({ + emptyImage: { maxWidth: "50%", - height: theme.spacing(40), + height: 320, overflow: "hidden", opacity: 0.85, "& img": { maxWidth: "100%", }, - }), + }, - featuredExamples: (theme) => ({ - maxWidth: theme.spacing(100), + featuredExamples: { + maxWidth: 800, display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", - gap: theme.spacing(2), + gap: 16, gridAutoRows: "min-content", - }), + }, template: (theme) => ({ backgroundColor: theme.palette.background.paperLight, diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 45a289c8882cb..81bd825d42d13 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -333,7 +333,7 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => { return ( theme.palette.background.paper, display: "flex", alignItems: "center", @@ -355,7 +355,7 @@ const BottomBar = ({ proxy, latency }: { proxy: Region; latency?: number }) => { alignItems: "center", gap: 1, border: 0, - padding: theme.spacing(1), + padding: 8, }} > { sx={{ pointerEvents: "none", "& .MuiPaper-root": { - padding: (theme) => theme.spacing(1, 2), + padding: "8px 16px", }, }} anchorOrigin={{ diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx index e15ccc83d5030..81052034f8efc 100644 --- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx +++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx @@ -105,7 +105,7 @@ function SSOEmptyState() { ({ minHeight: 0, - padding: theme.spacing(6, 4), + padding: "48px 32px", backgroundColor: theme.palette.background.paper, borderRadius: theme.shape.borderRadius, })} diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx index 5842426fe1fb8..59e651f3f914a 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx @@ -18,7 +18,7 @@ export const TokensPage: FC> = () => { direction="row" justifyContent="end" css={(theme) => ({ - marginBottom: theme.spacing(1), + marginBottom: 8, })} > diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.tsx index a3f67698de680..9bf8bbe51b63c 100644 --- a/site/src/pages/UsersPage/ResetPasswordDialog.tsx +++ b/site/src/pages/UsersPage/ResetPasswordDialog.tsx @@ -1,5 +1,4 @@ import { type FC } from "react"; -import { useTheme } from "@emotion/react"; import type * as TypesGen from "api/typesGenerated"; import { CodeExample } from "components/CodeExample/CodeExample"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; @@ -26,8 +25,6 @@ export const Language = { export const ResetPasswordDialog: FC< React.PropsWithChildren > = ({ open, onClose, onConfirm, user, newPassword, loading }) => { - const theme = useTheme(); - const description = ( <>

              {Language.message(user?.username)}

              diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx index 9cd843ad042da..bf6c0ae523b89 100644 --- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx +++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx @@ -6,7 +6,6 @@ import Box from "@mui/material/Box"; import AlertTitle from "@mui/material/AlertTitle"; import InfoIcon from "@mui/icons-material/InfoOutlined"; import { css } from "@emotion/css"; -import { useTheme } from "@emotion/react"; import type { Template, TemplateVersion } from "api/typesGenerated"; import { Alert, AlertDetail } from "components/Alert/Alert"; import type { DialogProps } from "components/Dialogs/Dialog"; @@ -38,7 +37,6 @@ export const ChangeVersionDialog: FC = ({ const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false); const selectedTemplateVersion = useRef(); const version = selectedTemplateVersion.current; - const theme = useTheme(); return ( = ({ > {option.name} {option.message && ( - ({ - width: 12, - height: 12, - })} - /> + )}               {template?.active_version_id === option.id && ( diff --git a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx index b7fc83610643c..a4581e580f8d0 100644 --- a/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx +++ b/site/src/pages/WorkspacePage/UpdateBuildParametersDialog.tsx @@ -8,7 +8,7 @@ import { useFormik } from "formik"; import * as Yup from "yup"; import { type FC } from "react"; import { css } from "@emotion/css"; -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { type Interpolation, type Theme } from "@emotion/react"; import { getFormHelpers } from "utils/formUtils"; import type { DialogProps } from "components/Dialogs/Dialog"; import { FormFields, VerticalForm } from "components/Form/Form"; @@ -31,7 +31,6 @@ export type UpdateBuildParametersDialogProps = DialogProps & { export const UpdateBuildParametersDialog: FC< UpdateBuildParametersDialogProps > = ({ missedParameters, onUpdate, ...dialogProps }) => { - const theme = useTheme(); const form = useFormik({ initialValues: { rich_parameter_values: getInitialRichParameterValues(missedParameters), diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx index 38e3aa8cb54d1..0122e64cf115b 100644 --- a/site/src/pages/WorkspacePage/Workspace.tsx +++ b/site/src/pages/WorkspacePage/Workspace.tsx @@ -361,9 +361,9 @@ export const Workspace: FC> = ({ }; const styles = { - content: (theme) => ({ + content: { marginTop: 32, - }), + }, actions: (theme) => ({ [theme.breakpoints.down("md")]: { diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx index a4f5e46589f97..71210d277bc09 100644 --- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx @@ -109,11 +109,7 @@ export const WorkspaceActions: FC = ({ return (
              ({ - display: "flex", - alignItems: "center", - gap: 12, - })} + css={{ display: "flex", alignItems: "center", gap: 12 }} data-testid="workspace-actions" > {canBeUpdated && diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx index cdf06ae451a39..93650af02f85a 100644 --- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx @@ -1,5 +1,5 @@ import { css } from "@emotion/css"; -import { type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { type Interpolation, type Theme } from "@emotion/react"; import Link from "@mui/material/Link"; import { WorkspaceOutdatedTooltip } from "components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip"; import { type FC } from "react"; @@ -63,7 +63,6 @@ export const WorkspaceStats: FC = ({ onDeadlineMinus, onDeadlinePlus, }) => { - const theme = useTheme(); const displayTemplateName = getDisplayWorkspaceTemplateName(workspace); const deadlinePlusEnabled = maxDeadlineIncrease >= 1; const deadlineMinusEnabled = maxDeadlineDecrease >= 1; @@ -393,12 +392,12 @@ const styles = { color: theme.palette.text.secondary, }), - timePopoverForm: (theme) => ({ + timePopoverForm: { display: "flex", alignItems: "center", gap: 8, padding: "8px 0", - }), + }, timePopoverField: { margin: 0, diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index 785e703869ed1..829960ce773f5 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -77,14 +77,7 @@ const SidebarNavItem: FC< const SidebarNavItemIcon: FC<{ icon: ComponentType<{ className?: string }>; }> = ({ icon: Icon }) => { - return ( - ({ - width: 16, - height: 16, - })} - /> - ); + return ; }; export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({ diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx index 249692e6e29cd..3f3b7baca1621 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx @@ -337,22 +337,17 @@ export const WorkspaceScheduleForm: FC< - + {Language.daysOfWeekLabel} ({ + css={{ display: "flex", flexDirection: "row", flexWrap: "wrap", paddingTop: 4, - })} + }} > {checkboxes.map((checkbox) => ( { - const theme = useTheme(); const params = useParams() as { workspace: string; username: string; diff --git a/site/src/pages/WorkspacesPage/LastUsed.tsx b/site/src/pages/WorkspacesPage/LastUsed.tsx index c9dda27c64f54..5f09481a4b825 100644 --- a/site/src/pages/WorkspacesPage/LastUsed.tsx +++ b/site/src/pages/WorkspacesPage/LastUsed.tsx @@ -13,8 +13,6 @@ type CircleProps = { }; const Circle: FC = ({ color, variant = "solid" }) => { - const theme = useTheme(); - return (
              ({ + css={{ display: "flex", gap: 12, alignItems: "center", - })} + }} >
              ({ + css={{ display: "flex", flexWrap: "wrap", gap: 16, marginBottom: 24, justifyContent: "center", maxWidth: "800px", - })} + }} > {featuredTemplates?.map((t) => ( Date: Fri, 3 Nov 2023 20:11:32 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/Dashboard/Navbar/NavbarView.tsx | 3 ++- .../src/components/Dialogs/DeleteDialog/DeleteDialog.tsx | 2 +- site/src/components/Resources/PortForwardButton.tsx | 9 +++++---- site/src/components/Resources/ResourceCard.tsx | 9 ++++----- .../TemplateInsightsPage/TemplateInsightsPage.tsx | 2 +- site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx | 2 +- site/src/pages/WorkspacesPage/WorkspacesTable.tsx | 7 +------ 7 files changed, 15 insertions(+), 19 deletions(-) diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx index e4235c34e245b..372b685564972 100644 --- a/site/src/components/Dashboard/Navbar/NavbarView.tsx +++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx @@ -117,7 +117,7 @@ const styles = { ${theme.breakpoints.up("md")} { height: ${navHeight}px; - padding: 0 24; + padding: 0 24px; } `, } satisfies Record>; @@ -171,6 +171,7 @@ const NavItems: React.FC = (props) => { ); }; + export const NavbarView: FC = ({ user, logo_url, diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 7ace20bacebda..9593c0f969af9 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -75,7 +75,7 @@ export const DeleteDialog: FC> = ({ = (props) => { export const PortForwardPopoverView: React.FC< PortForwardButtonProps & { ports?: WorkspaceAgentListeningPort[] } > = (props) => { + const theme = useTheme(); const { host, workspaceName, agent, username, ports } = props; return ( <> `1px solid ${theme.palette.divider}`, + borderBottom: `1px solid ${theme.palette.divider}`, }} > Forwarded ports @@ -108,7 +109,7 @@ export const PortForwardPopoverView: React.FC< ? "No open ports were detected." : "The forwarded ports are exclusively accessible to you."} - + {ports?.map((p) => { const url = portForwardURL( host, @@ -154,7 +155,7 @@ export const PortForwardPopoverView: React.FC< - + Forward port theme.palette.text.secondary }} diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index 037f050ab4163..2d327c99760e0 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -2,13 +2,12 @@ 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"; -import { MemoizedMarkdown } from "components/Markdown/Markdown"; const styles = { resourceCard: (theme) => ({ @@ -138,7 +137,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { ) : ( - {meta.value} + {meta.value} )}
              diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx index 4d9e3d207945a..adf36d7a8079d 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx @@ -175,7 +175,7 @@ export const TemplateInsightsPageView = ({ {controls} = ({ = ({ - + theme.palette.text.secondary, From 2a2393b80d825214efe66eeb85673d65d5740b36 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 3 Nov 2023 20:27:58 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Resources/PortForwardButton.tsx | 24 ++++++++----------- .../Resources/Resources.stories.tsx | 19 --------------- 2 files changed, 10 insertions(+), 33 deletions(-) diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx index a9e0b96ba1b64..6adb0adf22a3b 100644 --- a/site/src/components/Resources/PortForwardButton.tsx +++ b/site/src/components/Resources/PortForwardButton.tsx @@ -102,9 +102,7 @@ export const PortForwardPopoverView: React.FC< }} > Forwarded ports - theme.palette.text.secondary }} - > + {ports?.length === 0 ? "No open ports were detected." : "The forwarded ports are exclusively accessible to you."} @@ -123,7 +121,7 @@ export const PortForwardPopoverView: React.FC< theme.palette.text.primary, + color: theme.palette.text.primary, fontSize: 14, display: "flex", alignItems: "center", @@ -142,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, }} @@ -157,22 +155,20 @@ export const PortForwardPopoverView: React.FC< Forward port - theme.palette.text.secondary }} - > + Access ports running on the agent: `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) => { @@ -198,26 +194,26 @@ export const PortForwardPopoverView: React.FC< min={0} max={65535} required - sx={{ + css={{ fontSize: 14, height: 34, p: "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%", }} /> theme.palette.text.primary, + color: theme.palette.text.primary, }} /> diff --git a/site/src/components/Resources/Resources.stories.tsx b/site/src/components/Resources/Resources.stories.tsx index 2d3ba077c5f08..7e107b79ad315 100644 --- a/site/src/components/Resources/Resources.stories.tsx +++ b/site/src/components/Resources/Resources.stories.tsx @@ -58,25 +58,6 @@ const reallyLong = { sensitive: false, }; -export const Markdown: Story = { - args: { - resources: [ - { - ...nullDevice, - type: "workspace", - id: "1", - name: "Workspace", - metadata: [ - { key: "text", value: "hello", sensitive: false }, - { key: "link", value: "[hello](hello)", sensitive: false }, - { key: "heading", value: "# hello", sensitive: false }, - { key: "image", value: "![go](/icon/go.svg)", sensitive: false }, - ], - }, - ], - }, -}; - export const BunchOfDevicesWithMetadata: Story = { args: { resources: [ From 6aae45dc7773d414fbcee8c955a14c759271d24c Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Fri, 3 Nov 2023 20:44:47 +0000 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/src/components/Resources/PortForwardButton.tsx | 2 +- site/src/components/TableToolbar/TableToolbar.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx index 6adb0adf22a3b..df4f6b773f6b3 100644 --- a/site/src/components/Resources/PortForwardButton.tsx +++ b/site/src/components/Resources/PortForwardButton.tsx @@ -197,7 +197,7 @@ export const PortForwardPopoverView: React.FC< css={{ fontSize: 14, height: 34, - p: "0 12px", + padding: "0 12px", background: "none", border: 0, outline: "none", diff --git a/site/src/components/TableToolbar/TableToolbar.tsx b/site/src/components/TableToolbar/TableToolbar.tsx index 032d1116ea7d6..080350ddc2234 100644 --- a/site/src/components/TableToolbar/TableToolbar.tsx +++ b/site/src/components/TableToolbar/TableToolbar.tsx @@ -4,13 +4,15 @@ import Skeleton from "@mui/material/Skeleton"; export const TableToolbar = styled(Box)(({ theme }) => ({ fontSize: 13, - marginBottom: 8, + 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 = {