Merge pull request #3117 from benjiwheeler/join-flow-use-css

Format join flow using ModalTitle, ModalInnerContent, NextStepButton components

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>

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

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>

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

src/components/modal/join/modal.scss

@@ -2,4 +2,5 @@
 @import "../../../frameless";
 
 .mod-join {
+    width: 27.4375rem;
 }