chore(button): differentiate primary and secondary

nos · Aug 5, 2018 · 1f97f5a · 1f97f5a
1 parent e931593
commit 1f97f5a
Show file tree

Hide file tree

Showing 17 changed files with 108 additions and 74 deletions.
diff --git a/src/renderer/account/components/TransactionsPanel/Receive/Receive.js b/src/renderer/account/components/TransactionsPanel/Receive/Receive.js
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { string } from 'prop-types';
 
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import styles from './Receive.scss';
 
@@ -27,7 +27,7 @@ export default class Receive extends React.PureComponent {
         <div className={styles.address}>{address}</div>
 
         <CopyToClipboard text={address}>
-          <Button className={styles.copy}>Copy to clipboard</Button>
+          <PrimaryButton className={styles.copy}>Copy to clipboard</PrimaryButton>
         </CopyToClipboard>
 
         <div className={styles.label}>My wallet QR code</div>

diff --git a/src/renderer/account/components/TransactionsPanel/Send/Send.js b/src/renderer/account/components/TransactionsPanel/Send/Send.js
@@ -5,7 +5,7 @@ import { wallet } from '@cityofzion/neon-js';
 import { BigNumber } from 'bignumber.js';
 import { map, noop } from 'lodash';
 
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 import Input from 'shared/components/Forms/Input';
 import Select from 'shared/components/Forms/Select';
 
@@ -73,14 +73,14 @@ export default class Send extends React.PureComponent {
           value={receiver}
           onChange={this.handleChangeRecipient}
         />
-        <Button
+        <PrimaryButton
           className={styles.next}
           type="submit"
           disabled={loading || !this.isValid()}
           onClick={this.handleTransfer}
         >
           Next
-        </Button>
+        </PrimaryButton>
       </form>
     );
   }

diff --git a/src/renderer/login/components/LoginFormLedger/LoginFormLedger.js b/src/renderer/login/components/LoginFormLedger/LoginFormLedger.js
@@ -3,7 +3,7 @@ import { bool, string, func, shape } from 'prop-types';
 import { noop } from 'lodash';
 import { progressValues } from 'spunky';
 
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import styles from './LoginFormLedger.scss';
 
@@ -65,7 +65,7 @@ export default class LoginFormLedger extends React.PureComponent {
 
     return (
       <div className={styles.actions}>
-        <Button type="button" disabled={disabled} onClick={onClick}>Login</Button>
+        <PrimaryButton type="button" disabled={disabled} onClick={onClick}>Login</PrimaryButton>
       </div>
     );
   }

diff --git a/src/renderer/login/components/LoginFormPassphrase/LoginFormPassphrase.js b/src/renderer/login/components/LoginFormPassphrase/LoginFormPassphrase.js
@@ -4,7 +4,7 @@ import { bool, string, func } from 'prop-types';
 import { noop } from 'lodash';
 
 import Input from 'shared/components/Forms/Input';
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import styles from './LoginFormPassphrase.scss';
 
@@ -52,13 +52,13 @@ export default class LoginFormWIF extends React.PureComponent {
         />
 
         <div className={styles.actions}>
-          <Button
+          <PrimaryButton
             className={styles.login}
             type="submit"
             disabled={disabled || !this.isValid()}
           >
             Login
-          </Button>
+          </PrimaryButton>
           <span className={styles.register}>
             New to NEO?{' '}
             <Link to="/register">Create an account</Link>

diff --git a/src/renderer/login/components/LoginFormWIF/LoginFormWIF.js b/src/renderer/login/components/LoginFormWIF/LoginFormWIF.js
@@ -3,7 +3,7 @@ import { bool, string, func } from 'prop-types';
 import { noop } from 'lodash';
 
 import Input from 'shared/components/Forms/Input';
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import styles from './LoginFormWIF.scss';
 
@@ -38,7 +38,7 @@ export default class LoginFormWIF extends React.PureComponent {
         />
 
         <div className={styles.actions}>
-          <Button type="submit" disabled={disabled || !this.isValid()}>Login</Button>
+          <PrimaryButton type="submit" disabled={disabled || !this.isValid()}>Login</PrimaryButton>
         </div>
       </form>
     );

diff --git a/src/renderer/login/components/LoginFormWalletFile/LoginFormWalletFile.js b/src/renderer/login/components/LoginFormWalletFile/LoginFormWalletFile.js
@@ -5,6 +5,7 @@ import { noop, map } from 'lodash';
 import { wallet } from '@cityofzion/neon-js';
 
 import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 import Select from 'shared/components/Forms/Select';
 import Input from 'shared/components/Forms/Input/Input';
 
@@ -47,7 +48,7 @@ export default class LoginFormWalletFile extends React.PureComponent {
         {this.renderDescription()}
 
         <div className={styles.actions}>
-          <Button type="submit" disabled={disabled || !this.isValid()}>Login</Button>
+          <PrimaryButton type="submit" disabled={disabled || !this.isValid()}>Login</PrimaryButton>
         </div>
       </form>
     );

diff --git a/src/renderer/register/components/AccountDetails/SaveAccount/SaveAccount.js b/src/renderer/register/components/AccountDetails/SaveAccount/SaveAccount.js
@@ -7,7 +7,7 @@ import { noop, isEmpty } from 'lodash';
 import { wallet } from '@cityofzion/neon-js';
 
 import Input from 'shared/components/Forms/Input';
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import accountShape from '../../../shapes/accountShape';
 import styles from './SaveAccount.scss';
@@ -43,20 +43,20 @@ export default class SaveAccount extends React.PureComponent {
           onChange={this.handleChangeLabel}
         />
         <div className={styles.saveButtons}>
-          <Button
+          <PrimaryButton
             className={styles.button}
             disabled={isEmpty(this.props.label)}
             onClick={this.handleSaveNewWallet}
           >
             Save as new NEP6 Wallet
-          </Button>
-          <Button
+          </PrimaryButton>
+          <PrimaryButton
             className={styles.button}
             disabled={isEmpty(this.props.label)}
             onClick={this.handleAddToWallet}
           >
             Add account to NEP6 Wallet
-          </Button>
+          </PrimaryButton>
         </div>
       </div>
     );

diff --git a/src/renderer/register/components/RegisterForm/RegisterForm.js b/src/renderer/register/components/RegisterForm/RegisterForm.js
@@ -4,7 +4,7 @@ import { bool, string, func } from 'prop-types';
 import { noop } from 'lodash';
 
 import Input from 'shared/components/Forms/Input';
-import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 
 import styles from './RegisterForm.scss';
 
@@ -52,13 +52,13 @@ export default class RegisterForm extends React.PureComponent {
         />
 
         <div className={styles.actions}>
-          <Button
+          <PrimaryButton
             className={styles.register}
             type="submit"
             disabled={disabled || !this.isValid()}
           >
             Register
-          </Button>
+          </PrimaryButton>
           <span className={styles.login}>
             Already have an account?{' '}
             <Link to="/login">Login</Link>

diff --git a/src/renderer/settings/components/NetworkSettings/NetworkSettings.js b/src/renderer/settings/components/NetworkSettings/NetworkSettings.js
@@ -5,6 +5,7 @@ import { noop, map } from 'lodash';
 
 import Input from 'shared/components/Forms/Input';
 import Button from 'shared/components/Forms/Button';
+import PrimaryButton from 'shared/components/Forms/PrimaryButton';
 import Select from 'shared/components/Forms/Select';
 import NetworkIcon from 'shared/images/settings/network.svg';
 
@@ -65,9 +66,9 @@ export default class NetworkSettings extends React.PureComponent {
           />
 
           <div className={styles.actions}>
-            <Button className={styles.action} onClick={this.handleAddNewNetwork}>
+            <PrimaryButton className={styles.action} onClick={this.handleAddNewNetwork}>
               Add Custom Network
-            </Button>
+            </PrimaryButton>
             <br />
             <Button className={styles.action} onClick={this.handleClearNetworks}>
               Clear Custom Networks

diff --git a/src/renderer/shared/components/Alert/Alert.js b/src/renderer/shared/components/Alert/Alert.js
@@ -4,7 +4,7 @@ import { string, func, node } from 'prop-types';
 import { noop } from 'lodash';
 
 import Modal from '../Modal';
-import Button from '../Forms/Button';
+import PrimaryButton from '../Forms/PrimaryButton';
 import defaultImage from '../../images/modal-request-icon.png';
 import styles from './Alert.scss';
 
@@ -45,9 +45,13 @@ export default class Alert extends React.PureComponent {
             {children}
           </div>
           <div className={styles.actions}>
-            <Button className={styles.action} ref={this.registerRef('confirm')} onClick={onConfirm}>
+            <PrimaryButton
+              className={styles.action}
+              ref={this.registerRef('confirm')}
+              onClick={onConfirm}
+            >
               {confirmLabel}
-            </Button>
+            </PrimaryButton>
           </div>
         </div>
       </Modal>

diff --git a/src/renderer/shared/components/Confirm/Confirm.js b/src/renderer/shared/components/Confirm/Confirm.js
@@ -5,6 +5,7 @@ import { noop } from 'lodash';
 
 import Modal from '../Modal';
 import Button from '../Forms/Button';
+import PrimaryButton from '../Forms/PrimaryButton';
 import defaultImage from '../../images/modal-request-icon.png';
 import styles from './Confirm.scss';
 
@@ -57,10 +58,17 @@ export default class Confirm extends React.PureComponent {
             {children}
           </div>
           <div className={styles.actions}>
-            <Button className={styles.action} ref={this.registerRef('confirm')} onClick={onConfirm}>
+            <PrimaryButton
+              className={styles.action}
+              ref={this.registerRef('confirm')}
+              onClick={onConfirm}
+            >
               {confirmLabel}
-            </Button>
-            <Button className={classNames(styles.action, styles.cancel)} onClick={onCancel}>
+            </PrimaryButton>
+            <Button
+              className={classNames(styles.action, styles.cancel)}
+              onClick={onCancel}
+            >
               {cancelLabel}
             </Button>
           </div>

diff --git a/src/renderer/shared/components/Confirm/Confirm.scss b/src/renderer/shared/components/Confirm/Confirm.scss
@@ -59,26 +59,6 @@
           margin-right: 0;
         }
       }
-
-      .cancel {
-        color: #fff;
-        background-color: #292b2c;
-        border-color: #292b2c;
-
-        &:focus {
-          box-shadow: none;
-        }
-
-        &:not([disabled]) {
-          cursor: pointer;
-
-          &:active,
-          &:hover {
-            background-color: #101112;
-            border-color: #0a0b0b;
-          }
-        }
-      }
     }
   }
 }
