From b6336da8ac4ded4d9c14ac78c816de84c68d40c4 Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 00:05:26 -0400
Subject: [PATCH] back step buttons now greyed out at step 1

---
 public/assets/step-first.svg | 12 ++++++++----
 public/assets/step-prev.svg  |  8 ++++++--
 src/canvas/StepMenu.js       |  9 +++++++--
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/assets/step-first.svg b/public/assets/step-first.svg
index 76c0159..2d0f8ba 100644
--- a/public/assets/step-first.svg
+++ b/public/assets/step-first.svg
@@ -3,14 +3,18 @@
     <path id="path-1" fill-rule="evenodd" d="M16.5 1.5l-15 15 15 15v-30z"/>
     <path id="path-2" fill-rule="evenodd" d="M30.5 1.5l-15 15 15 15v-30z"/>
   </defs>
+  <style type="text/css">
+    .st0{fill: currentColor;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round";}
+  </style>
   <g>
     <g>
-      <use fill="rgb(68,68,68)" xlink:href="#path-1"/>
-      <use fill-opacity="0" stroke="rgb(68,68,68)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" xlink:href="#path-1"/>
+      <use class="st0" xlink:href="#path-1"/>
+      <use class = "st1" stroke-width="3" xlink:href="#path-1"/>
     </g>
     <g>
-      <use fill="rgb(68,68,68)" xlink:href="#path-2"/>
-      <use fill-opacity="0" stroke="rgb(68,68,68)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" xlink:href="#path-2"/>
+      <use class="st0" xlink:href="#path-2"/>
+      <use class="st1" stroke-width="3" xlink:href="#path-2"/>
     </g>
   </g>
 </svg>
diff --git a/public/assets/step-prev.svg b/public/assets/step-prev.svg
index 89a04d8..a31cbad 100644
--- a/public/assets/step-prev.svg
+++ b/public/assets/step-prev.svg
@@ -2,8 +2,12 @@
   <defs>
     <path id="path-1" fill-rule="evenodd" d="M16.5 1.5l-15 15 15 15v-30z"/>
   </defs>
+  <style type="text/css">
+    .st0{fill: currentColor;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round";}
+  </style>
   <g>
-    <use fill="rgb(68,68,68)" xlink:href="#path-1"/>
-    <use fill-opacity="0" stroke="rgb(68,68,68)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" xlink:href="#path-1"/>
+    <use class="st0" xlink:href="#path-1"/>
+    <use class="st1" stroke-width="3" xlink:href="#path-1"/>
   </g>
 </svg>
diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 3c1c227..80946c3 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -11,7 +11,12 @@ class StepMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      backColor:"rgb(68, 68, 68)",
+      nextColor:"rgb(68, 68, 68)"
     };
+    if(this.props.currentStep == 1){
+      this.state.backColor = "rgb(136, 136, 136)";
+    }
   }
 
   componentDidMount() {  
@@ -20,8 +25,8 @@ class StepMenu extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <div className="step-menu">
-          <ReactSVG src="/assets/step-first.svg" />
+        <div className="step-menu" style={{color:this.state.backColor}}>
+          <ReactSVG src="/assets/step-first.svg"/>
           <ReactSVG src="/assets/step-prev.svg" />
           <ReactSVG src="/assets/step-next.svg" />
           <ReactSVG src="/assets/step-last.svg" />
-- 
2.51.2