filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 22:12:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #140 from filecoin-project/@martinalong/button-full

Browse Source 
Button full syntax standardization
This commit is contained in:
CAKE 2020-08-02 15:08:02 -07:00 committed by GitHub
commit a458ec4577
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 185 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/sidebars/SidebarAddFileToBucket.js
View File

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

5
components/sidebars/SidebarCreatePaymentChannel.js
View File

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

10
components/sidebars/SidebarCreateSlate.js
View File

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

10
components/sidebars/SidebarCreateWalletAddress.js
View File

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

10
components/sidebars/SidebarDeleteWalletAddress.js
View File

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

13
components/sidebars/SidebarFileStorageDeal.js
View File

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

10
components/sidebars/SidebarWalletSendFunds.js
View File

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

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

@ -59,38 +59,6 @@ const STYLES_BUTTON_PRIMARY = css`
}
`;
export const ButtonPrimary = (props) => {
if (props.loading) {
return (
<button css={STYLES_BUTTON_PRIMARY} style={props.style}>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
}
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_PRIMARY}
style={props.style}
onClick={props.onClick}
children={props.children}
type={props.label}
htmlFor={props.htmlFor}
/>
);
}
return (
<button
css={STYLES_BUTTON_PRIMARY}
style={props.style}
onClick={props.onClick}
children={props.children}
/>
);
};
const STYLES_BUTTON_PRIMARY_FULL = css`
${STYLES_BUTTON_FULL}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
@ -110,10 +78,13 @@ const STYLES_BUTTON_PRIMARY_FULL = css`
}
`;
export const ButtonPrimaryFull = (props) => {
export const ButtonPrimary = (props) => {
if (props.loading) {
return (
<button css={STYLES_BUTTON_PRIMARY_FULL} style={props.style}>
<button
css={props.full ? STYLES_BUTTON_PRIMARY_FULL : STYLES_BUTTON_PRIMARY}
style={props.style}
>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
@ -122,7 +93,7 @@ export const ButtonPrimaryFull = (props) => {
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_PRIMARY_FULL}
css={props.full ? STYLES_BUTTON_PRIMARY_FULL : STYLES_BUTTON_PRIMARY}
style={props.style}
onClick={props.onClick}
children={props.children}
@ -134,7 +105,7 @@ export const ButtonPrimaryFull = (props) => {
return (
<button
css={STYLES_BUTTON_PRIMARY_FULL}
css={props.full ? STYLES_BUTTON_PRIMARY_FULL : STYLES_BUTTON_PRIMARY}
style={props.style}
onClick={props.onClick}
children={props.children}
@ -142,6 +113,10 @@ export const ButtonPrimaryFull = (props) => {
);
};
export const ButtonPrimaryFull = (props) => {
return <ButtonPrimary full {...props} />;
};
const STYLES_BUTTON_SECONDARY = css`
${STYLES_BUTTON}
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
@ -161,14 +136,6 @@ 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);
@ -188,10 +155,15 @@ const STYLES_BUTTON_SECONDARY_FULL = css`
}
`;
export const ButtonSecondaryFull = (props) => {
export const ButtonSecondary = (props) => {
if (props.loading) {
return (
<button css={STYLES_BUTTON_SECONDARY_FULL} style={props.style}>
<button
css={
props.full ? STYLES_BUTTON_SECONDARY_FULL : STYLES_BUTTON_SECONDARY
}
style={props.style}
>
<LoaderSpinner style={{ height: 16, width: 16 }} />
</button>
);
@ -200,7 +172,9 @@ export const ButtonSecondaryFull = (props) => {
if (props.type === "label") {
return (
<label
css={STYLES_BUTTON_SECONDARY_FULL}
css={
props.full ? STYLES_BUTTON_SECONDARY_FULL : STYLES_BUTTON_SECONDARY
}
style={props.style}
onClick={props.onClick}
children={props.children}
@ -210,7 +184,16 @@ export const ButtonSecondaryFull = (props) => {
);
}
return <button css={STYLES_BUTTON_SECONDARY_FULL} {...props} />;
return (
<button
css={props.full ? STYLES_BUTTON_SECONDARY_FULL : STYLES_BUTTON_SECONDARY}
{...props}
/>
);
};
export const ButtonSecondaryFull = (props) => {
return <ButtonSecondary full {...props} />;
};
const STYLES_BUTTON_DISABLED = css`
@ -225,10 +208,6 @@ 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;
@ -241,6 +220,15 @@ const STYLES_BUTTON_DISABLED_FULL = css`
}
`;
export const ButtonDisabledFull = (props) => {
return <button css={STYLES_BUTTON_DISABLED_FULL} {...props} />;
export const ButtonDisabled = (props) => {
return (
<button
css={props.full ? STYLES_BUTTON_DISABLED_FULL : STYLES_BUTTON_DISABLED}
{...props}
/>
);
};
export const ButtonDisabledFull = (props) => {
return <ButtonDisabled full {...props} />;
};

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

@ -2,13 +2,9 @@ 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 {
ButtonPrimaryFull,
} from "~/components/system/components/Buttons";
import { ButtonPrimary } from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
const SELECT_MENU_OPTIONS = [
@ -85,12 +81,13 @@ export class CreateFilecoinAddress extends React.Component {
Make this wallet the default
</CheckBox>
<ButtonPrimaryFull
<ButtonPrimary
full
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Create address
</ButtonPrimaryFull>
</ButtonPrimary>
</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 {
ButtonPrimaryFull,
ButtonSecondaryFull,
ButtonPrimary,
ButtonSecondary,
} from "~/components/system/components/Buttons";
import { css } from "@emotion/react";
@ -96,16 +96,17 @@ export class CreateFilecoinStorageDeal extends React.Component {
</div>
</div>
) : null}
<ButtonSecondaryFull type="label" htmlFor="file">
<ButtonSecondary full type="label" htmlFor="file">
Add file
</ButtonSecondaryFull>
</ButtonSecondary>
{this.state.file ? (
<ButtonPrimaryFull
<ButtonPrimary
full
style={{ marginTop: 24 }}
onClick={this._handleSubmit}
>
Make storage deal
</ButtonPrimaryFull>
</ButtonPrimary>
) : 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 { ButtonPrimaryFull } from "~/components/system/components/Buttons";
import { ButtonPrimary } 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}>
<ButtonPrimaryFull onClick={props.onClick}>
<ButtonPrimary full onClick={props.onClick}>
Generate new Powergate token
</ButtonPrimaryFull>
</ButtonPrimary>
</div>
</div>
);

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

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

26
pages/system/buttons.js
View File

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

8
pages/system/carousel.js
View File

@ -105,9 +105,9 @@ import {
<System.H2>Carousel</System.H2>
<hr />
<br />
<System.ButtonSecondaryFull onClick={this._handleOpen}>
<System.ButtonSecondary full onClick={this._handleOpen}>
Open carousel
</System.ButtonSecondaryFull>
</System.ButtonSecondary>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
@ -140,9 +140,9 @@ import {
};
render() {
return (
<System.ButtonSecondaryFull onClick={this._handleOpen}>
<System.ButtonSecondary full onClick={this._handleOpen}>
Open Carousel
</System.ButtonSecondaryFull>
</System.ButtonSecondary>
);
}
}`}

10
pages/system/modals.js
View File

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

94
pages/system/notifications.js
View File

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

5
scenes/SceneSignIn.js
View File

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