Correct height in full screen component, add skip callback function

ui/src/reusable_ui/components/wizard/WizardCloak.scss

@@ -5,3 +5,17 @@
   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;
+}

ui/src/reusable_ui/components/wizard/WizardCloak.tsx

@@ -52,12 +52,15 @@ class WizardCloak extends PureComponent<Props, State> {
 
     return (
       <div className="wizard-cloak">
+        <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

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;
 }

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;
 }

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>
+      </>
     )
   }
 

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 => () => {