refactor: use better naming for colours

striker-ui/components/Bars/AllocationBar.tsx

@@ -1,8 +1,8 @@
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { LinearProgress } from '@material-ui/core';
 import {
-  PURPLE_OFF,
-  RED_ON,
+  PURPLE,
+  RED,
   BLUE,
   PANEL_BACKGROUND,
 } from '../../lib/consts/DEFAULT_THEME';
@@ -28,10 +28,10 @@ const useStyles = makeStyles(() => ({
     backgroundColor: BLUE,
   },
   barWarning: {
-    backgroundColor: PURPLE_OFF,
+    backgroundColor: PURPLE,
   },
   barAlert: {
-    backgroundColor: RED_ON,
+    backgroundColor: RED,
   },
 }));
 

striker-ui/components/Bars/ProgressBar.tsx

@@ -1,10 +1,6 @@
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { LinearProgress } from '@material-ui/core';
-import {
-  PURPLE_OFF,
-  BLUE,
-  PANEL_BACKGROUND,
-} from '../../lib/consts/DEFAULT_THEME';
+import { PURPLE, BLUE, PANEL_BACKGROUND } from '../../lib/consts/DEFAULT_THEME';
 
 const completed = 100;
 
@@ -26,7 +22,7 @@ const useStyles = makeStyles(() => ({
     backgroundColor: BLUE,
   },
   barInProgress: {
-    backgroundColor: PURPLE_OFF,
+    backgroundColor: PURPLE,
   },
 }));
 

striker-ui/components/Decorator.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
-import { BLUE, GREY, PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+import { BLUE, GREY, PURPLE, RED } from '../lib/consts/DEFAULT_THEME';
 
 export type Colours = 'ok' | 'off' | 'error' | 'warning';
 
@@ -13,10 +13,10 @@ const useStyles = makeStyles(() => ({
     backgroundColor: BLUE,
   },
   warning: {
-    backgroundColor: PURPLE_OFF,
+    backgroundColor: PURPLE,
   },
   error: {
-    backgroundColor: RED_ON,
+    backgroundColor: RED,
   },
   off: {
     backgroundColor: GREY,

striker-ui/lib/consts/DEFAULT_THEME.ts

@@ -1,11 +1,10 @@
 // Colour Palette
 
-export const RED_ON = '#D02724';
-export const BORDER_GREY = '#E5E5E5';
+export const RED = '#D02724';
 export const TEXT = '#F2F2F2';
 export const PANEL_BACKGROUND = '#343434';
 export const PANEL_BORDER = '#000000';
-export const PURPLE_OFF = '#7353BA';
+export const PURPLE = '#7353BA';
 export const BLUE = '#4785FF';
 export const GREY = '#E5E5E5';
 export const HOVER = '#444';

striker-ui/theme/index.ts

@@ -2,7 +2,7 @@ import createMuiTheme, { Theme } from '@material-ui/core/styles/createMuiTheme';
 import {
   PANEL_BACKGROUND,
   TEXT,
-  PURPLE_OFF,
+  PURPLE,
   BLUE,
 } from '../lib/consts/DEFAULT_THEME';
 
@@ -35,7 +35,7 @@ const theme: Theme = createMuiTheme({
       track: {
         borderRadius: 0,
         border: 3,
-        backgroundColor: PURPLE_OFF,
+        backgroundColor: PURPLE,
         '$checked$checked + &': {
           // Controls checked color for the track
           backgroundColor: BLUE,