format next button, use correct strings

src/components/join-flow/join-flow-step.jsx

@@ -11,6 +11,7 @@ const JoinFlowStep = ({
     children,
     description,
     headerImgSrc,
+    nextButton,
     onSubmit,
     title,
     waiting
@@ -37,7 +38,10 @@ const JoinFlowStep = ({
                 {children}
             </ModalInnerContent>
         </div>
-        <NextStepButton waiting={waiting} />
+        <NextStepButton
+            content={nextButton}
+            waiting={waiting}
+        />
     </form>
 );
 
@@ -45,6 +49,7 @@ JoinFlowStep.propTypes = {
     children: PropTypes.node,
     description: PropTypes.string,
     headerImgSrc: PropTypes.string,
+    nextButton: PropTypes.node,
     onSubmit: PropTypes.func,
     title: PropTypes.string,
     waiting: PropTypes.bool

src/components/join-flow/join-flow-steps.scss

@@ -55,3 +55,9 @@
     display: flex;
     margin: 0 auto;
 }
+
+.join-flow-next-button-arrow {
+    width: 2rem;
+    height: 2rem;
+    margin-left: .5rem;
+}

src/components/join-flow/next-step-button.jsx

@@ -19,8 +19,8 @@ const NextStepButton = props => (
         {props.waiting ?
             <Spinner /> : (
                 <ModalTitle
-                    className="next-step-title-large"
-                    title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
+                    className="next-step-title"
+                    title={props.content ? props.content : props.intl.formatMessage({id: 'general.next'})}
                 />
             )
         }
@@ -28,8 +28,8 @@ const NextStepButton = props => (
 );
 
 NextStepButton.propTypes = {
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     intl: intl.intlShape,
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     waiting: PropTypes.bool
 };
 

src/components/join-flow/next-step-button.scss

@@ -10,6 +10,9 @@
     background-color: $ui-orange;
 }
 
-.next-step-title-large {
+.next-step-title {
     font-size: 1.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

src/components/join-flow/welcome-step.jsx

@@ -2,6 +2,7 @@ const bindAll = require('lodash.bindall');
 const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
+const FormattedMessage = require('react-intl').FormattedMessage;
 const {injectIntl, intlShape} = require('react-intl');
 
 const JoinFlowStep = require('./join-flow-step.jsx');
@@ -44,6 +45,15 @@ class WelcomeStep extends React.Component {
                                 id: 'registration.welcomeStepDescriptionNonEducator'
                             })}
                             headerImgSrc="/images/hoc/getting-started.jpg"
+                            nextButton={
+                                <React.Fragment>
+                                    <FormattedMessage id="registration.makeProject" />
+                                    <img
+                                        className="join-flow-next-button-arrow"
+                                        src="/svgs/project/r-arrow.svg"
+                                    />
+                                </React.Fragment>
+                            }
                             title={`${this.props.intl.formatMessage(
                                 {id: 'registration.welcomeStepTitleNonEducator'},
                                 {username: this.props.username}

src/components/modal/base/modal-title.jsx

@@ -20,7 +20,7 @@ const ModalTitle = ({
 
 ModalTitle.propTypes = {
     className: PropTypes.string,
-    title: PropTypes.string
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
 module.exports = ModalTitle;

src/l10n.json

@@ -56,6 +56,7 @@
     "general.myClass": "My Class",
     "general.myClasses": "My Classes",
     "general.myStuff": "My Stuff",
+    "general.next": "Next",
     "general.noDeletionTitle": "Your Account Will Not Be Deleted",
     "general.noDeletionDescription": "Your account was scheduled for deletion but you logged in. Your account has been reactivated. If you didn’t request for your account to be deleted, you should {resetLink} to make sure your account is secure.",
     "general.noDeletionLink": "change your password",
@@ -158,6 +159,7 @@
     "registration.invitedBy": "invited by",
     "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
     "registration.lastStepDescription": "We are currently processing your application. ",
+    "registration.makeProject": "Make a Project",
     "registration.mustBeNewStudent": "You must be a new student to complete your registration",
     "registration.nameStepTooltip": "This information is used for verification and to aggregate usage statistics.",
     "registration.newPassword": "New Password",