scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve formatting of join flow title, description, next step button

Browse source
This commit is contained in:
Ben Wheeler 2019-07-15 12:50:43 -04:00
parent 96a1b89ccb
commit a85ad87028
7 changed files with 99 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/join-flow/join-flow-step.jsx
View file

@ -24,11 +24,9 @@ const JoinFlowStep = ({
/> />
)} )}
{description && ( {description && (
<p> <div className="join-flow-description">
<span>
{description} {description}
</span> </div>
</p>
)} )}
{children} {children}
</ModalInnerContent> </ModalInnerContent>

7
src/components/join-flow/join-flow-step.scss
View file

@ -6,6 +6,13 @@
font-size: 1.875rem; font-size: 1.875rem;
} }
.join-flow-description {
font-size: .875rem;
font-weight: bold;
margin-bottom: 1.875rem;
text-align: center;
}
.join-flow-inner-content { .join-flow-inner-content {
box-shadow: none; box-shadow: none;
width: calc(100% - 5.875rem); width: calc(100% - 5.875rem);

80
src/components/join-flow/join-flow-steps.jsx
View file

@ -1,5 +1,6 @@
/* eslint-disable react/no-multi-comp */ /* eslint-disable react/no-multi-comp */
const bindAll = require('lodash.bindall'); const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
import {Formik} from 'formik'; import {Formik} from 'formik';
@ -114,22 +115,60 @@ class UsernameStep extends React.Component {
onSubmit={handleSubmit} onSubmit={handleSubmit}
> >
<div> <div>
<div> <div className="join-flow-input-title">
<b>
{this.props.intl.formatMessage({id: 'registration.createUsername'})} {this.props.intl.formatMessage({id: 'registration.createUsername'})}
</b>
</div> </div>
<FormikInput <FormikInput
className={errors.username ? 'fail' : ''} className={classNames(
'join-flow-input',
{fail: errors.username}
)}
error={errors.username} error={errors.username}
id="username" id="username"
name="username" name="username"
validate={this.validateUsernameIfPresent} validate={this.validateUsernameIfPresent}
onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind
/> />
<b> <div className="join-flow-password-section">
<div className="join-flow-input-title">
{this.props.intl.formatMessage({id: 'general.password'})} {this.props.intl.formatMessage({id: 'general.password'})}
</b> </div>
<FormikInput
className={classNames(
'join-flow-input',
{fail: errors.password}
)}
error={errors.password}
id="password"
name="password"
type={this.state.showPassword ? 'text' : 'password'}
validate={this.validatePasswordIfPresent}
validationClassName="validation-full-width-input"
/* eslint-disable react/jsx-no-bind */
onBlur={() => validateField('password')}
/* eslint-enable react/jsx-no-bind */
/>
<FormikInput
className={classNames(
'join-flow-input',
{fail: errors.passwordConfirm}
)}
error={errors.passwordConfirm}
id="passwordConfirm"
name="passwordConfirm"
type={this.state.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */
validate={() =>
this.validatePasswordConfirmIfPresent(values.password,
values.passwordConfirm)
}
validationClassName="validation-full-width-input"
onBlur={() =>
validateField('passwordConfirm')
}
/* eslint-enable react/jsx-no-bind */
/>
<div className="join-flow-input-title">
<div <div
onClick={this.handleChangeShowPassword} onClick={this.handleChangeShowPassword}
> >
@ -138,33 +177,8 @@ class UsernameStep extends React.Component {
this.props.intl.formatMessage({id: 'registration.showPassword'}) this.props.intl.formatMessage({id: 'registration.showPassword'})
)} )}
</div> </div>
<FormikInput </div>
className={errors.password ? 'fail' : ''} </div>
error={errors.password}
id="password"
name="password"
type={this.state.showPassword ? 'text' : 'password'}
validate={this.validatePasswordIfPresent}
onBlur={() => validateField('password')} // eslint-disable-line react/jsx-no-bind
/>
<b>
{this.props.intl.formatMessage({id: 'general.error'})}
</b>
<FormikInput
className={errors.passwordConfirm ? 'fail' : ''}
error={errors.passwordConfirm}
id="passwordConfirm"
name="passwordConfirm"
type={this.state.showPassword ? 'text' : 'password'}
/* eslint-disable react/jsx-no-bind */
validate={() =>
this.validatePasswordConfirmIfPresent(values.password, values.passwordConfirm)
}
onBlur={() =>
validateField('passwordConfirm')
}
/* eslint-enable react/jsx-no-bind */
/>
</div> </div>
</JoinFlowStep> </JoinFlowStep>
); );

27
src/components/join-flow/join-flow-steps.scss Normal file
View file

@ -0,0 +1,27 @@
@import "../../colors";
@import "../../frameless";
.join-flow-input {
width: 100%;
height: 2.75rem;
border-radius: .5rem;
background-color: $ui-white;
margin-bottom: .5rem;
&:focus {
box-shadow: 0 0 0 .25rem $ui-blue-25percent;
}
}
.join-flow-input-title {
font-weight: bold;
margin-bottom: .5rem;
}
.validation-full-width-input {
transform: translate(21.5625rem, 0);
}
.join-flow-password-section {
margin-top: 1.125rem;
}

1
src/components/join-flow/next-step-button.jsx
View file

@ -19,6 +19,7 @@ const NextStepButton = props => (
{props.waiting ? {props.waiting ?
<Spinner /> : ( <Spinner /> : (
<ModalTitle <ModalTitle
className="modal-title-large"
title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})} title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
/> />
) )

2
src/components/join-flow/next-step-button.scss
View file

@ -6,6 +6,6 @@
width: 100%; width: 100%;
border-bottom-left-radius: 1rem; border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem; border-bottom-right-radius: 1rem;
height: 4rem; height: 5.1875rem;
background-color: $ui-orange; background-color: $ui-orange;
} }

4
src/components/modal/base/modal-title.scss
View file

@ -8,3 +8,7 @@
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
} }
.modal-title-large {
font-size: 1.25rem;
}