filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-24 17:44:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

revert button full changes

Browse Source
This commit is contained in:
Martina 2020-08-02 12:05:57 -07:00
parent 1ae78fcdc6
commit e87f9efb77
17 changed files with 151 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/sidebars/SidebarAddFileToBucket.js
View File

@ -82,24 +82,22 @@ export default class SidebarAddFileToBucket extends React.Component {
</System.P>
) : null}
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
type="label"
htmlFor="file"
style={{ marginTop: 24 }}
loading={this.props.fileLoading}
>
Add file
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
{!this.props.fileLoading ? (
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this.props.onCancel}
>
Cancel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
) : null}
</React.Fragment>
);

5
components/sidebars/SidebarCreatePaymentChannel.js
View File

@ -87,13 +87,12 @@ export default class SidebarCreatePaymentChannel extends React.Component {
<div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Send
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
</React.Fragment>
);
}

10
components/sidebars/SidebarCreateSlate.js
View File

@ -64,22 +64,20 @@ export default class SidebarCreateSlate extends React.Component {
{this.props.viewer.username}/{Strings.createSlug(this.state.name)}
</System.P>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.state.loading}
>
Create {this.state.name}
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
</div>
);
}

10
components/sidebars/SidebarCreateWalletAddress.js
View File

@ -89,22 +89,20 @@ export default class SidebarCreateWalletAddress extends React.Component {
Make this wallet the default
</System.CheckBox>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.state.loading}
>
Create {this.state.name}
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
</div>
);
}

10
components/sidebars/SidebarDeleteWalletAddress.js
View File

@ -27,21 +27,19 @@ export default class SidebarDeleteWalletAddress extends React.Component {
Are you sure you want to delete the selected wallet?
</System.P>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Delete
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
</div>
);
}

10
components/sidebars/SidebarFileStorageDeal.js
View File

@ -138,23 +138,21 @@ export default class SidebarFileStorageDeal extends React.Component {
options={this.props.viewer.addresses}
/>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.props.sidebarLoading}
>
Make storage deal
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
{!this.props.sidebarLoading ? (
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel deal
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
) : null}
</React.Fragment>
);

10
components/sidebars/SidebarWalletSendFunds.js
View File

@ -116,22 +116,20 @@ export default class SidebarWalletSendFunds extends React.Component {
<div css={STYLES_SUBTEXT}>Total Filecoin</div>
</div>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
loading={this.state.loading}
>
Send
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
style={{ marginTop: 16 }}
onClick={this._handleCancel}
>
Cancel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
</React.Fragment>
);
}

124
components/system/components/Buttons.js
View File

