added email subscribe checkbox

src/components/formik-forms/formik-checkbox.scss

@@ -1,9 +1,5 @@
 @import "../../colors";
 
-.formik-checkbox-label {
-    font-weight: 300;
-}
-
 input[type="checkbox"].formik-checkbox {
     display: block;
     float: left;
@@ -14,16 +10,12 @@ input[type="checkbox"].formik-checkbox {
     height: 1.25rem;
     appearance: none;
 
-    &:focus:checked {
-        transition: all .5s ease;
+    &:focus {
+        transition: all .25s ease;
         outline: none;
         box-shadow: 0 0 0 .25rem $ui-blue-25percent;
     }
 
-    &:focus:not(:checked) {
-        outline: none;
-    }
-
     &:checked {
         background-color: $ui-blue;
         text-align: center;

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

@@ -9,6 +9,7 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 
 const JoinFlowStep = require('./join-flow-step.jsx');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
+const FormikCheckbox = require('../../components/formik-forms/formik-checkbox.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -97,6 +98,13 @@ class EmailStep extends React.Component {
                                 onFocus={() => setFieldError('email', null)}
                                 /* eslint-enable react/jsx-no-bind */
                             />
+                            <div className="join-flow-email-checkbox-row">
+                                <FormikCheckbox
+                                    id="subscribeCheckbox"
+                                    label={this.props.intl.formatMessage({id: 'registration.receiveEmails'})}
+                                    name="subscribe"
+                                />
+                            </div>
                         </JoinFlowStep>
                     );
                 }}

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

@@ -129,6 +129,15 @@
     margin-left: .5rem;
 }
 
+.modal-inner-content-email {
+    padding-top: 2.9rem;
+}
+
+.join-flow-email-checkbox-row {
+    font-size: .75rem;
+    margin: .25rem .125rem;
+}
+
 a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active {
     text-decoration: underline;
 }

src/l10n.json

@@ -182,6 +182,7 @@
     "registration.personalStepTitle": "Personal Information",
     "registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
     "registration.private": "Scratch will always keep this information private.",
+    "registration.receiveEmails": "I'd like to receive emails from the Scratch Team about project ideas, events, and more.",
     "registration.selectCountry": "select country",
     "registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",
     "registration.showPassword": "Show password",