move privacy message to below inputs; format color

src/_colors.scss

@@ -56,6 +56,7 @@ $transparent-light-blue: rgba(229, 240, 254, 0);
 $header-gray: hsla(225, 15, 40, 1); //#575E75
 $type-gray: hsla(225, 15, 40, 1); //#575E75
 $type-gray-75percent: hsla(225, 15, 40, .75);
+$type-gray-60percent: hsla(225, 15, 40, .6);
 $type-white: hsla(0, 100, 100, 1); //#FFF
 
 $link-blue: $ui-blue;

src/components/info-button/info-button.scss

@@ -8,7 +8,7 @@
     height: 1rem;
     margin-left: .375rem;
     border-radius: 50%;
-    background-color: $ui-blue;
+    background-color: $type-gray-60percent;
     background-image: url("/svgs/info-button/info-button.svg");
     background-size: cover;
     top: .125rem;

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

@@ -4,9 +4,11 @@ const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
 const {injectIntl, intlShape} = require('react-intl');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const FormikSelect = require('../../components/formik-forms/formik-select.jsx');
 const JoinFlowStep = require('./join-flow-step.jsx');
+const InfoButton = require('../info-button/info-button.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -89,7 +91,6 @@ class BirthDateStep extends React.Component {
                             description={this.props.intl.formatMessage({id: 'registration.private'})}
                             descriptionClassName="join-flow-birthdate-description"
                             headerImgSrc="/images/join-flow/birthdate-header.png"
-                            infoMessage={this.props.intl.formatMessage({id: 'registration.birthDateStepInfo'})}
                             innerClassName="join-flow-inner-birthdate-step"
                             title={this.props.intl.formatMessage({id: 'registration.birthDateStepTitle'})}
                             waiting={isSubmitting}
@@ -133,6 +134,12 @@ class BirthDateStep extends React.Component {
                                     validationClassName="validation-birthdate-year"
                                 />
                             </div>
+                            <div className="join-flow-privacy-message join-flow-birthdate-privacy">
+                                <FormattedMessage id="registration.private" />
+                                <InfoButton
+                                    message={this.props.intl.formatMessage({id: 'registration.birthDateStepInfo'})}
+                                />
+                            </div>
                         </JoinFlowStep>
                     );
                 }}

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

@@ -10,6 +10,7 @@ const validate = require('../../lib/validate');
 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');
+const InfoButton = require('../info-button/info-button.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -176,6 +177,12 @@ class EmailStep extends React.Component {
                                 /* eslint-enable react/jsx-no-bind */
                                 onSetRef={this.handleSetEmailRef}
                             />
+                            <div className="join-flow-privacy-message join-flow-email-privacy">
+                                <FormattedMessage id="registration.private" />
+                                <InfoButton
+                                    message={this.props.intl.formatMessage({id: 'registration.emailStepInfo'})}
+                                />
+                            </div>
                             <div className="join-flow-email-checkbox-row">
                                 <FormikCheckbox
                                     id="subscribeCheckbox"

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

@@ -4,9 +4,11 @@ const React = require('react');
 const PropTypes = require('prop-types');
 import {Formik} from 'formik';
 const {injectIntl, intlShape} = require('react-intl');
+const FormattedMessage = require('react-intl').FormattedMessage;
 
 const FormikRadioButton = require('../../components/formik-forms/formik-radio-button.jsx');
 const JoinFlowStep = require('./join-flow-step.jsx');
+const InfoButton = require('../info-button/info-button.jsx');
 
 require('./join-flow-steps.scss');
 
@@ -91,7 +93,6 @@ class GenderStep extends React.Component {
                         <JoinFlowStep
                             description={this.props.intl.formatMessage({id: 'registration.genderStepDescription'})}
                             descriptionClassName="join-flow-gender-description"
-                            infoMessage={this.props.intl.formatMessage({id: 'registration.genderStepInfo'})}
                             innerClassName="join-flow-inner-gender-step"
                             title={this.props.intl.formatMessage({id: 'registration.genderStepTitle'})}
                             waiting={isSubmitting}
@@ -157,6 +158,12 @@ class GenderStep extends React.Component {
                                 value="Prefer not to say"
                                 onSetFieldValue={setFieldValue}
                             />
+                            <div className="join-flow-privacy-message join-flow-gender-privacy">
+                                <FormattedMessage id="registration.private" />
+                                <InfoButton
+                                    message={this.props.intl.formatMessage({id: 'registration.genderStepInfo'})}
+                                />
+                            </div>
                         </JoinFlowStep>
                     );
                 }}

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

@@ -5,7 +5,6 @@ const PropTypes = require('prop-types');
 const NextStepButton = require('./next-step-button.jsx');
 const ModalTitle = require('../modal/base/modal-title.jsx');
 const ModalInnerContent = require('../modal/base/modal-inner-content.jsx');
