From 31089778ba3c97443e25bd3a7a901f45757894d9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 27 Aug 2018 20:58:40 -0700 Subject: Add raised type buttons to Button component. Refactor all buttons within app to Button components --- .../connect-hardware/account-list.js | 31 +++++++++++----------- .../connect-hardware/connect-screen.js | 15 ++++++----- .../pages/create-account/import-account/json.js | 19 +++++++------ .../create-account/import-account/private-key.js | 19 +++++++------ .../components/pages/create-account/new-account.js | 19 +++++++------ 5 files changed, 56 insertions(+), 47 deletions(-) (limited to 'ui/app/components/pages/create-account') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 488a189ea..2767b2e1f 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types') const h = require('react-hyperscript') const genAccountLink = require('../../../../../lib/account-link.js') const Select = require('react-select').default +import Button from '../../../button' class AccountList extends Component { constructor (props, context) { @@ -143,22 +144,20 @@ class AccountList extends Component { } return h('div.new-account-connect-form__buttons', {}, [ - h( - 'button.btn-default.btn--large.new-account-connect-form__button', - { - onClick: this.props.onCancel.bind(this), - }, - [this.context.t('cancel')] - ), - - h( - `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`, - { - onClick: this.props.onUnlockAccount.bind(this, this.props.device), - ...buttonProps, - }, - [this.context.t('unlock')] - ), + h(Button, { + type: 'default', + large: true, + className: 'new-account-connect-form__button', + onClick: this.props.onCancel.bind(this), + }, [this.context.t('cancel')]), + + h(Button, { + type: 'primary', + large: true, + className: 'new-account-connect-form__button unlock', + disabled, + onClick: this.props.onUnlockAccount.bind(this, this.props.device), + }, [this.context.t('unlock')]), ]) } diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index b3dfa4ee2..d3abf3119 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -1,6 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') +import Button from '../../../button' class ConnectScreen extends Component { constructor (props, context) { @@ -60,13 +61,13 @@ class ConnectScreen extends Component { h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')), h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), ]), - h( - 'button.btn-primary.btn--large', - { - onClick: () => global.platform.openWindow({ - url: 'https://google.com/chrome', - }), - }, + h(Button, { + type: 'primary', + large: true, + onClick: () => global.platform.openWindow({ + url: 'https://google.com/chrome', + }), + }, this.context.t('downloadGoogleChrome') ), ]) diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index dd57256a3..32b1065aa 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -8,6 +8,7 @@ const actions = require('../../../../actions') const FileInput = require('react-simple-file-input').default const { DEFAULT_ROUTE } = require('../../../../routes') const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' +import Button from '../../../button' class JsonImportSubview extends Component { constructor (props) { @@ -51,17 +52,19 @@ class JsonImportSubview extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.btn-default.new-account-create-form__button', { + h(Button, { + type: 'default', + large: true, + className: 'new-account-create-form__button', onClick: () => this.props.history.push(DEFAULT_ROUTE), - }, [ - this.context.t('cancel'), - ]), + }, [this.context.t('cancel')]), - h('button.btn-primary.new-account-create-form__button', { + h(Button, { + type: 'primary', + large: true, + className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), - }, [ - this.context.t('import'), - ]), + }, [this.context.t('import')]), ]), diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index 1db999f2f..8db1bfbdd 100644 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -7,6 +7,7 @@ const PropTypes = require('prop-types') const connect = require('react-redux').connect const actions = require('../../../../actions') const { DEFAULT_ROUTE } = require('../../../../routes') +import Button from '../../../button' PrivateKeyImportView.contextTypes = { t: PropTypes.func, @@ -61,20 +62,22 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__buttons', {}, [ - h('button.btn-default.btn--large.new-account-create-form__button', { + h(Button, { + type: 'default', + large: true, + className: 'new-account-create-form__button', onClick: () => { displayWarning(null) this.props.history.push(DEFAULT_ROUTE) }, - }, [ - this.context.t('cancel'), - ]), + }, [this.context.t('cancel')]), - h('button.btn-primary.btn--large.new-account-create-form__button', { + h(Button, { + type: 'primary', + large: true, + className: 'new-account-create-form__button', onClick: () => this.createNewKeychain(), - }, [ - this.context.t('import'), - ]), + }, [this.context.t('import')]), ]), diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js index 402b8f03b..c9e4b113c 100644 --- a/ui/app/components/pages/create-account/new-account.js +++ b/ui/app/components/pages/create-account/new-account.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const connect = require('react-redux').connect const actions = require('../../../actions') const { DEFAULT_ROUTE } = require('../../../routes') +import Button from '../../button' class NewAccountCreateForm extends Component { constructor (props, context) { @@ -38,20 +39,22 @@ class NewAccountCreateForm extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.btn-default.btn--large.new-account-create-form__button', { + h(Button, { + type: 'default', + large: true, + className: 'new-account-create-form__button', onClick: () => history.push(DEFAULT_ROUTE), - }, [ - this.context.t('cancel'), - ]), + }, [this.context.t('cancel')]), - h('button.btn-primary.btn--large.new-account-create-form__button', { + h(Button, { + type: 'primary', + large: true, + className:'new-account-create-form__button', onClick: () => { createAccount(newAccountName || defaultAccountName) .then(() => history.push(DEFAULT_ROUTE)) }, - }, [ - this.context.t('create'), - ]), + }, [this.context.t('create')]), ]), -- cgit