From a85ad87028fe1a53920517e2e1a21c89efc349a6 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Mon, 15 Jul 2019 12:50:43 -0400
Subject: [PATCH] Improve formatting of join flow title, description, next step
 button

---
 src/components/join-flow/join-flow-step.jsx   |  8 +-
 src/components/join-flow/join-flow-step.scss  |  7 ++
 src/components/join-flow/join-flow-steps.jsx  | 98 +++++++++++--------
 src/components/join-flow/join-flow-steps.scss | 27 +++++
 src/components/join-flow/next-step-button.jsx |  1 +
 .../join-flow/next-step-button.scss           |  2 +-
 src/components/modal/base/modal-title.scss    |  4 +
 7 files changed, 99 insertions(+), 48 deletions(-)
 create mode 100644 src/components/join-flow/join-flow-steps.scss

diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index eeda3d102..6ce43ac83 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/src/components/join-flow/join-flow-step.jsx
@@ -24,11 +24,9 @@ const JoinFlowStep = ({
                     />
                 )}
                 {description && (
-                    <p>
-                        <span>
-                            {description}
-                        </span>
-                    </p>
+                    <div className="join-flow-description">
+                        {description}
+                    </div>
                 )}
                 {children}
             </ModalInnerContent>
diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss
index f361dbe0c..187470eac 100644
--- a/src/components/join-flow/join-flow-step.scss
+++ b/src/components/join-flow/join-flow-step.scss
@@ -6,6 +6,13 @@
     font-size: 1.875rem;
 }
 
+.join-flow-description {
+    font-size: .875rem;
+    font-weight: bold;
+    margin-bottom: 1.875rem;
+    text-align: center;
+}
+
 .join-flow-inner-content {
     box-shadow: none;
     width: calc(100% - 5.875rem);
diff --git a/src/components/join-flow/join-flow-steps.jsx b/src/components/join-flow/join-flow-steps.jsx
index 8c22d673c..1a03396dd 100644
--- a/src/components/join-flow/join-flow-steps.jsx
+++ b/src/components/join-flow/join-flow-steps.jsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 const bindAll = require('lodash.bindall');
+const classNames = require('classnames');
 const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
@@ -114,57 +115,70 @@ class UsernameStep extends React.Component {
                             onSubmit={handleSubmit}
                         >
                             <div>
-                                <div>
-                                    <b>
-                                        {this.props.intl.formatMessage({id: 'registration.createUsername'})}
-                                    </b>
+                                <div className="join-flow-input-title">
+                                    {this.props.intl.formatMessage({id: 'registration.createUsername'})}
                                 </div>
                                 <FormikInput
-                                    className={errors.username ? 'fail' : ''}
+                                    className={classNames(
+                                        'join-flow-input',
+                                        {fail: errors.username}
+                                    )}
                                     error={errors.username}
                                     id="username"
                                     name="username"
                                     validate={this.validateUsernameIfPresent}
                                     onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind
                                 />
-                                <b>
-                                    {this.props.intl.formatMessage({id: 'general.password'})}
-                                </b>
-                                <div
-                                    onClick={this.handleChangeShowPassword}
-                                >
-                                    {/* TODO: should localize 'Hide password' if we use that */}
-                                    {this.state.showPassword ? 'Hide password' : (
-                                        this.props.intl.formatMessage({id: 'registration.showPassword'})
-                                    )}
+                                <div className="join-flow-password-section">
+                                    <div className="join-flow-input-title">
+                                        {this.props.intl.formatMessage({id: 'general.password'})}
+                                    </div>
+                                    <FormikInput
+                                        className={classNames(
+                                            'join-flow-input',
+                                            {fail: errors.password}
+                                        )}
+                                        error={errors.password}
+                                        id="password"
+                                        name="password"
+                                        type={this.state.showPassword ? 'text' : 'password'}
+                                        validate={this.validatePasswordIfPresent}
+                                        validationClassName="validation-full-width-input"
+                                        /* eslint-disable react/jsx-no-bind */
+                                        onBlur={() => validateField('password')}
+                                        /* eslint-enable react/jsx-no-bind */
+                                    />
+                                    <FormikInput
+                                        className={classNames(
+                                            'join-flow-input',
+                                            {fail: errors.passwordConfirm}
+                                        )}
+                                        error={errors.passwordConfirm}
+                                        id="passwordConfirm"
+                                        name="passwordConfirm"
+                                        type={this.state.showPassword ? 'text' : 'password'}
+                                        /* eslint-disable react/jsx-no-bind */
+                                        validate={() =>
+                                            this.validatePasswordConfirmIfPresent(values.password,
+                                                values.passwordConfirm)
+                                        }
+                                        validationClassName="validation-full-width-input"
+                                        onBlur={() =>
+                                            validateField('passwordConfirm')
+                                        }
+                                        /* eslint-enable react/jsx-no-bind */
+                                    />
+                                    <div className="join-flow-input-title">
+                                        <div
+                                            onClick={this.handleChangeShowPassword}
+                                        >
+                                            {/* TODO: should localize 'Hide password' if we use that */}
+                                            {this.state.showPassword ? 'Hide password' : (
+                                                this.props.intl.formatMessage({id: 'registration.showPassword'})
+                                            )}
+                                        </div>
+                                    </div>
                                 </div>
-                                <FormikInput
-                                    className={errors.password ? 'fail' : ''}
-                                    error={errors.password}
-                                    id="password"
-                                    name="password"
-                                    type={this.state.showPassword ? 'text' : 'password'}
-                                    validate={this.validatePasswordIfPresent}
-                                    onBlur={() => validateField('password')} // eslint-disable-line react/jsx-no-bind
-                                />
-                                <b>
-                                    {this.props.intl.formatMessage({id: 'general.error'})}
-                                </b>
-                                <FormikInput
-                                    className={errors.passwordConfirm ? 'fail' : ''}
-                                    error={errors.passwordConfirm}
-                                    id="passwordConfirm"
-                                    name="passwordConfirm"
-                                    type={this.state.showPassword ? 'text' : 'password'}
-                                    /* eslint-disable react/jsx-no-bind */
-                                    validate={() =>
-                                        this.validatePasswordConfirmIfPresent(values.password, values.passwordConfirm)
-                                    }
-                                    onBlur={() =>
-                                        validateField('passwordConfirm')
-                                    }
-                                    /* eslint-enable react/jsx-no-bind */
-                                />
                             </div>
                         </JoinFlowStep>
                     );
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
new file mode 100644
index 000000000..7b7e42fd9
--- /dev/null
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -0,0 +1,27 @@
+@import "../../colors";
+@import "../../frameless";
+
+.join-flow-input {
+    width: 100%;
+    height: 2.75rem;
+    border-radius: .5rem;
+    background-color: $ui-white;
+    margin-bottom: .5rem;
+
+    &:focus {
+        box-shadow: 0 0 0 .25rem $ui-blue-25percent;
+    }
+}
+
+.join-flow-input-title {
+    font-weight: bold;
+    margin-bottom: .5rem;
+}
+
+.validation-full-width-input {
+    transform: translate(21.5625rem, 0);
+}
+
+.join-flow-password-section {
+    margin-top: 1.125rem;
+}
diff --git a/src/components/join-flow/next-step-button.jsx b/src/components/join-flow/next-step-button.jsx
index a4e730b41..472a1ee8c 100644
--- a/src/components/join-flow/next-step-button.jsx
+++ b/src/components/join-flow/next-step-button.jsx
@@ -19,6 +19,7 @@ const NextStepButton = props => (
         {props.waiting ?
             <Spinner /> : (
                 <ModalTitle
+                    className="modal-title-large"
                     title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
                 />
             )
diff --git a/src/components/join-flow/next-step-button.scss b/src/components/join-flow/next-step-button.scss
index 7702fbdf0..7a388b9c0 100644
--- a/src/components/join-flow/next-step-button.scss
+++ b/src/components/join-flow/next-step-button.scss
@@ -6,6 +6,6 @@
     width: 100%;
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
-    height: 4rem;
+    height: 5.1875rem;
     background-color: $ui-orange;
 }
diff --git a/src/components/modal/base/modal-title.scss b/src/components/modal/base/modal-title.scss
index fcfd9c868..456639142 100644
--- a/src/components/modal/base/modal-title.scss
+++ b/src/components/modal/base/modal-title.scss
@@ -8,3 +8,7 @@
     font-size: 1rem;
     font-weight: bold;
 }
+
+.modal-title-large {
+    font-size: 1.25rem;
+}