-const InfoButton = require('../info-button/info-button.jsx');
 
 require('./join-flow-step.scss');
 
@@ -16,7 +15,6 @@ const JoinFlowStep = ({
     descriptionClassName,
     footerContent,
     headerImgSrc,
-    infoMessage,
     nextButton,
     onSubmit,
     title,
@@ -53,9 +51,6 @@ const JoinFlowStep = ({
                             )}
                         >
                             {description}
-                            {infoMessage && (
-                                <InfoButton message={infoMessage} />
-                            )}
                         </div>
                     )}
                     {children}
@@ -80,7 +75,6 @@ JoinFlowStep.propTypes = {
     descriptionClassName: PropTypes.string,
     footerContent: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     headerImgSrc: PropTypes.string,
-    infoMessage: PropTypes.string,
     innerClassName: PropTypes.string,
     nextButton: PropTypes.node,
     onSubmit: PropTypes.func,

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

@@ -96,6 +96,13 @@
     margin: 0 auto;
 }
 
+.join-flow-privacy-message {
+    margin: 1rem auto;
+    font-size: .75rem;
+    font-weight: 500;
+    color: $type-gray-60percent;
+}
+
 .join-flow-inner-username-step {
     padding-top: 2.75rem;
 }
@@ -132,6 +139,10 @@
     margin-left: -.5rem;
 }
 
+.join-flow-email-privacy {
+    margin-top: 0;
+}
+
 .join-flow-registration-error {
     padding-top: 5.5rem;
 }
@@ -143,6 +154,10 @@
 
 .join-flow-country-description {
     margin-top: 1rem;
+.join-flow-gender-privacy {
+    margin-top: .5rem;
+}
+
 }
 
 .gender-radio-row {

src/l10n.json

@@ -165,12 +165,11 @@
     "registration.createAccount": "Create Your Account",
     "registration.createUsername": "Create a username",
     "registration.genderStepTitle": "What's your gender?",
-    "registration.genderStepDescription": "Scratch welcomes people of all genders. We will always keep this information private.",
+    "registration.genderStepDescription": "Scratch welcomes people of all genders.",
     "registration.genderStepInfo": "This helps us understand who uses Scratch, so that we can broaden participation. This information will not be made public on your account.",
     "registration.genderOptionAnother": "Another gender:",
     "registration.genderOptionPreferNotToSay": "Prefer not to say",
     "registration.emailStepTitle": "What's your email?",
-    "registration.emailStepDescription": "We need this to finish creating your account. Scratch will always keep this information private.",
     "registration.goToClass": "Go to Class",
     "registration.invitedBy": "invited by",
     "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
@@ -185,7 +184,7 @@
     "registration.passwordAdviceShort": "Write it down so you remember. Don’t share it with others!",
     "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.private": "We will 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.",

static/svgs/info-button/info-button.svg

@@ -1 +1 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0" fill="#4794FF"/><path d="M9.988 13.388a1.33 1.33 0 1 1-.001 2.662 1.33 1.33 0 0 1 .001-2.662zm2.68-8.768c.83.53 1.335 1.347 1.418 2.305.084.97-.28 1.95-.949 2.56-.596.543-1.148.852-1.59 1.101-.698.39-.698.41-.698.772 0 .553-.014 1.002-1.002 1.002-.918 0-1.002-.449-1.002-1.002 0-1.559.956-2.092 1.722-2.52.391-.22.795-.445 1.22-.833.176-.16.335-.523.302-.906-.029-.332-.196-.597-.496-.788-.845-.537-2.063-.325-2.869.195-.985.637-.819 1.547-1.755 1.291-1.062-.29-.915-1-.529-1.697.418-.756 1.117-1.317 1.898-1.662 1.471-.65 3.13-.58 4.33.182z" fill="#FFF"/></g></svg>
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><g fill-rule="evenodd"><path d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0" fill="#9a9eac"/><path d="M10 13.39a1.33 1.33 0 1 1-1.33 1.33A1.33 1.33 0 0 1 10 13.39zm2.68-8.77a3 3 0 0 1 1.42 2.31 3.15 3.15 0 0 1-.95 2.56 8.37 8.37 0 0 1-1.59 1.1c-.7.39-.7.41-.7.77 0 .55 0 1-1 1s-1-.45-1-1a2.65 2.65 0 0 1 1.72-2.52A6.61 6.61 0 0 0 11.79 8a1.22 1.22 0 0 0 .3-.91 1 1 0 0 0-.5-.79 2.8 2.8 0 0 0-2.87.2c-.98.64-.81 1.55-1.72 1.3s-.92-1-.53-1.7a3.94 3.94 0 0 1 1.9-1.66 4.67 4.67 0 0 1 4.3.18z" fill="#fff"/></g></svg>