From 65677c0bfb0ee9523011a9d9cac3fc84642d4766 Mon Sep 17 00:00:00 2001 From: Josue Date: Thu, 20 May 2021 15:21:03 -0400 Subject: [PATCH] refactor: add border radius to constants --- striker-ui/components/Bars/AllocationBar.tsx | 5 +++-- striker-ui/components/Bars/ProgressBar.tsx | 11 ++++++++--- striker-ui/components/Decorator.tsx | 10 ++++++++-- striker-ui/components/Header.tsx | 3 ++- striker-ui/components/Panels/InnerPanel.tsx | 4 ++-- striker-ui/components/Panels/Panel.tsx | 8 ++++++-- striker-ui/components/Panels/PanelHeader.tsx | 4 ++-- striker-ui/lib/consts/DEFAULT_THEME.ts | 2 ++ striker-ui/theme/index.ts | 5 +++-- 9 files changed, 36 insertions(+), 16 deletions(-) diff --git a/striker-ui/components/Bars/AllocationBar.tsx b/striker-ui/components/Bars/AllocationBar.tsx index 77c4ea4e..ce0874a8 100644 --- a/striker-ui/components/Bars/AllocationBar.tsx +++ b/striker-ui/components/Bars/AllocationBar.tsx @@ -5,6 +5,7 @@ import { RED, BLUE, PANEL_BACKGROUND, + BORDER_RADIUS, } from '../../lib/consts/DEFAULT_THEME'; const breakpointWarning = 70; @@ -13,13 +14,13 @@ const breakpointAlert = 90; const BorderLinearProgress = withStyles({ root: { height: '1em', - borderRadius: '2px', + borderRadius: BORDER_RADIUS, }, colorPrimary: { backgroundColor: PANEL_BACKGROUND, }, bar: { - borderRadius: '3px', + borderRadius: BORDER_RADIUS, }, })(LinearProgress); diff --git a/striker-ui/components/Bars/ProgressBar.tsx b/striker-ui/components/Bars/ProgressBar.tsx index a7d193d6..6ab4c400 100644 --- a/striker-ui/components/Bars/ProgressBar.tsx +++ b/striker-ui/components/Bars/ProgressBar.tsx @@ -1,19 +1,24 @@ import { makeStyles, withStyles } from '@material-ui/core/styles'; import { LinearProgress } from '@material-ui/core'; -import { PURPLE, BLUE, PANEL_BACKGROUND } from '../../lib/consts/DEFAULT_THEME'; +import { + PURPLE, + BLUE, + PANEL_BACKGROUND, + BORDER_RADIUS, +} from '../../lib/consts/DEFAULT_THEME'; const completed = 100; const BorderLinearProgress = withStyles({ root: { height: '1em', - borderRadius: '2px', + borderRadius: BORDER_RADIUS, }, colorPrimary: { backgroundColor: PANEL_BACKGROUND, }, bar: { - borderRadius: '3px', + borderRadius: BORDER_RADIUS, }, })(LinearProgress); diff --git a/striker-ui/components/Decorator.tsx b/striker-ui/components/Decorator.tsx index fe5f9eb4..4bab031e 100644 --- a/striker-ui/components/Decorator.tsx +++ b/striker-ui/components/Decorator.tsx @@ -1,5 +1,11 @@ import { makeStyles } from '@material-ui/core/styles'; -import { BLUE, GREY, PURPLE, RED } from '../lib/consts/DEFAULT_THEME'; +import { + BLUE, + GREY, + PURPLE, + RED, + BORDER_RADIUS, +} from '../lib/consts/DEFAULT_THEME'; export type Colours = 'ok' | 'off' | 'error' | 'warning'; @@ -7,7 +13,7 @@ const useStyles = makeStyles(() => ({ decorator: { width: '1.4em', height: '100%', - borderRadius: 2, + borderRadius: BORDER_RADIUS, }, ok: { backgroundColor: BLUE, diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx index 395a503d..25b333ed 100644 --- a/striker-ui/components/Header.tsx +++ b/striker-ui/components/Header.tsx @@ -3,6 +3,7 @@ import AppBar from '@material-ui/core/AppBar'; import { makeStyles, createStyles } from '@material-ui/core/styles'; import { Box, Button } from '@material-ui/core'; import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; +import { BORDER_RADIUS } from '../lib/consts/DEFAULT_THEME'; import AnvilDrawer from './AnvilDrawer'; const useStyles = makeStyles((theme) => @@ -17,7 +18,7 @@ const useStyles = makeStyles((theme) => height: '2.8em', width: '30vw', backgroundColor: theme.palette.secondary.main, - borderRadius: '3px', + borderRadius: BORDER_RADIUS, }, barElement: { padding: 0, diff --git a/striker-ui/components/Panels/InnerPanel.tsx b/striker-ui/components/Panels/InnerPanel.tsx index f3c0aadc..22c22274 100644 --- a/striker-ui/components/Panels/InnerPanel.tsx +++ b/striker-ui/components/Panels/InnerPanel.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { Box } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { DIVIDER } from '../../lib/consts/DEFAULT_THEME'; +import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; type Props = { children: ReactNode; @@ -10,7 +10,7 @@ type Props = { const useStyles = makeStyles(() => ({ innerBody: { borderWidth: '1px', - borderRadius: '3px', + borderRadius: BORDER_RADIUS, borderStyle: 'solid', borderColor: DIVIDER, marginTop: '1.4em', diff --git a/striker-ui/components/Panels/Panel.tsx b/striker-ui/components/Panels/Panel.tsx index f25610da..33fee228 100644 --- a/striker-ui/components/Panels/Panel.tsx +++ b/striker-ui/components/Panels/Panel.tsx @@ -1,6 +1,10 @@ import { ReactNode } from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { PANEL_BACKGROUND, TEXT } from '../../lib/consts/DEFAULT_THEME'; +import { + BORDER_RADIUS, + PANEL_BACKGROUND, + TEXT, +} from '../../lib/consts/DEFAULT_THEME'; type Props = { children: ReactNode; @@ -25,7 +29,7 @@ const useStyles = makeStyles(() => ({ border: '1px', borderColor: TEXT, borderWidth: '1px', - borderRadius: '3px', + borderRadius: BORDER_RADIUS, borderStyle: 'solid', padding: 0, margin: 0, diff --git a/striker-ui/components/Panels/PanelHeader.tsx b/striker-ui/components/Panels/PanelHeader.tsx index 164254e0..82c9b9a2 100644 --- a/striker-ui/components/Panels/PanelHeader.tsx +++ b/striker-ui/components/Panels/PanelHeader.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; import { Box } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import { DIVIDER } from '../../lib/consts/DEFAULT_THEME'; +import { BORDER_RADIUS, DIVIDER } from '../../lib/consts/DEFAULT_THEME'; type Props = { children: ReactNode; @@ -20,7 +20,7 @@ const useStyles = makeStyles(() => ({ content: '""', borderColor: DIVIDER, borderWidth: '1px', - borderRadius: '3px', + borderRadius: BORDER_RADIUS, borderStyle: 'solid', width: '100%', }, diff --git a/striker-ui/lib/consts/DEFAULT_THEME.ts b/striker-ui/lib/consts/DEFAULT_THEME.ts index 249d34cb..820fbc23 100644 --- a/striker-ui/lib/consts/DEFAULT_THEME.ts +++ b/striker-ui/lib/consts/DEFAULT_THEME.ts @@ -12,3 +12,5 @@ export const UNSELECTED = '#666'; export const DIVIDER = '#888'; export const SELECTED_ANVIL = '#00ff00'; export const DISABLED = '#AAA'; + +export const BORDER_RADIUS = '3px'; diff --git a/striker-ui/theme/index.ts b/striker-ui/theme/index.ts index 5ea8a5a6..ce2ae799 100644 --- a/striker-ui/theme/index.ts +++ b/striker-ui/theme/index.ts @@ -5,6 +5,7 @@ import { PURPLE, BLUE, DISABLED, + BORDER_RADIUS, } from '../lib/consts/DEFAULT_THEME'; const theme: Theme = createMuiTheme({ @@ -34,7 +35,7 @@ const theme: Theme = createMuiTheme({ padding: 8, }, track: { - borderRadius: 3, + borderRadius: BORDER_RADIUS, border: 3, backgroundColor: PURPLE, opacity: 1, @@ -49,7 +50,7 @@ const theme: Theme = createMuiTheme({ }, thumb: { color: TEXT, - borderRadius: 3, + borderRadius: BORDER_RADIUS, }, }, },