From 8feb7bc4b087b6a01939e2dbd6e90e55ace2b878 Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 10:50:45 -0400
Subject: [PATCH 1/7] edited top margin to properly center step buttons

---
 src/canvas/Canvas.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/canvas/Canvas.scss b/src/canvas/Canvas.scss
index b475964..1d510de 100644
--- a/src/canvas/Canvas.scss
+++ b/src/canvas/Canvas.scss
@@ -73,7 +73,7 @@
   text-align: center;
   div {
     display: inline-block;
-    margin-top: 5px;
+    margin-top: 3.5px;
     margin-left: 22px;
     &:first-child {
       margin-left: 0;
-- 
2.51.2


From 4c5a6356da32c06b3c0c6ed936406dcfd6a3a5e3 Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 10:59:06 -0400
Subject: [PATCH 2/7] changed currentStep in canvas to not increase by 1

---
 src/canvas/Canvas.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/canvas/Canvas.js b/src/canvas/Canvas.js
index 5d5657d..5089224 100644
--- a/src/canvas/Canvas.js
+++ b/src/canvas/Canvas.js
@@ -179,7 +179,7 @@ class Canvas extends React.Component {
           </g>
         </svg>
         <StepMenu 
-          currentStep={this.state.currentStep+1} 
+          currentStep={this.state.currentStep} 
           stepInfo={this.state.steps} 
           setStep={s => this.setState({ currentStep: s })}
         />
-- 
2.51.2


From a2a41fd7b8c46bc1b7ca30fc8c482d573785fe03 Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 11:17:28 -0400
Subject: [PATCH 3/7] made svg step buttons appear clickable by changing cursor
 on hover

---
 public/assets/step-first.svg | 4 ++--
 public/assets/step-last.svg  | 4 ++--
 public/assets/step-next.svg  | 4 ++--
 public/assets/step-prev.svg  | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/assets/step-first.svg b/public/assets/step-first.svg
index 2d0f8ba..335cf36 100644
--- a/public/assets/step-first.svg
+++ b/public/assets/step-first.svg
@@ -4,8 +4,8 @@
     <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";}
+    .st0{fill: currentColor; cursor: pointer;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round"; cursor: pointer;}
   </style>
   <g>
     <g>
diff --git a/public/assets/step-last.svg b/public/assets/step-last.svg
index 8cf0eee..36b291c 100644
--- a/public/assets/step-last.svg
+++ b/public/assets/step-last.svg
@@ -4,8 +4,8 @@
     <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";}
+    .st0{fill: currentColor; cursor: pointer;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round"; cursor: pointer;}
   </style>
   <g>
     <g transform="matrix(-1 0 0 1 18 0)">
diff --git a/public/assets/step-next.svg b/public/assets/step-next.svg
index 06c83d0..c0bac99 100644
--- a/public/assets/step-next.svg
+++ b/public/assets/step-next.svg
@@ -3,8 +3,8 @@
     <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";}
+    .st0{fill: currentColor; cursor: pointer;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round"; cursor: pointer;}
   </style>
   <g transform="matrix(-1 0 0 1 18 0)">
     <use class="st0" xlink:href="#path-1"/>
diff --git a/public/assets/step-prev.svg b/public/assets/step-prev.svg
index a31cbad..6b87dd3 100644
--- a/public/assets/step-prev.svg
+++ b/public/assets/step-prev.svg
@@ -3,8 +3,8 @@
     <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";}
+    .st0{fill: currentColor; cursor: pointer;}
+    .st1{fill-opacity="0"; fill:currentColor; stroke:currentColor; stroke-linecap="round"; stroke-linejoin="round"; cursor: pointer;}
   </style>
   <g>
     <use class="st0" xlink:href="#path-1"/>
-- 
2.51.2


From c1517d5d4886196eeb8360140a31021847f445d0 Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 11:20:25 -0400
Subject: [PATCH 4/7] all buttons now go to next step

---
 src/canvas/StepMenu.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 7c6c083..9f639d0 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -24,17 +24,31 @@ class StepMenu extends React.Component {
   componentDidMount() {  
   }
 
+  handleClick(event, clickType){
+    event.preventDefault();
+    this.props.setStep(this.props.currentStep+1);
+    console.log("TeStInG" + clickType);
+  }
+
   render() {
     return (
       <React.Fragment>
         <div className="step-menu">
         <div style={{color:this.state.backColor}}>
-          <ReactSVG src="/assets/step-first.svg"/>
-          <ReactSVG src="/assets/step-prev.svg" />
+          <div onClick={(event) => this.handleClick(event, "first")}>
+            <ReactSVG src="/assets/step-first.svg"/>
+          </div>
+          <div onClick={(event) => this.handleClick(event, "prev")}>
+            <ReactSVG src="/assets/step-prev.svg" />
+          </div>
         </div>
         <div style={{color:this.state.nextColor}}>
-          <ReactSVG src="/assets/step-next.svg" />
-          <ReactSVG src="/assets/step-last.svg" />
+          <div onClick={(event) => this.handleClick(event, "next")}>
+            <ReactSVG src="/assets/step-next.svg" />
+            </div>
+          <div onClick={(event) => this.handleClick(event, "last")}>
+            <ReactSVG src="/assets/step-last.svg" />
+          </div>
         </div>
         </div>
         <div className="step-text">
-- 
2.51.2


From 8694de6b1b35dd2919a0b2c77a4c6bd86234de0c Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 11:45:45 -0400
Subject: [PATCH 5/7] step buttons change colors after click, but are always
 one update behind

---
 src/canvas/StepMenu.js | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 9f639d0..28a15ee 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -11,23 +11,58 @@ class StepMenu extends React.Component {
       backColor:"rgb(68, 68, 68)",
       nextColor:"rgb(68, 68, 68)"
     };
+    this.updateColor();
+    
+
+  }
+
+  updateColor() {
+    console.log(this.props.currentStep + " - " + (this.props.stepInfo.length));
     // changes the color of the prev or next buttons to be grayed out
     // if the current step is the first or last step
     if(this.props.currentStep == 0){
       this.state.backColor = "rgb(136, 136, 136)";
     }
+    else{
+      this.state.backColor = "rgb(68, 68, 68)";
+    }
     if(this.props.currentStep == this.props.stepInfo.length){
       this.state.nextColor = "rgb(136, 136, 136)";
     }
+    else{
+      this.state.nextColor = "rgb(68, 68, 68)";
+    }
   }
 
   componentDidMount() {  
+
   }
 
-  handleClick(event, clickType){
+  /* Handles clicking of the SVG components
+   * event is the click itself, clicktype tells which
+   * SVG button was clicked with a string
+   */
+  handleClick(event, clickType) {
     event.preventDefault();
-    this.props.setStep(this.props.currentStep+1);
-    console.log("TeStInG" + clickType);
+    switch(clickType) {
+      case "first":
+        this.props.setStep(0);
+        break;
+      case "prev":
+        if(this.props.currentStep != 0)
+          this.props.setStep(this.props.currentStep-1);
+        break;
+      case "next":
+        if(this.props.currentStep != this.props.stepInfo.length)
+          this.props.setStep(this.props.currentStep+1);
+          break;
+      case "last":
+        this.props.setStep(this.props.stepInfo.length);
+        break;
+      default:
+        break;
+    }
+    this.updateColor();
   }
 
   render() {
-- 
2.51.2


From 8aad262c748f301549b1cb5c795ec0171f26233a Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 12:12:32 -0400
Subject: [PATCH 6/7] coloring changes to match the appropriate step currently
 displayed

---
 src/canvas/StepMenu.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 28a15ee..69726c6 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -11,22 +11,24 @@ class StepMenu extends React.Component {
       backColor:"rgb(68, 68, 68)",
       nextColor:"rgb(68, 68, 68)"
     };
-    this.updateColor();
-    
-
+    this.updateColor(this.props.currentStep);
   }
 
-  updateColor() {
-    console.log(this.props.currentStep + " - " + (this.props.stepInfo.length));
+  /* Updates the colors in the state given a step number.
+   * Does not reference props so that the color can be updated
+   * before the props changes and the component is rerendered
+   */
+  updateColor(step) {
     // changes the color of the prev or next buttons to be grayed out
     // if the current step is the first or last step
-    if(this.props.currentStep == 0){
+    console.log(this.props.stepInfo.length);
+    if(step == 0){
       this.state.backColor = "rgb(136, 136, 136)";
     }
     else{
       this.state.backColor = "rgb(68, 68, 68)";
     }
-    if(this.props.currentStep == this.props.stepInfo.length){
+    if(step == this.props.stepInfo.length){
       this.state.nextColor = "rgb(136, 136, 136)";
     }
     else{
@@ -44,25 +46,30 @@ class StepMenu extends React.Component {
    */
   handleClick(event, clickType) {
     event.preventDefault();
+    let step = this.props.currentStep;
     switch(clickType) {
       case "first":
-        this.props.setStep(0);
+        step = 0;
         break;
       case "prev":
         if(this.props.currentStep != 0)
-          this.props.setStep(this.props.currentStep-1);
+          step--;
         break;
       case "next":
         if(this.props.currentStep != this.props.stepInfo.length)
-          this.props.setStep(this.props.currentStep+1);
+          step++;
           break;
       case "last":
+        step = 10;
         this.props.setStep(this.props.stepInfo.length);
         break;
       default:
         break;
     }
-    this.updateColor();
+    // Must update color before updating props to allow component to
+    // render with the proper current color rather than the state before
+    this.updateColor(step);
+    this.props.setStep(step);
   }
 
   render() {
-- 
2.51.2


From f08ee9c844b4df7a15ed8a8c4f5866638e03c00b Mon Sep 17 00:00:00 2001
From: rsdexter <rsdexter00@gmail.com>
Date: Thu, 16 Apr 2020 12:18:17 -0400
Subject: [PATCH 7/7] Constructor now sets colors in state for back buttons to
 be greyed out initially

---
 src/canvas/StepMenu.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/canvas/StepMenu.js b/src/canvas/StepMenu.js
index 69726c6..3855423 100644
--- a/src/canvas/StepMenu.js
+++ b/src/canvas/StepMenu.js
@@ -8,10 +8,9 @@ class StepMenu extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      backColor:"rgb(68, 68, 68)",
+      backColor:"rgb(134, 134, 134)",
       nextColor:"rgb(68, 68, 68)"
     };
-    this.updateColor(this.props.currentStep);
   }
 
   /* Updates the colors in the state given a step number.
@@ -60,8 +59,7 @@ class StepMenu extends React.Component {
           step++;
           break;
       case "last":
-        step = 10;
-        this.props.setStep(this.props.stepInfo.length);
+        step = this.props.stepInfo.length;
         break;
       default:
         break;
-- 
2.51.2