mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 17:16:11 -05:00
Improve formatting of join flow title, description, next step button
This commit is contained in:
Ben Wheeler
parent
96a1b89ccb
commit
a85ad87028
7 changed files with 99 additions and 48 deletions
|
|
@ -24,11 +24,9 @@ const JoinFlowStep = ({
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{description && (
|
{description && (
|
||||||
<p>
|
<div className="join-flow-description">
|
||||||
<span>
|
{description}
|
||||||
{description}
|
</div>
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
{children}
|
{children}
|
||||||
</ModalInnerContent>
|
</ModalInnerContent>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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,57 +115,70 @@ 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">
|
||||||
{this.props.intl.formatMessage({id: 'general.password'})}
|
<div className="join-flow-input-title">
|
||||||
</b>
|
{this.props.intl.formatMessage({id: 'general.password'})}
|
||||||
<div
|
</div>
|
||||||
onClick={this.handleChangeShowPassword}
|
<FormikInput
|
||||||
>
|
className={classNames(
|
||||||
{/* TODO: should localize 'Hide password' if we use that */}
|
'join-flow-input',
|
||||||
{this.state.showPassword ? 'Hide password' : (
|
{fail: errors.password}
|
||||||
this.props.intl.formatMessage({id: 'registration.showPassword'})
|
)}
|
||||||
)}
|
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>
|
</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>
|
</div>
|
||||||
</JoinFlowStep>
|
</JoinFlowStep>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
27
src/components/join-flow/join-flow-steps.scss
Normal file
27
src/components/join-flow/join-flow-steps.scss
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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'})}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,3 +8,7 @@
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-title-large {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue