refactor: add border radius to constants

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);
 

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);
 

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,

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,

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',

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,

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%',
   },

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';

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,
       },
     },
   },