From 2773495878c93073dc6135cc1a8b88a530f025c5 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 10 Jul 2019 14:02:04 -0400
Subject: [PATCH] Format join flow using ModalTitle, ModalInnerContent,
 NextStepButton components

---
 src/components/join-flow/join-flow-step.jsx   | 33 +++++++++++--------
 src/components/join-flow/join-flow-step.scss  | 14 ++++++++
 src/components/join-flow/next-step-button.jsx | 15 +++++----
 .../join-flow/next-step-button.scss           | 11 +++++++
 src/components/modal/join/modal.scss          |  1 +
 5 files changed, 55 insertions(+), 19 deletions(-)
 create mode 100644 src/components/join-flow/join-flow-step.scss
 create mode 100644 src/components/join-flow/next-step-button.scss

diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index 5d7e4e10e..eeda3d102 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/src/components/join-flow/join-flow-step.jsx
@@ -2,6 +2,10 @@ const React = require('react');
 const PropTypes = require('prop-types');
 
 const NextStepButton = require('./next-step-button.jsx');
+const ModalTitle = require('../modal/base/modal-title.jsx');
+const ModalInnerContent = require('../modal/base/modal-inner-content.jsx');
+
+require('./join-flow-step.scss');
 
 const JoinFlowStep = ({
     children,
@@ -12,19 +16,22 @@ const JoinFlowStep = ({
 }) => (
     <form onSubmit={onSubmit}>
         <div>
-            {title && (
-                <h2>
-                    {title}
-                </h2>
-            )}
-            {description && (
-                <p>
-                    <span>
-                        {description}
-                    </span>
-                </p>
-            )}
-            {children}
+            <ModalInnerContent className="join-flow-inner-content">
+                {title && (
+                    <ModalTitle
+                        className="join-flow-title"
+                        title={title}
+                    />
+                )}
+                {description && (
+                    <p>
+                        <span>
+                            {description}
+                        </span>
+                    </p>
+                )}
+                {children}
+            </ModalInnerContent>
         </div>
         <NextStepButton waiting={waiting} />
     </form>
diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
new file mode 100644
index 000000000..f361dbe0c
--- /dev/null
+++ b/src/components/join-flow/join-flow-step.scss
@@ -0,0 +1,14 @@
+@import "../../colors";
+@import "../../frameless";
+
+.join-flow-title {
+    color: $type-gray;
+    font-size: 1.875rem;
+}
+
+.join-flow-inner-content {
+    box-shadow: none;
+    width: calc(100% - 5.875rem);
+    margin: 2.3125rem auto 2.5rem;
+    font-size: .875rem;
+}
diff --git a/src/components/join-flow/next-step-button.jsx b/src/components/join-flow/next-step-button.jsx
index d261bc1d0..a4e730b41 100644
--- a/src/components/join-flow/next-step-button.jsx
+++ b/src/components/join-flow/next-step-button.jsx
@@ -5,19 +5,22 @@ const injectIntl = require('react-intl').injectIntl;
 
 const intl = require('../../lib/intl.jsx');
 const Spinner = require('../../components/spinner/spinner.jsx');
+const ModalTitle = require('../modal/base/modal-title.jsx');
+
+require('./next-step-button.scss');
 
 const NextStepButton = props => (
     <button
+        className="modal-flush-bottom-button"
         disabled={props.waiting}
         type="submit"
-        {...omit(props, ['text', 'waiting'])}
+        {...omit(props, ['intl', 'text', 'waiting'])}
     >
         {props.waiting ?
-            <Spinner /> :
-            (props.text ?
-                props.text : (
-                    <intl.FormattedMessage id="registration.nextStep" />
-                )
+            <Spinner /> : (
+                <ModalTitle
+                    title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
+                />
             )
         }
     </button>
diff --git a/src/components/join-flow/next-step-button.scss b/src/components/join-flow/next-step-button.scss
new file mode 100644
index 000000000..7702fbdf0
--- /dev/null
+++ b/src/components/join-flow/next-step-button.scss
@@ -0,0 +1,11 @@
+@import "../../colors";
+@import "../../frameless";
+
+.modal-flush-bottom-button {
+    margin: 0;
+    width: 100%;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    height: 4rem;
+    background-color: $ui-orange;
+}
diff --git a/src/components/modal/join/modal.scss b/src/components/modal/join/modal.scss
index 16a225ba6..616a82a32 100644
--- a/src/components/modal/join/modal.scss
+++ b/src/components/modal/join/modal.scss
@@ -2,4 +2,5 @@
 @import "../../../frameless";
 
 .mod-join {
+    width: 27.4375rem;
 }