diff --git a/site/src/components/BorderedMenu/BorderedMenu.tsx b/site/src/components/BorderedMenu/BorderedMenu.tsx index 9a9e8a3bd8..6380766244 100644 --- a/site/src/components/BorderedMenu/BorderedMenu.tsx +++ b/site/src/components/BorderedMenu/BorderedMenu.tsx @@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({ paperRoot: { width: "292px", border: `2px solid ${theme.palette.secondary.dark}`, - borderRadius: 7, + borderRadius: theme.shape.borderRadius, boxShadow: `4px 4px 0px ${fade(theme.palette.secondary.dark, 0.2)}`, }, })) diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx index 9aa449d623..80f349d0c9 100644 --- a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx +++ b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx @@ -91,7 +91,7 @@ const useStyles = makeStyles((theme) => ({ padding: `0 ${theme.spacing(1.5)}px`, }, content: { - borderRadius: 7, + borderRadius: theme.shape.borderRadius, display: "flex", flexDirection: "column", padding: theme.spacing(2), diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx index fee7a09fd8..9bd5fef203 100644 --- a/site/src/components/CopyButton/CopyButton.tsx +++ b/site/src/components/CopyButton/CopyButton.tsx @@ -89,7 +89,7 @@ const useStyles = makeStyles((theme) => ({ marginLeft: theme.spacing(1), }, copyButton: { - borderRadius: 7, + borderRadius: theme.shape.borderRadius, padding: theme.spacing(0.85), minWidth: 32, diff --git a/site/src/components/TemplateStats/TemplateStats.tsx b/site/src/components/TemplateStats/TemplateStats.tsx index b02730b329..83fc8f49cb 100644 --- a/site/src/components/TemplateStats/TemplateStats.tsx +++ b/site/src/components/TemplateStats/TemplateStats.tsx @@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles" import { FC } from "react" import { createDayString } from "util/createDayString" import { Template, TemplateVersion } from "../../api/typesGenerated" -import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants" +import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" const Language = { usedByLabel: "Used by", @@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({ paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), backgroundColor: theme.palette.background.paper, - borderRadius: CardRadius, + borderRadius: theme.shape.borderRadius, display: "flex", alignItems: "center", color: theme.palette.text.secondary, diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx index 8f52d623ec..cc1b9e0233 100644 --- a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx +++ b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx @@ -79,7 +79,7 @@ export const WorkspaceBuildLogs: FC = ({ logs }) => { const useStyles = makeStyles((theme) => ({ logs: { border: `1px solid ${theme.palette.divider}`, - borderRadius: 2, + borderRadius: theme.shape.borderRadius, fontFamily: MONOSPACE_FONT_FAMILY, }, diff --git a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx index 8aaebd635a..2543b039a0 100644 --- a/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx +++ b/site/src/components/WorkspaceBuildStats/WorkspaceBuildStats.tsx @@ -3,7 +3,7 @@ import { makeStyles, useTheme } from "@material-ui/core/styles" import { FC } from "react" import { Link as RouterLink } from "react-router-dom" import { WorkspaceBuild } from "../../api/typesGenerated" -import { CardRadius, MONOSPACE_FONT_FAMILY } from "../../theme/constants" +import { MONOSPACE_FONT_FAMILY } from "../../theme/constants" import { combineClasses } from "../../util/combineClasses" import { displayWorkspaceBuildDuration, @@ -72,7 +72,7 @@ const useStyles = makeStyles((theme) => ({ paddingLeft: theme.spacing(2), paddingRight: theme.spacing(2), backgroundColor: theme.palette.background.paper, - borderRadius: CardRadius, + borderRadius: theme.shape.borderRadius, display: "flex", alignItems: "center", color: theme.palette.text.secondary, diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx index 0a6ccd312d..041e3b6062 100644 --- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx +++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx @@ -179,7 +179,7 @@ const useStyles = makeStyles((theme) => ({ }, }, iconButton: { - borderRadius: 2, + borderRadius: theme.shape.borderRadius, }, popoverPaper: { padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`, diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx index 73947c6fc3..3149d160ba 100644 --- a/site/src/components/WorkspaceSection/WorkspaceSection.tsx +++ b/site/src/components/WorkspaceSection/WorkspaceSection.tsx @@ -2,7 +2,7 @@ import Paper from "@material-ui/core/Paper" import { makeStyles } from "@material-ui/core/styles" import Typography from "@material-ui/core/Typography" import React, { HTMLProps } from "react" -import { CardPadding, CardRadius } from "../../theme/constants" +import { CardPadding } from "../../theme/constants" import { combineClasses } from "../../util/combineClasses" export interface WorkspaceSectionProps { @@ -44,7 +44,7 @@ export const WorkspaceSection: React.FC = ({ const useStyles = makeStyles((theme) => ({ root: { border: `1px solid ${theme.palette.divider}`, - borderRadius: CardRadius, + borderRadius: theme.shape.borderRadius, }, contents: { margin: theme.spacing(2), diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 7df2057e61..eb5f727557 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -1,5 +1,5 @@ export const spacing = 8 -export const borderRadius = 4 +export const borderRadius = 8 export const buttonBorderWidth = 2 export const MONOSPACE_FONT_FAMILY = "'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace" diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts index 265fad2a76..0bb61ab9ae 100644 --- a/site/src/theme/overrides.ts +++ b/site/src/theme/overrides.ts @@ -1,7 +1,7 @@ import { Theme } from "@material-ui/core/styles" import { SimplePaletteColorOptions } from "@material-ui/core/styles/createPalette" import { Overrides } from "@material-ui/core/styles/overrides" -import { MONOSPACE_FONT_FAMILY } from "./constants" +import { borderRadius, MONOSPACE_FONT_FAMILY } from "./constants" export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => { return { @@ -74,7 +74,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => { }, MuiTableContainer: { root: { - borderRadius: 2, + borderRadius, border: `1px solid ${palette.divider}`, }, }, @@ -117,7 +117,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => { }, MuiInputBase: { root: { - borderRadius: 2, + borderRadius, }, }, MuiOutlinedInput: { @@ -141,7 +141,7 @@ export const getOverrides = ({ palette, breakpoints }: Theme): Overrides => { }, MuiPaper: { root: { - borderRadius: 2, + borderRadius, border: `1px solid ${palette.divider}`, }, },