From 873623cce0d94ab8d3019750eaa6cf7669e16c01 Mon Sep 17 00:00:00 2001
From: Daniel Campbell <metalwhirlwind@gmail.com>
Date: Mon, 23 Jul 2018 14:31:49 -0700
Subject: [PATCH] Correct height in full screen component, add skip callback
 function

---
 .../components/wizard/WizardCloak.scss        | 14 +++++++++
 .../components/wizard/WizardCloak.tsx         | 31 +++++++++++++++----
 .../components/wizard/WizardFullScreen.scss   |  7 ++---
 .../components/wizard/WizardStep.scss         | 15 +++------
 .../components/wizard/WizardStep.tsx          | 11 +++----
 ui/src/sources/components/WizardTower.tsx     |  3 +-
 6 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/ui/src/reusable_ui/components/wizard/WizardCloak.scss b/ui/src/reusable_ui/components/wizard/WizardCloak.scss
index 8e664b882..e0b206a3b 100644
--- a/ui/src/reusable_ui/components/wizard/WizardCloak.scss
+++ b/ui/src/reusable_ui/components/wizard/WizardCloak.scss
@@ -4,4 +4,18 @@
 .step-title {
   text-align: center;
   font-size: $ix-text-base-2;
+}
+
+.wizard-cloak {
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tip-text {
+  min-width: 100%;
+  color: $g12-forge;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/ui/src/reusable_ui/components/wizard/WizardCloak.tsx b/ui/src/reusable_ui/components/wizard/WizardCloak.tsx
index ca39009c0..5b02a94e7 100644
--- a/ui/src/reusable_ui/components/wizard/WizardCloak.tsx
+++ b/ui/src/reusable_ui/components/wizard/WizardCloak.tsx
@@ -52,12 +52,15 @@ class WizardCloak extends PureComponent<Props, State> {
 
     return (
       <div className="wizard-cloak">
-        <h2 className="step-title">{this.CurrentChild.props.title}</h2>
-        <WizardProgressBar
-          handleJump={this.jumpToStep}
-          steps={steps}
-          currentStepIndex={currentStepIndex}
-        />
+        <div className="progress-header">
+          <h2 className="step-title">{this.CurrentChild.props.title}</h2>
+          <WizardProgressBar
+            handleJump={this.jumpToStep}
+            steps={steps}
+            currentStepIndex={currentStepIndex}
+          />
+          {this.tipText}
+        </div>
         {this.CurrentChild}
         <p className="skip-link">
           <a onClick={handleSkip}> {skipLinkText || 'skip'}</a>
@@ -103,6 +106,22 @@ class WizardCloak extends PureComponent<Props, State> {
       lastStep,
     })
   }
+
+  private get tipText() {
+    const {currentStepIndex} = this.state
+    const {
+      props: {tipText},
+    } = this.props.children[currentStepIndex]
+
+    if (tipText) {
+      return (
+        <div className="tip-text">
+          <p>{tipText}</p>
+        </div>
+      )
+    }
+    return null
+  }
 }
 
 export default WizardCloak
diff --git a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss
index ed5e25608..60daee11a 100644
--- a/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss
+++ b/ui/src/reusable_ui/components/wizard/WizardFullScreen.scss
@@ -4,14 +4,13 @@
 
 .wizard-container {
   padding: 30px;
+  display: flex;
   border-radius: $radius;
-  max-height: 80vh;
+  max-height: 60vh;
   min-width: 800px;
   background-color: $g1-raven;
 }
 
 .wizard-title {
-  text-align: center;
-  margin: $ix-marg-d;
-  font-size: $ix-text-base-2;
+  margin-top: $ix-marg-c;
 }
\ No newline at end of file
diff --git a/ui/src/reusable_ui/components/wizard/WizardStep.scss b/ui/src/reusable_ui/components/wizard/WizardStep.scss
index fc79792e9..77aca9795 100644
--- a/ui/src/reusable_ui/components/wizard/WizardStep.scss
+++ b/ui/src/reusable_ui/components/wizard/WizardStep.scss
@@ -3,30 +3,25 @@
 
 .button-bar {
   display: flex;
-  margin: 0 auto;
+  margin: $ix-marg-b auto;
+  position: relative;
   min-width: 100%;
   justify-content: center;
   align-items: center;
+  height: 50px;
   .btn {
     position: relative;
     white-space: nowrap;
-    margin: 0 $ix-marg-b;
+    margin: 0 $ix-marg-c;
   }
 }
 
-.tip-text {
-  min-width: 100%;
-  color: $g12-forge;
-  text-align: center;
-}
-
 .skip-link {
   color: $g7-graphite;
   text-decoration: underline;
   text-align: center;
-  margin-top: $ix-marg-c;
 }
 
 .step-content {
-  margin: $ix-marg-d 0;
+  margin: $ix-marg-b 0;
 }
\ No newline at end of file
diff --git a/ui/src/reusable_ui/components/wizard/WizardStep.tsx b/ui/src/reusable_ui/components/wizard/WizardStep.tsx
index ef8b4437d..6b5e4e269 100644
--- a/ui/src/reusable_ui/components/wizard/WizardStep.tsx
+++ b/ui/src/reusable_ui/components/wizard/WizardStep.tsx
@@ -19,17 +19,14 @@ interface Props {
 
 class WizardStep extends PureComponent<Props> {
   public render() {
-    const {children, decrement, tipText, nextLabel, previousLabel} = this.props
+    const {children, decrement, nextLabel, previousLabel} = this.props
 
     return (
-      <div className="progress-step">
-        <div className="tip-text">
-          <p>{tipText}</p>
-        </div>
+      <>
         <FancyScrollbar
+          className="step-content"
           maxHeight={400}
           autoHeight={true}
-          className="step-content"
         >
           {children}
         </FancyScrollbar>
@@ -49,7 +46,7 @@ class WizardStep extends PureComponent<Props> {
             {nextLabel || 'next'}
           </button>
         </div>
-      </div>
+      </>
     )
   }
 
diff --git a/ui/src/sources/components/WizardTower.tsx b/ui/src/sources/components/WizardTower.tsx
index 6b6132587..9947f8945 100644
--- a/ui/src/sources/components/WizardTower.tsx
+++ b/ui/src/sources/components/WizardTower.tsx
@@ -1,4 +1,5 @@
 import React, {PureComponent} from 'react'
+import {browserHistory} from 'react-router'
 import WizardFullScreen from 'src/reusable_ui/components/wizard/WizardFullScreen'
 import WizardStep from 'src/reusable_ui/components/wizard/WizardStep'
 
@@ -127,7 +128,7 @@ class WizardTower extends PureComponent<null, State> {
   }
 
   private handleSkip = () => {
-    // HANDLE SKIP
+    browserHistory.goBack()
   }
 
   private completeTest = curr => () => {