format each join flow title’s padding differently

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

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

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

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

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 {

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:",