diff --git a/package-lock.json b/package-lock.json index 636680aed..a70ed6992 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15561,15 +15561,15 @@ } }, "scratch-gui": { - "version": "0.1.0-prerelease.20190912180550", - "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190912180550.tgz", - "integrity": "sha512-FPOuX1Za4vNAhOJfViEigGJ5t+dWzebgrUQWAvJDwrkhfKKHD2VE9vtaGH6H+6NNZIdW+2qcSqBPxutevdHlyA==", + "version": "0.1.0-prerelease.20190918163722", + "resolved": "https://registry.npmjs.org/scratch-gui/-/scratch-gui-0.1.0-prerelease.20190918163722.tgz", + "integrity": "sha512-2BM65eEvknpgrlkZgYP31H4v4rUsYuacY2NBBLwZ+zBScIsYMrfuxr2zPtvtxOkjYf9yH6TJef8/i/YZmPtfhw==", "dev": true }, "scratch-l10n": { - "version": "3.5.20190910223701", - "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190910223701.tgz", - "integrity": "sha512-WArZ1OZZz8KcTyEHcUnRJJE6gyh3CDcZ3KYxK8TNoHqzdLi+Gl/1QR/Xs+rJ1U587hnI2JLRfhFfvVPwsdmZag==", + "version": "3.5.20190917223712", + "resolved": "https://registry.npmjs.org/scratch-l10n/-/scratch-l10n-3.5.20190917223712.tgz", + "integrity": "sha512-kWkeUD5An4RwbAVZU7OUqS25D1rrdI73ZYhNn3tQhGu545JaITZf37AvVQW4DyZU+wFHQ1G30nWls7bXZLEPbA==", "dev": true, "requires": { "@babel/cli": "^7.1.2", diff --git a/package.json b/package.json index 4b1735e83..cd265563a 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "redux-mock-store": "^1.2.3", "redux-thunk": "2.0.1", "sass-loader": "6.0.6", - "scratch-gui": "0.1.0-prerelease.20190912180550", + "scratch-gui": "0.1.0-prerelease.20190918163722", "scratch-l10n": "latest", "selenium-webdriver": "3.6.0", "slick-carousel": "1.6.0", 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/footer/conference/2016/footer.jsx b/src/components/footer/conference/2016/footer.jsx index ceee35eab..72de94201 100644 --- a/src/components/footer/conference/2016/footer.jsx +++ b/src/components/footer/conference/2016/footer.jsx @@ -103,9 +103,6 @@ const ConferenceFooter = () => ( -

- Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab. -

diff --git a/src/components/footer/conference/2017/footer.jsx b/src/components/footer/conference/2017/footer.jsx index d4cac9e68..a75e2ca44 100644 --- a/src/components/footer/conference/2017/footer.jsx +++ b/src/components/footer/conference/2017/footer.jsx @@ -46,9 +46,6 @@ const ConferenceFooter = props => ( -

- -

diff --git a/src/components/footer/conference/2018/footer.jsx b/src/components/footer/conference/2018/footer.jsx index d87e4bad9..5cef2bde2 100644 --- a/src/components/footer/conference/2018/footer.jsx +++ b/src/components/footer/conference/2018/footer.jsx @@ -145,9 +145,6 @@ const ConferenceFooter = props => ( -

- -

diff --git a/src/components/footer/conference/2019/footer.jsx b/src/components/footer/conference/2019/footer.jsx index 82447b071..ab27b268f 100644 --- a/src/components/footer/conference/2019/footer.jsx +++ b/src/components/footer/conference/2019/footer.jsx @@ -49,9 +49,6 @@ const ConferenceFooter = props => ( -

- -

diff --git a/src/components/footer/www/footer.jsx b/src/components/footer/www/footer.jsx index c6018f70a..ad5f4c4b9 100644 --- a/src/components/footer/www/footer.jsx +++ b/src/components/footer/www/footer.jsx @@ -209,12 +209,6 @@ const Footer = props => (
- -
-

- -

-
); diff --git a/src/components/formik-forms/formik-input.jsx b/src/components/formik-forms/formik-input.jsx index e1287b2d7..7f161e3ad 100644 --- a/src/components/formik-forms/formik-input.jsx +++ b/src/components/formik-forms/formik-input.jsx @@ -27,7 +27,7 @@ const FormikInput = ({ > ([ - {value: 'null', label: intl.formatMessage({id: 'general.month'})}, + {value: 'null', label: intl.formatMessage({id: 'general.month'}), disabled: true}, {value: '1', label: intl.formatMessage({id: 'general.monthJanuary'})}, {value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})}, {value: '3', label: intl.formatMessage({id: 'general.monthMarch'})}, @@ -35,7 +37,8 @@ const getBirthYearOptions = intl => { .map((defaultVal, i) => ( {value: String(curYear - i), label: String(curYear - i)} )); - birthYearOptions.unshift({ + birthYearOptions.unshift({ // set placeholder as first option + disabled: true, value: 'null', label: intl.formatMessage({id: 'general.year'}) }); @@ -86,12 +89,10 @@ class BirthDateStep extends React.Component { } = props; return ( @@ -133,6 +134,12 @@ class BirthDateStep extends React.Component { validationClassName="validation-birthdate-year" />
+
+ + +
); }} diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx index a99f10506..9d44379fe 100644 --- a/src/components/join-flow/country-step.jsx +++ b/src/components/join-flow/country-step.jsx @@ -28,7 +28,7 @@ class CountryStep extends React.Component { setCountryOptions () { if (this.countryOptions.length === 0) { this.countryOptions = [...countryData.registrationCountryOptions]; - this.countryOptions.unshift({ + this.countryOptions.unshift({ // add placeholder as first option disabled: true, label: this.props.intl.formatMessage({id: 'general.country'}), value: 'null' @@ -68,11 +68,10 @@ class CountryStep extends React.Component { } = props; return ( diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx index 3da7ef5f1..f2d1e42a3 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'); @@ -130,7 +131,6 @@ class EmailStep extends React.Component { } = props; return ( @@ -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..d26e35d03 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,10 +15,10 @@ const JoinFlowStep = ({ descriptionClassName, footerContent, headerImgSrc, - infoMessage, nextButton, onSubmit, title, + titleClassName, waiting }) => (
@@ -41,7 +40,10 @@ const JoinFlowStep = ({ > {title && ( )} @@ -53,23 +55,22 @@ const JoinFlowStep = ({ )} > {description} - {infoMessage && ( - - )}
)} {children}
- {footerContent && ( -
- {footerContent} -
- )} - +
+ {footerContent && ( +
+ {footerContent} +
+ )} + +
); @@ -80,11 +81,11 @@ 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, title: PropTypes.string, + titleClassName: PropTypes.string, waiting: PropTypes.bool }; diff --git a/src/components/join-flow/join-flow-step.scss b/src/components/join-flow/join-flow-step.scss index 1b13cbec6..5c27e4253 100644 --- a/src/components/join-flow/join-flow-step.scss +++ b/src/components/join-flow/join-flow-step.scss @@ -50,7 +50,7 @@ .join-flow-footer-message { width: 100%; - padding: 1.125rem 1.5rem 1.125rem; + padding: 0.875rem 1.5rem; background-color: $ui-blue-25percent; font-size: .75rem; font-weight: 600; diff --git a/src/components/join-flow/join-flow-steps.scss b/src/components/join-flow/join-flow-steps.scss index e4e71df6b..abddb3b99 100644 --- a/src/components/join-flow/join-flow-steps.scss +++ b/src/components/join-flow/join-flow-steps.scss @@ -66,11 +66,12 @@ .select .join-flow-select { height: 3.5rem; + margin-bottom: 0; // override default for select + padding-right: 3.25rem; background-color: white; border-color: $box-shadow-light-gray; font-size: 1rem; font-weight: 500; - padding-right: 3.25rem; } .select .join-flow-select-month { @@ -96,6 +97,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; } @@ -113,23 +121,31 @@ } .join-flow-inner-country-step { - padding-top: 1rem; - padding-bottom: 2rem; + padding-top: 0; + padding-bottom: 2.5rem; } .join-flow-inner-email-step { - padding-top: 3rem; + padding-top: 1.25rem; + padding-bottom: 0; + min-height: 16.625rem; } .join-flow-inner-welcome-step { - padding-top: 3rem; + padding-top: 0; + padding-bottom: 1rem; } -.join-flow-birthdate-description { - margin-top: 1.25rem; - margin-right: -.5rem; +.join-flow-birthdate-title { + margin-bottom: 2.875rem; +} + +.join-flow-email-title { margin-bottom: 2rem; - margin-left: -.5rem; +} + +.join-flow-email-privacy { + margin-top: 0; } .join-flow-registration-error { @@ -141,8 +157,21 @@ margin-bottom: 1.25rem; } -.join-flow-country-description { - margin-top: 1rem; +.join-flow-gender-privacy { + margin-top: .5rem; +} + +.join-flow-country-title { + margin-top: 0; + margin-bottom: 1.75rem; +} + +.join-flow-welcome-title { + margin-bottom: .25rem; +} + +.join-flow-welcome-description { + margin-bottom: 1.25rem; } .gender-radio-row { @@ -178,7 +207,7 @@ .join-flow-email-checkbox-row { font-size: .75rem; - margin: .25rem .125rem; + margin: 1.5rem .125rem .25rem; } a.join-flow-link:link, a.join-flow-link:visited, a.join-flow-link:active { diff --git a/src/components/join-flow/join-flow.jsx b/src/components/join-flow/join-flow.jsx index 93554102d..6b18d6a40 100644 --- a/src/components/join-flow/join-flow.jsx +++ b/src/components/join-flow/join-flow.jsx @@ -137,9 +137,9 @@ class JoinFlow extends React.Component { ) : ( + - diff --git a/src/l10n.json b/src/l10n.json index a88926612..9b9032b7a 100644 --- a/src/l10n.json +++ b/src/l10n.json @@ -16,8 +16,6 @@ "general.downloadPDF": "Download PDF", "general.emailUs": "Email Us", "general.conferences": "Conferences", - "general.copyright": "Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab", - "general.copyrightDraft": "Scratch is a project of the Scratch Foundation in collaboration with the Lifelong Kindergarten Group at the MIT Media Lab.", "general.country": "Country", "general.create": "Create", "general.credits": "Credits", @@ -154,7 +152,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:", @@ -165,12 +162,12 @@ "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.emailStepInfo": "This will help if you forget your password, or if you want to receive email updates. This information will not be made public on your account.", "registration.goToClass": "Go to Class", "registration.invitedBy": "invited by", "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account", @@ -185,7 +182,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 diff --git a/test/unit/components/email-step.test.jsx b/test/unit/components/email-step.test.jsx index 88af9b8b2..b49ae09c6 100644 --- a/test/unit/components/email-step.test.jsx +++ b/test/unit/components/email-step.test.jsx @@ -25,12 +25,12 @@ describe('EmailStep test', () => { // Dive to get past the anonymous component. const joinFlowWrapper = formikWrapper.dive().find(JoinFlowStep); expect(joinFlowWrapper).toHaveLength(1); - expect(joinFlowWrapper.props().description).toBe('registration.emailStepDescription'); expect(joinFlowWrapper.props().footerContent.props.id).toBe('registration.acceptTermsOfUse'); expect(joinFlowWrapper.props().headerImgSrc).toBe('/images/join-flow/email-header.png'); expect(joinFlowWrapper.props().innerClassName).toBe('join-flow-inner-email-step'); expect(joinFlowWrapper.props().nextButton).toBe('registration.createAccount'); expect(joinFlowWrapper.props().title).toBe('registration.emailStepTitle'); + expect(joinFlowWrapper.props().titleClassName).toBe('join-flow-email-title'); expect(joinFlowWrapper.props().waiting).toBe(true); });