mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -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 && (
|
||||
<p>
|
||||
<span>
|
||||
<div className="join-flow-description">
|
||||
{description}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</ModalInnerContent>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,22 +115,60 @@ class UsernameStep extends React.Component {
|
|||
onSubmit={handleSubmit}
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<b>
|
||||
<div className="join-flow-input-title">
|
||||
{this.props.intl.formatMessage({id: 'registration.createUsername'})}
|
||||
</b>
|
||||
</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>
|
||||
<div className="join-flow-password-section">
|
||||
<div className="join-flow-input-title">
|
||||
{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
|
||||
onClick={this.handleChangeShowPassword}
|
||||
>
|
||||
|
|
@ -138,33 +177,8 @@ class UsernameStep extends React.Component {
|
|||
this.props.intl.formatMessage({id: 'registration.showPassword'})
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
</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 ?
|
||||
<Spinner /> : (
|
||||
<ModalTitle
|
||||
className="modal-title-large"
|
||||
title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,3 +8,7 @@
|
|||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-title-large {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue