From 31d8189e54f9ebef6ba72ea04f924ce70fb9a8eb Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Sun, 15 Sep 2019 17:11:43 -0400
Subject: [PATCH] =?UTF-8?q?format=20each=20join=20flow=20title=E2=80=99s?=
 =?UTF-8?q?=20padding=20differently?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/join-flow/birthdate-step.jsx   |  1 +
 src/components/join-flow/country-step.jsx     |  1 +
 src/components/join-flow/email-step.jsx       |  1 +
 src/components/join-flow/join-flow-step.jsx   |  7 ++++++-
 src/components/join-flow/join-flow-steps.scss | 11 +++++++++++
 src/l10n.json                                 |  1 -
 6 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx
index 81316fb71..5f098bffc 100644
--- a/src/components/join-flow/birthdate-step.jsx
+++ b/src/components/join-flow/birthdate-step.jsx
@@ -91,6 +91,7 @@ class BirthDateStep extends React.Component {
                             headerImgSrc="/images/join-flow/birthdate-header.png"
                             innerClassName="join-flow-inner-birthdate-step"
                             title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}
+                            titleClassName="join-flow-birthdate-title"
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
                         >
diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx
index f5f2c5e80..fbe53a7c4 100644
--- a/src/components/join-flow/country-step.jsx
+++ b/src/components/join-flow/country-step.jsx
@@ -71,6 +71,7 @@ class CountryStep extends React.Component {
                             headerImgSrc="/images/join-flow/country-header.png"
                             innerClassName="join-flow-inner-country-step"
                             title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}
+                            titleClassName="join-flow-country-title"
                             waiting={isSubmitting}
                             onSubmit={handleSubmit}
                         >
diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index 268b782b3..f2d1e42a3 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/src/components/join-flow/email-step.jsx
@@ -151,6 +151,7 @@ class EmailStep extends React.Component {
                             innerClassName="join-flow-inner-email-step"
                             nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
                             title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
+                            titleClassName="join-flow-email-title"
                             waiting={this.props.waiting || isSubmitting || this.state.captchaIsLoading}
                             onSubmit={handleSubmit}
                         >
diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx
index 301d8652a..27ff6afa8 100644
--- a/src/components/join-flow/join-flow-step.jsx
+++ b/src/components/join-flow/join-flow-step.jsx
@@ -18,6 +18,7 @@ const JoinFlowStep = ({
     nextButton,
     onSubmit,
     title,
+    titleClassName,
     waiting
 }) => (
     <form onSubmit={onSubmit}>
@@ -39,7 +40,10 @@ const JoinFlowStep = ({
                 >
                     {title && (
                         <ModalTitle
-                            className="join-flow-title"
+                            className={classNames(
+                                'join-flow-title',
+                                titleClassName
+                            )}
                             title={title}
                         />
                     )}
@@ -79,6 +83,7 @@ JoinFlowStep.propTypes = {
     nextButton: PropTypes.node,
     onSubmit: PropTypes.func,
     title: PropTypes.string,
+    titleClassName: PropTypes.string,
     waiting: PropTypes.bool
 };
 
diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss
index b7ac979e8..59075f9f5 100644
--- a/src/components/join-flow/join-flow-steps.scss
+++ b/src/components/join-flow/join-flow-steps.scss
@@ -133,6 +133,10 @@
     padding-top: 3rem;
 }
 
+.join-flow-birthdate-title {
+    margin-bottom: 2.875rem;
+}
+
 .join-flow-birthdate-description {
     margin-top: 1.25rem;
     margin-right: -.5rem;
@@ -140,6 +144,10 @@
     margin-left: -.5rem;
 }
 
+.join-flow-email-title {
+    margin-bottom: 2rem;
+}
+
 .join-flow-email-privacy {
     margin-top: 0;
 }
@@ -157,6 +165,9 @@
     margin-top: .5rem;
 }
 
+.join-flow-country-title {
+    margin-top: 0;
+    margin-bottom: 1.75rem;
 }
 
 .gender-radio-row {
diff --git a/src/l10n.json b/src/l10n.json
index a09efcb19..dbe3875ff 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -154,7 +154,6 @@
     "registration.choosePasswordStepTitle": "Create a password",
     "registration.choosePasswordStepTooltip": "Don't use your name or anything that's easy for someone else to guess.",
     "registration.classroomApiGeneralError": "Sorry, we could not find the registration information for this class",
-    "registration.countryStepDescription": "We’ll display your country on your profile.",
     "registration.countryStepTitle": "What country do you live in?",
     "registration.generalError": "Sorry, an unexpected error occurred.",
     "registration.classroomInviteExistingStudentStepDescription": "you have been invited to join the class:",