scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #3359 from benjiwheeler/join-flow-placeholder-fixes

Browse source 
Join flow placeholder fixes
This commit is contained in:
Benjamin Wheeler 2019-09-17 21:43:06 -04:00 committed by GitHub
commit 2e7a687547
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/formik-forms/formik-input.jsx
View file

@ -27,7 +27,7 @@ const FormikInput = ({
> >
<Field <Field
className={classNames( className={classNames(
'input', 'formik-input',
{fail: error}, {fail: error},
className className
)} )}

6
src/components/formik-forms/formik-input.scss
View file

@ -1,12 +1,12 @@
@import "../../colors"; @import "../../colors";
.input { .formik-input {
height: 2.75rem; height: 2.75rem;
border-radius: .5rem; border-radius: .5rem;
background-color: $ui-white; background-color: $ui-white;
margin-bottom: .5rem; margin-bottom: .5rem;
transition: all .5s ease, font-size 0s; transition: all .5s ease, font-size 0s;
border: 1px solid $active-gray; border: 1px solid $active-dark-gray;
padding: 0 1rem; padding: 0 1rem;
color: $type-gray; color: $type-gray;
font-size: .875rem; font-size: .875rem;
@ -29,6 +29,6 @@
&::placeholder { &::placeholder {
font-style: italic; font-style: italic;
color: $type-gray-75percent; color: $type-gray-60percent;
} }
} }

5
src/components/join-flow/birthdate-step.jsx
View file

@ -13,7 +13,7 @@ const InfoButton = require('../info-button/info-button.jsx');
require('./join-flow-steps.scss'); require('./join-flow-steps.scss');
const getBirthMonthOptions = intl => ([ const getBirthMonthOptions = intl => ([
{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: '1', label: intl.formatMessage({id: 'general.monthJanuary'})},
{value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})}, {value: '2', label: intl.formatMessage({id: 'general.monthFebruary'})},
{value: '3', label: intl.formatMessage({id: 'general.monthMarch'})}, {value: '3', label: intl.formatMessage({id: 'general.monthMarch'})},
@ -37,7 +37,8 @@ const getBirthYearOptions = intl => {
.map((defaultVal, i) => ( .map((defaultVal, i) => (
{value: String(curYear - i), label: String(curYear - i)} {value: String(curYear - i), label: String(curYear - i)}
)); ));
birthYearOptions.unshift({ birthYearOptions.unshift({ // set placeholder as first option
disabled: true,
value: 'null', value: 'null',
label: intl.formatMessage({id: 'general.year'}) label: intl.formatMessage({id: 'general.year'})
}); });

2
src/components/join-flow/country-step.jsx
View file

@ -28,7 +28,7 @@ class CountryStep extends React.Component {
setCountryOptions () { setCountryOptions () {
if (this.countryOptions.length === 0) { if (this.countryOptions.length === 0) {
this.countryOptions = [...countryData.registrationCountryOptions]; this.countryOptions = [...countryData.registrationCountryOptions];
this.countryOptions.unshift({ this.countryOptions.unshift({ // add placeholder as first option
disabled: true, disabled: true,
label: this.props.intl.formatMessage({id: 'general.country'}), label: this.props.intl.formatMessage({id: 'general.country'}),
value: 'null' value: 'null'