@ -59,58 +59,7 @@ const STYLES_BUTTON_PRIMARY = css`
}
`;
const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
color: ${Constants.system.white};
:hover {
background-color: #003fe3;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
outline: 0;
border: 0;
}
`;
export const ButtonPrimary = (props) => {
if (props.full) {
if (props.loading) {
return (
<button css={STYLES_BUTTON_PRIMARY_FULL} style={props.style}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_PRIMARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
type={props.label}
htmlFor={props.htmlFor}
/>
);
}
return (
<button
css={STYLES_BUTTON_PRIMARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
/>
);
}
if (props.loading) {
return (
<button css={STYLES_BUTTON_PRIMARY} style={props.style}>
@ -142,6 +91,25 @@ export const ButtonPrimary = (props) => {
);
};
const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.brand};
color: ${Constants.system.white};
:hover {
background-color: #003fe3;
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.brand};
outline: 0;
border: 0;
}
`;
export const ButtonPrimaryFull = (props) => {
if (props.loading) {
return (
@ -193,6 +161,14 @@ const STYLES_BUTTON_SECONDARY = css`
}
`;
export const ButtonSecondary = (props) => {
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
}
return <button css={STYLES_BUTTON_SECONDARY} {...props} />;
};
const STYLES_BUTTON_SECONDARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
@ -212,39 +188,6 @@ const STYLES_BUTTON_SECONDARY_FULL = css`
}
`;
export const ButtonSecondary = (props) => {
if (props.full) {
if (props.loading) {
return (
<button css={STYLES_BUTTON_SECONDARY_FULL} style={props.style}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_SECONDARY_FULL}
style={props.style}
onClick={props.onClick}
children={props.children}
type={props.label}
htmlFor={props.htmlFor}
/>
);
}
return <button css={STYLES_BUTTON_SECONDARY_FULL} {...props} />;
}
if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
}
return <button css={STYLES_BUTTON_SECONDARY} {...props} />;
};
export const ButtonSecondaryFull = (props) => {
if (props.loading) {
return (
@ -282,6 +225,10 @@ const STYLES_BUTTON_DISABLED = css`
}
`;
export const ButtonDisabled = (props) => {
return <button css={STYLES_BUTTON_DISABLED} {...props} />;
};
const STYLES_BUTTON_DISABLED_FULL = css`
${STYLES_BUTTON_FULL}
cursor: not-allowed;
@ -294,15 +241,6 @@ const STYLES_BUTTON_DISABLED_FULL = css`
}
`;
export const ButtonDisabled = (props) => {
return (
<button
css={props.full ? STYLES_BUTTON_DISABLED_FULL : STYLES_BUTTON_DISABLED}
{...props}
/>
);
};
export const ButtonDisabledFull = (props) => {
return <button css={STYLES_BUTTON_DISABLED_FULL} {...props} />;
};

13
components/system/modules/CreateFilecoinAddress.js
View File

@ -2,9 +2,13 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import { Input } from "~/components/system/components/Input";
import { SelectMenu } from "~/components/system/components/SelectMenus";
import {
SelectMenu,
} from "~/components/system/components/SelectMenus";
import { CheckBox } from "~/components/system/components/CheckBox";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import {
ButtonPrimaryFull,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
const SELECT_MENU_OPTIONS = [
@ -81,13 +85,12 @@ export class CreateFilecoinAddress extends React.Component {
Make this wallet the default
</CheckBox>
<ButtonPrimary
full
<ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Create address
</ButtonPrimary>
</ButtonPrimaryFull>
</div>
);
}

13
components/system/modules/CreateFilecoinStorageDeal.js
View File

@ -1,8 +1,8 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import {
ButtonPrimary,
ButtonSecondary,
ButtonPrimaryFull,
ButtonSecondaryFull,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
@ -96,17 +96,16 @@ export class CreateFilecoinStorageDeal extends React.Component {
</div>
</div>
) : null}
<ButtonSecondary full type="label" htmlFor="file">
<ButtonSecondaryFull type="label" htmlFor="file">
Add file
</ButtonSecondary>
</ButtonSecondaryFull>
{this.state.file ? (
<ButtonPrimary
full
<ButtonPrimaryFull
style={{ marginTop: 24 }}
onClick={this._handleSubmit}
>
Make storage deal
</ButtonPrimary>
</ButtonPrimaryFull>
) : null}
</div>
);

6
components/system/modules/CreateToken.js
View File

@ -2,7 +2,7 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { ButtonPrimaryFull } from "~/components/system/components/Buttons";
import Odometer from "~/vendor/odometer";
@ -81,9 +81,9 @@ export const CreateToken = (props) => {
</span>
</div>
<div css={STYLES_CREATE_TOKEN_BOTTOM}>
<ButtonPrimary full onClick={props.onClick}>
<ButtonPrimaryFull onClick={props.onClick}>
Generate new Powergate token
</ButtonPrimary>
</ButtonPrimaryFull>
</div>
</div>
);

9
components/system/modules/SendAddressFilecoin.js
View File

@ -2,7 +2,9 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import { Input } from "~/components/system/components/Input";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import {
ButtonPrimaryFull,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
const STYLES_CONTAINER = css`
@ -65,13 +67,12 @@ export class SendAddressFilecoin extends React.Component {
onChange={this._handleChange}
/>
<ButtonPrimary
full
<ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Send {this.state.amount} FIL
</ButtonPrimary>
</ButtonPrimaryFull>
</div>
);
}

26
pages/system/buttons.js
View File

@ -35,8 +35,11 @@ export default class SystemPageButtons extends React.Component {
{`import * as React from "react";
import {
ButtonPrimary,
ButtonPrimaryFull,
ButtonSecondary,
ButtonSecondaryFull,
ButtonDisabled,
ButtonDisabledFull,
} from "slate-react-system";`}
</CodeBlock>
<br />
@ -45,7 +48,7 @@ import {
<hr />
<br />
<System.P>
There are three variations of the button component.
There are three variations of the regular width button component.
<br />
Primary, Secondary and Disabled.
</System.P>
@ -80,33 +83,38 @@ class ExampleDisabled extends React.Component {
<System.H2>Full width</System.H2>
<hr />
<br />
<System.P>Each of the button styles has a full width option.</System.P>
<System.P>
There are three variations of the full width button component. <br />
Primary, Secondary and Disabled.
</System.P>
<br />
<System.ButtonPrimary full>Primary Button Full</System.ButtonPrimary>
<System.ButtonPrimaryFull>Primary Button Full</System.ButtonPrimaryFull>
<br />
<System.ButtonSecondary full>
<System.ButtonSecondaryFull>
Secondary Button Full
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonDisabled full>Disabled Button Full</System.ButtonDisabled>
<System.ButtonDisabledFull>
Disabled Button Full
</System.ButtonDisabledFull>
<br />
<br />
<CodeBlock>
{`class ExamplePrimaryFull extends React.Component {
render() {
return <ButtonPrimary full>Primary Button Full</ButtonPrimary>;
return <ButtonPrimaryFull>Primary Button Full</ButtonPrimaryFull>;
}
}
class ExampleSecondaryFull extends React.Component {
render() {
return <ButtonSecondary full>Secondary Button Full</ButtonSecondary>;
return <ButtonSecondaryFull>Secondary Button Full</ButtonSecondaryFull>;
}
}
class ExampleDisabledFull extends React.Component {
render() {
return <ButtonDisabled full>Disabled Button Full</ButtonDisabled>;
return <ButtonDisabledFull>Disabled Button Full</ButtonDisabledFull>;
}
}`}
</CodeBlock>

13
pages/system/carousel.js
View File

@ -105,9 +105,9 @@ import {
<System.H2>Carousel</System.H2>
<hr />
<br />
<System.ButtonSecondary full onClick={this._handleOpen}>
<System.ButtonSecondaryFull onClick={this._handleOpen}>
Open carousel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
@ -120,29 +120,34 @@ import {
maxWidth: "80%",
display: "block"
};
const slides = [
<img key="i-1" src="/static/social.png" style={style} />,
<img key="i-2" src="/static/social.jpg" style={style} />
];
System.dispatchCustomEvent({
name: "slate-global-create-carousel",
detail: { slides },
});
}
_handleOpen = () => {
dispatchCustomEvent({
name: "slate-global-open-carousel"
detail: { index: 0 }
});
};
_handleClose = () => {
dispatchCustomEvent({ name: "slate-global-close-carousel" });
};
render() {
return (
<System.ButtonSecondary full onClick={this._handleOpen}>
<System.ButtonSecondaryFull onClick={this._handleOpen}>
Open Carousel
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
);
}
}`}

10
pages/system/modals.js
View File

@ -84,8 +84,7 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Modal</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
modal: (
@ -109,7 +108,7 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for modal popup
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.P>
While the Modal component is always present, a modal will only appear
@ -146,12 +145,11 @@ import { GlobalModal, dispatchCustomEvent } from "slate-react-system";`}
</div>
);
return (
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() => this._handleCreate({ modal: modalContent })}
>
Click for modal popup
</ButtonSecondary>
</ButtonSecondaryFull>
);
}
}`}

94
pages/system/notifications.js
View File

@ -87,8 +87,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -97,10 +96,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -110,11 +108,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for dark style notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
<System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<br />
<System.P>
A notification will only appear once you trigger it by creating a
@ -148,8 +146,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() {
return (
<React.Fragment>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -158,10 +155,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for notification
</ButtonSecondary>
</ButtonSecondaryFull>
<br />
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -171,11 +167,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for dark style notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}>
<ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</ButtonPrimaryFull>
</React.Fragment>
);
}
@ -187,8 +183,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification with timeout</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -198,11 +193,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for disappearing notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
<System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<br />
<System.P>
You can declare the Notification component with a{" "}
@ -224,8 +219,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() {
return (
<React.Fragment>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -235,11 +229,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for disappearing notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}>
<ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</ButtonPrimaryFull>
</React.Fragment>
);
}
@ -251,8 +245,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
<System.H2>Notification with status</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -262,10 +255,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for info style notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -275,10 +267,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for success style notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -288,10 +279,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for warning style notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondary
full
<System.ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -301,11 +291,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for error style notification
</System.ButtonSecondary>
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
<System.ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
<br />
<br />
<System.P>
@ -333,8 +323,7 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
render() {
return (
<React.Fragment>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -344,10 +333,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for info style notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -357,10 +345,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for success style notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -370,10 +357,9 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for warning style notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonSecondary
full
<ButtonSecondaryFull
onClick={() =>
this._handleCreate({
id: this.state.count,
@ -383,11 +369,11 @@ import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
}
>
Click for error style notification
</ButtonSecondary>
</ButtonSecondaryFull>
<ButtonPrimary full onClick={this._handleDelete}>
<ButtonPrimaryFull onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</ButtonPrimaryFull>
</React.Fragment>
);
}

5
scenes/SceneSignIn.js
View File

@ -150,14 +150,13 @@ export default class SceneSignIn extends React.Component {
Password should be at least 8 characters
</div>
<System.ButtonPrimary
full
<System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={!this.state.loading ? this._handleSubmit : () => {}}
loading={this.state.loading}
>
Sign in
</System.ButtonPrimary>
</System.ButtonPrimaryFull>
</div>
);