refactor: change bar colour using prop value

striker-ui/components/AllocationBar.tsx

@@ -1,6 +1,14 @@
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { LinearProgress } from '@material-ui/core';
-import { PURPLE_OFF, RED_ON } from '../lib/consts/DEFAULT_THEME';
+import {
+  PURPLE_OFF,
+  RED_ON,
+  BLUE,
+  PANEL_BACKGROUND,
+} from '../lib/consts/DEFAULT_THEME';
+
+const breakpointWarning = 70;
+const breakpointAlert = 90;
 
 const BorderLinearProgress = withStyles({
   root: {
@@ -8,18 +16,42 @@ const BorderLinearProgress = withStyles({
     borderRadius: 3,
   },
   colorPrimary: {
-    backgroundColor: PURPLE_OFF,
+    backgroundColor: PANEL_BACKGROUND,
   },
   bar: {
     borderRadius: 3,
-    backgroundColor: RED_ON,
   },
 })(LinearProgress);
 
+const useStyles = makeStyles(() => ({
+  barOk: {
+    backgroundColor: BLUE,
+  },
+  barWarning: {
+    backgroundColor: PURPLE_OFF,
+  },
+  barAlert: {
+    backgroundColor: RED_ON,
+  },
+}));
+
 const AllocationBar = ({ allocated }: { allocated: number }): JSX.Element => {
+  const classes = useStyles();
   return (
     <>
-      <BorderLinearProgress variant="determinate" value={allocated} />
+      <BorderLinearProgress
+        classes={{
+          bar:
+            /* eslint-disable no-nested-ternary */
+            allocated > breakpointWarning
+              ? allocated > breakpointAlert
+                ? classes.barAlert
+                : classes.barWarning
+              : classes.barOk,
+        }}
+        variant="determinate"
+        value={allocated}
+      />
       <LinearProgress variant="determinate" value={0} />
     </>
   );