scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 23:27:54 -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

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

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

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

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

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

@ -1,5 +1,6 @@
/* eslint-disable react/no-multi-comp */
const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const React = require('react');
const PropTypes = require('prop-types');
import {Formik} from 'formik';
@ -114,57 +115,70 @@ class UsernameStep extends React.Component {
onSubmit={handleSubmit}
>
<div>
<div>
<b>
{this.props.intl.formatMessage({id: 'registration.createUsername'})}
</b>
<div className="join-flow-input-title">
{this.props.intl.formatMessage({id: 'registration.createUsername'})}
</div>
<FormikInput
className={errors.username ? 'fail' : ''}
className={classNames(
'join-flow-input',
{fail: errors.username}
)}
error={errors.username}
id="username"
name="username"
validate={this.validateUsernameIfPresent}
onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind
/>
<b>
{this.props.intl.formatMessage({id: 'general.password'})}
</b>
<div
onClick={this.handleChangeShowPassword}
>
{/* TODO: should localize 'Hide password' if we use that */}
{this.state.showPassword ? 'Hide password' : (
this.props.intl.formatMessage({id: 'registration.showPassword'})
)}
<div className="join-flow-password-section">
<div className="join-flow-input-title">
{this.props.intl.formatMessage({id: 'general.password'})}
</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
onClick={this.handleChangeShowPassword}
>
{/* TODO: should localize 'Hide password' if we use that */}
{this.state.showPassword ? 'Hide password' : (
this.props.intl.formatMessage({id: 'registration.showPassword'})
)}
</div>
</div>
</div>
<FormikInput
className={errors.password ? 'fail' : ''}
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>
</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 ?
<Spinner /> : (
<ModalTitle
className="modal-title-large"
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%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: 4rem;
height: 5.1875rem;
background-color: $ui-orange;
}

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

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