From 185cf1398e272ab632aaf70d95727363d450e4ee Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 1 Apr 2021 11:15:50 -0400
Subject: [PATCH] refactor: use the PanelHeader component with nodes to get the
 shifted header effecft

---
 striker-ui/components/AnvilNode.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/striker-ui/components/AnvilNode.tsx b/striker-ui/components/AnvilNode.tsx
index 9ac8a98a..8b711544 100644
--- a/striker-ui/components/AnvilNode.tsx
+++ b/striker-ui/components/AnvilNode.tsx
@@ -3,6 +3,7 @@ import { Grid, Switch } from '@material-ui/core';
 import InnerPanel from './InnerPanel';
 import ProgressBar from './ProgressBar';
 import { BodyText } from './Text';
+import PanelHeader from './PanelHeader';
 
 const AnvilNode = ({
   node,
@@ -16,14 +17,18 @@ const AnvilNode = ({
           (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}`} />
-                  </Grid>
-                  <Grid item xs={3}>
-                    <Switch checked />
+                <PanelHeader>
+                  <Grid container alignItems="center" justify="space-around">
+                    <Grid item xs={7}>
+                      <BodyText text={`Node: ${n.node_name}`} />
+                    </Grid>
+                    <Grid item xs={3}>
+                      <Switch checked />
+                    </Grid>
                   </Grid>
-                  <Grid item xs={6}>
+                </PanelHeader>
+                <Grid container alignItems="center" justify="space-around">
+                  <Grid item xs={5}>
                     <BodyText text={`State: ${n.state}`} />
                   </Grid>
                   <Grid item xs={4}>