From 8bc83fa13625c9c4c89bc11d615833c03bf27652 Mon Sep 17 00:00:00 2001 From: Ben Wheeler Date: Sun, 15 Sep 2019 17:05:47 -0400 Subject: [PATCH] move privacy message to below inputs; format color --- src/_colors.scss | 1 + src/components/info-button/info-button.scss | 2 +- src/components/join-flow/birthdate-step.jsx | 9 ++++++++- src/components/join-flow/email-step.jsx | 7 +++++++ src/components/join-flow/gender-step.jsx | 9 ++++++++- src/components/join-flow/join-flow-step.jsx | 6 ------ src/components/join-flow/join-flow-steps.scss | 15 +++++++++++++++ src/l10n.json | 5 ++--- static/svgs/info-button/info-button.svg | 2 +- 9 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/_colors.scss b/src/_colors.scss index 03ffef6f4..cc0d46c71 100644 --- a/src/_colors.scss +++ b/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; diff --git a/src/components/info-button/info-button.scss b/src/components/info-button/info-button.scss index 5daa65a26..c43117c11 100644 --- a/src/components/info-button/info-button.scss +++ b/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; diff --git a/src/components/join-flow/birthdate-step.jsx b/src/components/join-flow/birthdate-step.jsx index f722b50d6..9bdd7e770 100644 --- a/src/components/join-flow/birthdate-step.jsx +++ b/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" /> +
+ + +
); }} diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx index 3da7ef5f1..96f14b1d7 100644 --- a/src/components/join-flow/email-step.jsx +++ b/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} /> +
+ + +
+
+ + +
); }} diff --git a/src/components/join-flow/join-flow-step.jsx b/src/components/join-flow/join-flow-step.jsx index 467a9ab4b..301d8652a 100644 --- a/src/components/join-flow/join-flow-step.jsx +++ b/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 && ( - - )}
)} {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, diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index e4e71df6b..0b00b59cc 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/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 { diff --git a/src/l10n.json b/src/l10n.json index a88926612..a09efcb19 100644 --- a/src/l10n.json +++ b/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.", diff --git a/static/svgs/info-button/info-button.svg b/static/svgs/info-button/info-button.svg index 829bc9442..76edc37d8 100644 --- a/static/svgs/info-button/info-button.svg +++ b/static/svgs/info-button/info-button.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file