From e87f9efb773c6a00a0505fc92266d87ade7d918b Mon Sep 17 00:00:00 2001
From: Martina <martinalong10@gmail.com>
Date: Sun, 2 Aug 2020 12:05:57 -0700
Subject: [PATCH] revert button full changes

---
 components/sidebars/SidebarAddFileToBucket.js |  10 +-
 .../sidebars/SidebarCreatePaymentChannel.js   |   5 +-
 components/sidebars/SidebarCreateSlate.js     |  10 +-
 .../sidebars/SidebarCreateWalletAddress.js    |  10 +-
 .../sidebars/SidebarDeleteWalletAddress.js    |  10 +-
 components/sidebars/SidebarFileStorageDeal.js |  10 +-
 components/sidebars/SidebarWalletSendFunds.js |  10 +-
 components/system/components/Buttons.js       | 124 +++++-------------
 .../system/modules/CreateFilecoinAddress.js   |  13 +-
 .../modules/CreateFilecoinStorageDeal.js      |  13 +-
 components/system/modules/CreateToken.js      |   6 +-
 .../system/modules/SendAddressFilecoin.js     |   9 +-
 pages/system/buttons.js                       |  26 ++--
 pages/system/carousel.js                      |  13 +-
 pages/system/modals.js                        |  10 +-
 pages/system/notifications.js                 |  94 ++++++-------
 scenes/SceneSignIn.js                         |   5 +-
 17 files changed, 151 insertions(+), 227 deletions(-)

diff --git a/components/sidebars/SidebarAddFileToBucket.js b/components/sidebars/SidebarAddFileToBucket.js
index fc89bcf5..4a84791f 100644
--- a/components/sidebars/SidebarAddFileToBucket.js
+++ b/components/sidebars/SidebarAddFileToBucket.js
@@ -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>
     );
diff --git a/components/sidebars/SidebarCreatePaymentChannel.js b/components/sidebars/SidebarCreatePaymentChannel.js
index f7ac812a..11a42cd0 100644
--- a/components/sidebars/SidebarCreatePaymentChannel.js
+++ b/components/sidebars/SidebarCreatePaymentChannel.js
@@ -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>
     );
   }
diff --git a/components/sidebars/SidebarCreateSlate.js b/components/sidebars/SidebarCreateSlate.js
index e5dfaf4f..847ecc3c 100644
--- a/components/sidebars/SidebarCreateSlate.js
+++ b/components/sidebars/SidebarCreateSlate.js
@@ -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>
     );
   }
diff --git a/components/sidebars/SidebarCreateWalletAddress.js b/components/sidebars/SidebarCreateWalletAddress.js
index 274a763d..12d9d55e 100644
--- a/components/sidebars/SidebarCreateWalletAddress.js
+++ b/components/sidebars/SidebarCreateWalletAddress.js
@@ -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>
     );
   }
diff --git a/components/sidebars/SidebarDeleteWalletAddress.js b/components/sidebars/SidebarDeleteWalletAddress.js
index 4f672ed1..fbd3e506 100644
--- a/components/sidebars/SidebarDeleteWalletAddress.js
+++ b/components/sidebars/SidebarDeleteWalletAddress.js
@@ -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>
     );
   }
diff --git a/components/sidebars/SidebarFileStorageDeal.js b/components/sidebars/SidebarFileStorageDeal.js
index 7c84164d..f38085cf 100644
--- a/components/sidebars/SidebarFileStorageDeal.js
+++ b/components/sidebars/SidebarFileStorageDeal.js
@@ -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>
     );
diff --git a/components/sidebars/SidebarWalletSendFunds.js b/components/sidebars/SidebarWalletSendFunds.js
index 6ba4d0c8..cbbd5252 100644
--- a/components/sidebars/SidebarWalletSendFunds.js
+++ b/components/sidebars/SidebarWalletSendFunds.js
@@ -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>
     );
   }
diff --git a/components/system/components/Buttons.js b/components/system/components/Buttons.js
index 5386727b..580142b5 100644
--- a/components/system/components/Buttons.js
+++ b/components/system/components/Buttons.js
@@ -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} />;
 };
diff --git a/components/system/modules/CreateFilecoinAddress.js b/components/system/modules/CreateFilecoinAddress.js
index 447f127c..66a0b539 100644
--- a/components/system/modules/CreateFilecoinAddress.js
+++ b/components/system/modules/CreateFilecoinAddress.js
@@ -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>
     );
   }
diff --git a/components/system/modules/CreateFilecoinStorageDeal.js b/components/system/modules/CreateFilecoinStorageDeal.js
index 6704b2a7..e409fd67 100644
--- a/components/system/modules/CreateFilecoinStorageDeal.js
+++ b/components/system/modules/CreateFilecoinStorageDeal.js
@@ -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>
     );
diff --git a/components/system/modules/CreateToken.js b/components/system/modules/CreateToken.js
index 9030ecec..1efe43be 100644
--- a/components/system/modules/CreateToken.js
+++ b/components/system/modules/CreateToken.js
@@ -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>
   );
diff --git a/components/system/modules/SendAddressFilecoin.js b/components/system/modules/SendAddressFilecoin.js
index d28537cd..fb2aa099 100644
--- a/components/system/modules/SendAddressFilecoin.js
+++ b/components/system/modules/SendAddressFilecoin.js
@@ -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>
     );
   }
diff --git a/pages/system/buttons.js b/pages/system/buttons.js
index d4634e23..2c8e434a 100644
--- a/pages/system/buttons.js
+++ b/pages/system/buttons.js
@@ -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>
diff --git a/pages/system/carousel.js b/pages/system/carousel.js
index 2108352c..bcea0565 100644
--- a/pages/system/carousel.js
+++ b/pages/system/carousel.js
@@ -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>
     );
   }
 }`}
diff --git a/pages/system/modals.js b/pages/system/modals.js
index d994c4b9..b263e83b 100644
--- a/pages/system/modals.js
+++ b/pages/system/modals.js
@@ -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>
     );
   }
 }`}
diff --git a/pages/system/notifications.js b/pages/system/notifications.js
index b4005de1..27759a76 100644
--- a/pages/system/notifications.js
+++ b/pages/system/notifications.js
@@ -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>
     );
   }
diff --git a/scenes/SceneSignIn.js b/scenes/SceneSignIn.js
index 47bff9ba..703a64ad 100644
--- a/scenes/SceneSignIn.js
+++ b/scenes/SceneSignIn.js
@@ -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>
     );