diff --git a/src/renderer/shared/components/Forms/Button/Button.js b/src/renderer/shared/components/Forms/Button/Button.js
@@ -1,39 +1,34 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string } from 'prop-types';
+import { string, func } from 'prop-types';
+import { omit } from 'lodash';
 
 import styles from './Button.scss';
 
-export default class Button extends React.PureComponent {
+class Button extends React.PureComponent {
   render() {
     return ( // eslint-disable-next-line react/button-has-type
       <button
-        {...this.props}
-        ref={this.registerRef}
+        {...omit(this.props, 'forwardedRef')}
+        ref={this.props.forwardedRef}
         className={classNames(styles.button, this.props.className)}
       />
     );
   }
-
-  registerRef = (el) => {
-    this.button = el;
-  }
-
-  focus = () => {
-    this.button.focus();
-  }
-
-  blur = () => {
-    this.button.blur();
-  }
 }
 
 Button.propTypes = {
   className: string,
-  type: string
+  type: string,
+  forwardedRef: func
 };
 
 Button.defaultProps = {
   className: null,
-  type: 'button'
+  type: 'button',
+  forwardedRef: null
 };
+
+export default React.forwardRef((props, ref) => {
+  return <Button {...props} forwardedRef={ref} />;
+});
diff --git a/src/renderer/shared/components/Forms/Button/Button.scss b/src/renderer/shared/components/Forms/Button/Button.scss
@@ -2,21 +2,20 @@
   display: inline-block;
   height: 36px;
   padding: 0 24px;
-  background: radial-gradient(182.57px at 51.06% 50%, #5bba47 0%, #8bcd38 100%);
+  background: #fff;
   border: 0;
   border-radius: 4px;
-  color: #fff;
-  font-weight: bold;
+  color: #8bc83c;
+  font-weight: 500;
   font-size: 14px;
   text-align: center;
-  box-shadow: 0 4px 8px rgba(53, 52, 69, 0.1);
-  text-shadow: 0 1px 2px rgba(53, 52, 69, 0.45);
-  letter-spacing: 0.5px;
+  box-shadow: inset 0 0 0 2px #8bc83c;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
 
   &:not([disabled]):hover {
-    box-shadow: 0 4px 8px rgba(53, 52, 69, 0.2);
+    box-shadow: inset 0 0 0 2px #8bc83c,
+                0 4px 8px rgba(53, 52, 69, 0.2);
   }
 
   &[disabled] {

diff --git a/src/renderer/shared/components/Forms/PrimaryButton/PrimaryButton.js b/src/renderer/shared/components/Forms/PrimaryButton/PrimaryButton.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import { string, func } from 'prop-types';
+import { omit } from 'lodash';
+
+import Button from '../Button';
+import styles from './PrimaryButton.scss';
+
+class PrimaryButton extends React.PureComponent {
+  render() {
+    return (
+      <Button
+        {...omit(this.props, 'forwardedRef')}
+        ref={this.props.forwardedRef}
+        className={classNames(styles.primaryButton, this.props.className)}
+      />
+    );
+  }
+}
+
+PrimaryButton.propTypes = {
+  className: string,
+  forwardedRef: func
+};
+
+PrimaryButton.defaultProps = {
+  className: null,
+  forwardedRef: null
+};
+
+export default React.forwardRef((props, ref) => {
+  return <PrimaryButton {...props} forwardedRef={ref} />;
+});