From 5783c195beb8aaf5026187768f8314aab5be5197 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Mon, 29 Mar 2021 15:25:17 -0400
Subject: [PATCH] refactor: use storage bar as progress bar with adapted style

---
 striker-ui/components/AnvilNode.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/striker-ui/components/AnvilNode.tsx b/striker-ui/components/AnvilNode.tsx
index 888e4a72..9ac8a98a 100644
--- a/striker-ui/components/AnvilNode.tsx
+++ b/striker-ui/components/AnvilNode.tsx
@@ -1,6 +1,7 @@
 import { Grid, Switch } from '@material-ui/core';
 
-import AllocationBar from './AllocationBar';
+import InnerPanel from './InnerPanel';
+import ProgressBar from './ProgressBar';
 import { BodyText } from './Text';
 
 const AnvilNode = ({
@@ -14,7 +15,7 @@ const AnvilNode = ({
         node.map(
           (n): JSX.Element => {
             return (
-              <>
+              <InnerPanel key={n.node_uuid}>
                 <Grid container alignItems="center" justify="space-around">
                   <Grid item xs={6}>
                     <BodyText text={`Node: ${n.node_name}`} />
@@ -29,10 +30,10 @@ const AnvilNode = ({
                     <BodyText text={n.state_message} />
                   </Grid>
                   <Grid item xs={10}>
-                    <AllocationBar allocated={n.state_percent} />
+                    <ProgressBar progressPercentage={n.state_percent} />
                   </Grid>
                 </Grid>
-              </>
+              </InnerPanel>
             );
           },
         )}