mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
added royal blue color, button styles, small jsx fixes to Add to Studio modal
This commit is contained in:
Ben Wheeler
parent
9d9226f4a4
commit
f8df3c0146
8 changed files with 74 additions and 68 deletions
|
|
@ -24,6 +24,9 @@ $ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More tertiary
|
|||
$ui-blue-10percent: hsla(215, 100, 65, .1);
|
||||
$ui-blue-25percent: hsla(215, 100, 65, .25);
|
||||
$ui-orange-25percent: hsla(35, 90, 55, .25);
|
||||
// #4F9AFC per invision mockup; www royal blue is really #4169E1;
|
||||
// cornflower blue is #6495ED
|
||||
$ui-royal-blue: hsla(214, 97, 65, 1);
|
||||
|
||||
/* Overlay UI Gray Colors */
|
||||
$active-gray: hsla(0, 0, 0, .1);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const Button = require('../../forms/button.jsx');
|
|||
const Select = require('../../forms/select.jsx');
|
||||
const Spinner = require('../../spinner/spinner.jsx');
|
||||
const TextArea = require('../../forms/textarea.jsx');
|
||||
const FlexRow = require('../../flex-row/flex-row.jsx');
|
||||
|
||||
require('../../forms/button.scss');
|
||||
require('./modal.scss');
|
||||
|
|
@ -23,8 +24,6 @@ class AddToStudioModal extends React.Component {
|
|||
'handleSubmit'
|
||||
]);
|
||||
this.state = {
|
||||
prompt: props.intl.formatMessage({id: 'addToStudio.promptPlaceholder'}),
|
||||
reason: '',
|
||||
waiting: false
|
||||
};
|
||||
}
|
||||
|
|
@ -33,8 +32,6 @@ class AddToStudioModal extends React.Component {
|
|||
this.props.onAddToStudio(formData, err => {
|
||||
if (err) log.error(err);
|
||||
this.setState({
|
||||
prompt: this.props.intl.formatMessage({id: 'addToStudio.promptPlaceholder'}),
|
||||
reason: '',
|
||||
waiting: false
|
||||
});
|
||||
});
|
||||
|
|
@ -61,53 +58,39 @@ class AddToStudioModal extends React.Component {
|
|||
</div>
|
||||
|
||||
<div className="addToStudio-modal-content">
|
||||
<FormattedMessage
|
||||
id={`addToStudio.${type}Instructions`}
|
||||
values={{
|
||||
CommunityGuidelinesLink: (
|
||||
<a href="/community_guidelines">
|
||||
<FormattedMessage id="addToStudio.CommunityGuidelinesLinkText" />
|
||||
</a>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<Form
|
||||
className="add-to-studio"
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
<TextArea
|
||||
required
|
||||
className="add-to-studio-text"
|
||||
name="addToStudioText"
|
||||
placeholder={this.state.prompt}
|
||||
validationErrors={{
|
||||
maxLength: this.props.intl.formatMessage({id: 'addToStudio.tooLongError'}),
|
||||
minLength: this.props.intl.formatMessage({id: 'addToStudio.tooShortError'})
|
||||
}}
|
||||
validations={{
|
||||
// TODO find out max and min characters
|
||||
maxLength: 500,
|
||||
minLength: 30
|
||||
}}
|
||||
/>
|
||||
{this.state.addToStudioWaiting ? [
|
||||
<FlexRow className="action-buttons">
|
||||
<Button
|
||||
className="submit-button white"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
className="action-button close-button white"
|
||||
onClick={this.handleRequestClose}
|
||||
key="closeButton"
|
||||
name="closeButton"
|
||||
type="button"
|
||||
>
|
||||
<Spinner />
|
||||
<FormattedMessage id="general.close" />
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
className="submit-button white"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage id="addtostudio.okay" />
|
||||
</Button>
|
||||
]}
|
||||
{this.state.addToStudioWaiting ? [
|
||||
<Button
|
||||
className="action-button submit-button"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<Spinner />
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
className="action-button submit-button"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage id="general.okay" />
|
||||
</Button>
|
||||
]}
|
||||
</FlexRow>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.addToStudio-modal-header {
|
||||
box-shadow: inset 0 -1px 0 0 $dd-darkblue;
|
||||
background-color: $ui-blue;
|
||||
background-color: $ui-royal-blue;
|
||||
padding-top: .75rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ class Modal extends React.Component {
|
|||
]);
|
||||
}
|
||||
handleRequestClose () {
|
||||
alert("close");
|
||||
return this.modal.portal.requestClose();
|
||||
}
|
||||
render () {
|
||||
|
|
|
|||
|
|
@ -59,3 +59,15 @@ $modal-close-size: 1rem;
|
|||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Close button, Submit button, etc. */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end !important;
|
||||
align-items: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const Button = require('../../forms/button.jsx');
|
|||
const Select = require('../../forms/select.jsx');
|
||||
const Spinner = require('../../spinner/spinner.jsx');
|
||||
const TextArea = require('../../forms/textarea.jsx');
|
||||
const FlexRow = require('../../flex-row/flex-row.jsx');
|
||||
|
||||
require('../../forms/button.scss');
|
||||
require('./modal.scss');
|
||||
|
|
@ -149,28 +150,30 @@ class ReportModal extends React.Component {
|
|||
minLength: 30
|
||||
}}
|
||||
/>
|
||||
{this.state.reportWaiting ? [
|
||||
<Button
|
||||
className="submit-button white"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<Spinner />
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
className="submit-button white"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage id="report.send" />
|
||||
</Button>
|
||||
]}
|
||||
<FlexRow className="action-buttons">
|
||||
{this.state.reportWaiting ? [
|
||||
<Button
|
||||
className="submit-button"
|
||||
disabled="disabled"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<Spinner />
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
className="submit-button"
|
||||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage id="report.send" />
|
||||
</Button>
|
||||
]}
|
||||
</FlexRow>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"general.birthMonth": "Birth Month",
|
||||
"general.birthYear": "Birth Year",
|
||||
"general.donate": "Donate",
|
||||
"general.close": "Close",
|
||||
"general.collaborators": "Collaborators",
|
||||
"general.community": "Community",
|
||||
"general.confirmEmail": "Confirm Email",
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
"general.noDeletionDescription": "Your account was scheduled for deletion but you logged in. Your account has been reactivated. If you didn’t request for your account to be deleted, you should {resetLink} to make sure your account is secure.",
|
||||
"general.noDeletionLink": "change your password",
|
||||
"general.notRequired": "Not Required",
|
||||
"general.okay": "Okay",
|
||||
"general.other": "Other",
|
||||
"general.offlineEditor": "Offline Editor",
|
||||
"general.password": "Password",
|
||||
|
|
|
|||
|
|
@ -340,9 +340,8 @@ class PreviewPresentation extends React.Component {
|
|||
sessionStatus === sessionActions.Status.FETCHED &&
|
||||
Object.keys(user).length > 0 &&
|
||||
user.id !== projectInfo.author.id
|
||||
))
|
||||
&&
|
||||
[
|
||||
)) // NOTE: remove this!
|
||||
&& [
|
||||
<Button className="action-button studio-button"
|
||||
key="add-to-studio-button"
|
||||
onClick={this.handleAddToStudioClick}
|
||||
|
|
@ -362,9 +361,12 @@ class PreviewPresentation extends React.Component {
|
|||
Copy Link
|
||||
</Button>
|
||||
{
|
||||
(DEBUG || ( // NOTE: remove this!
|
||||
sessionStatus === sessionActions.Status.FETCHED &&
|
||||
Object.keys(user).length > 0 &&
|
||||
user.id !== projectInfo.author.id && [
|
||||
user.id !== projectInfo.author.id
|
||||
)) // NOTE: remove this!
|
||||
&& [
|
||||
<Button
|
||||
className="action-button report-button"
|
||||
key="report-button"
|
||||
|
|
|
|||
Loading…
Reference in a new issue