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

Merge pull request #3117 from benjiwheeler/join-flow-use-css

Browse source 
Format join flow using ModalTitle, ModalInnerContent, NextStepButton components
This commit is contained in:
Benjamin Wheeler 2019-07-15 12:50:25 -04:00 committed by GitHub
commit 96a1b89ccb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,10 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const NextStepButton = require('./next-step-button.jsx'); const NextStepButton = require('./next-step-button.jsx');
const ModalTitle = require('../modal/base/modal-title.jsx');
const ModalInnerContent = require('../modal/base/modal-inner-content.jsx');
require('./join-flow-step.scss');
const JoinFlowStep = ({ const JoinFlowStep = ({
children, children,
@ -12,19 +16,22 @@ const JoinFlowStep = ({
}) => ( }) => (
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<div> <div>
{title && ( <ModalInnerContent className="join-flow-inner-content">
<h2> {title && (
{title} <ModalTitle
</h2> className="join-flow-title"
)} title={title}
{description && ( />
<p> )}
<span> {description && (
{description} <p>
</span> <span>
</p> {description}
)} </span>
{children} </p>
)}
{children}
</ModalInnerContent>
</div> </div>
<NextStepButton waiting={waiting} /> <NextStepButton waiting={waiting} />
</form> </form>

14
src/components/join-flow/join-flow-step.scss Normal file
View file

@ -0,0 +1,14 @@
@import "../../colors";
@import "../../frameless";
.join-flow-title {
color: $type-gray;
font-size: 1.875rem;
}
.join-flow-inner-content {
box-shadow: none;
width: calc(100% - 5.875rem);
margin: 2.3125rem auto 2.5rem;
font-size: .875rem;
}

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

@ -5,19 +5,22 @@ const injectIntl = require('react-intl').injectIntl;
const intl = require('../../lib/intl.jsx'); const intl = require('../../lib/intl.jsx');
const Spinner = require('../../components/spinner/spinner.jsx'); const Spinner = require('../../components/spinner/spinner.jsx');
const ModalTitle = require('../modal/base/modal-title.jsx');
require('./next-step-button.scss');
const NextStepButton = props => ( const NextStepButton = props => (
<button <button
className="modal-flush-bottom-button"
disabled={props.waiting} disabled={props.waiting}
type="submit" type="submit"
{...omit(props, ['text', 'waiting'])} {...omit(props, ['intl', 'text', 'waiting'])}
> >
{props.waiting ? {props.waiting ?
<Spinner /> : <Spinner /> : (
(props.text ? <ModalTitle
props.text : ( title={props.text ? props.text : props.intl.formatMessage({id: 'registration.nextStep'})}
<intl.FormattedMessage id="registration.nextStep" /> />
)
) )
} }
</button> </button>

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

@ -0,0 +1,11 @@
@import "../../colors";
@import "../../frameless";
.modal-flush-bottom-button {
margin: 0;
width: 100%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: 4rem;
background-color: $ui-orange;
}

1
src/components/modal/join/modal.scss
View file

@ -2,4 +2,5 @@
@import "../../../frameless"; @import "../../../frameless";
.mod-join { .mod-join {
width: 27.4375rem;
} }