chore: Increase border radius (#3493)

BrunoQuaresma · web-flow · commit 0e8c68ebc583 · 2022-08-12T14:58:14.000-03:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -79,7 +79,7 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({ 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
@@ -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
@@ -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
@@ -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<WorkspaceSectionProps> = ({
 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
@@ -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
@@ -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}`,
       },
     },
