aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-08-28 11:58:40 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-09-13 10:48:51 +0800
commit31089778ba3c97443e25bd3a7a901f45757894d9 (patch)
tree4bb099da7f7cbfe65a49f3a61d3000668d077e61 /ui/app
parent930dac110aa9127380673e119b0eaab9d45b1198 (diff)
downloadtangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar.gz
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar.bz2
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar.lz
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar.xz
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.tar.zst
tangerine-wallet-browser-31089778ba3c97443e25bd3a7a901f45757894d9.zip
Add raised type buttons to Button component. Refactor all buttons within app to Button components
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/components/button/button.component.js5
-rw-r--r--ui/app/components/customize-gas-modal/index.js15
-rw-r--r--ui/app/components/modals/account-details-modal.js11
-rw-r--r--ui/app/components/modals/customize-gas/customize-gas.component.js15
-rw-r--r--ui/app/components/modals/deposit-ether-modal.js7
-rw-r--r--ui/app/components/modals/export-private-key-modal.js36
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/account-list.js31
-rw-r--r--ui/app/components/pages/create-account/connect-hardware/connect-screen.js15
-rw-r--r--ui/app/components/pages/create-account/import-account/json.js19
-rw-r--r--ui/app/components/pages/create-account/import-account/private-key.js19
-rw-r--r--ui/app/components/pages/create-account/new-account.js19
-rw-r--r--ui/app/components/pages/keychains/reveal-seed.js17
-rw-r--r--ui/app/components/pages/settings/settings.js22
-rw-r--r--ui/app/components/shapeshift-form.js8
-rw-r--r--ui/app/components/signature-request.js10
-rw-r--r--ui/app/components/wallet-view.js6
-rw-r--r--ui/app/css/itcss/components/buttons.scss15
-rw-r--r--ui/app/css/itcss/components/send.scss4
18 files changed, 180 insertions, 94 deletions
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index 1e0ef1b64..4a06333e7 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -6,6 +6,7 @@ const CLASSNAME_DEFAULT = 'btn-default'
const CLASSNAME_PRIMARY = 'btn-primary'
const CLASSNAME_SECONDARY = 'btn-secondary'
const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_RAISED = 'btn-raised'
const CLASSNAME_LARGE = 'btn--large'
const typeHash = {
@@ -13,6 +14,7 @@ const typeHash = {
primary: CLASSNAME_PRIMARY,
secondary: CLASSNAME_SECONDARY,
confirm: CLASSNAME_CONFIRM,
+ raised: CLASSNAME_RAISED,
}
export default class Button extends Component {
@@ -20,7 +22,7 @@ export default class Button extends Component {
type: PropTypes.string,
large: PropTypes.bool,
className: PropTypes.string,
- children: PropTypes.string,
+ children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
}
render () {
@@ -29,6 +31,7 @@ export default class Button extends Component {
return (
<button
className={classnames(
+ 'button',
typeHash[type],
large && CLASSNAME_LARGE,
className
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index c255fd64d..e67fbe45b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -5,6 +5,7 @@ const inherits = require('util').inherits
const connect = require('react-redux').connect
const actions = require('../../actions')
const GasModalCard = require('./gas-modal-card')
+import Button from '../button'
const ethUtil = require('ethereumjs-util')
@@ -353,16 +354,16 @@ CustomizeGasModal.prototype.render = function () {
}, [this.context.t('revert')]),
h('div.send-v2__customize-gas__buttons', [
- h('button.btn-default.send-v2__customize-gas__cancel', {
+ h(Button, {
+ type: 'default',
+ className: 'send-v2__customize-gas__cancel',
onClick: this.props.hideModal,
- style: {
- marginRight: '10px',
- },
}, [this.context.t('cancel')]),
-
- h('button.btn-primary.send-v2__customize-gas__save', {
+ h(Button, {
+ type: 'primary',
+ className: 'send-v2__customize-gas__save',
onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
- className: error && 'btn-primary--disabled',
+ disabled: error,
}, [this.context.t('save')]),
]),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index bc577fda0..248ffe008 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js')
const QrView = require('../qr-code')
const EditableLabel = require('../editable-label')
+import Button from '../button'
+
function mapStateToProps (state) {
return {
network: state.metamask.network,
@@ -80,12 +82,17 @@ AccountDetailsModal.prototype.render = function () {
h('div.account-modal-divider'),
- h('button.btn-primary.account-modal__button', {
+ h(Button, {
+ type: 'primary',
+ className: 'account-modal__button',
onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
}, this.context.t('etherscanView')),
// Holding on redesign for Export Private Key functionality
- exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
+
+ exportPrivateKeyFeatureEnabled ? h(Button, {
+ type: 'primary',
+ className: 'account-modal__button',
onClick: () => showExportPrivateKeyModal(),
}, this.context.t('exportPrivateKey')) : null,
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 0337c5413..3f526bd43 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import GasModalCard from '../../customize-gas-modal/gas-modal-card'
import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../button'
import {
getDecimalGasLimit,
@@ -116,21 +117,23 @@ export default class CustomizeGas extends Component {
{ t('revert') }
</div>
<div className="customize-gas__buttons">
- <button
- className="btn-default customize-gas__cancel"
+ <Button
+ type="default"
+ className="customize-gas__cancel"
onClick={() => hideModal()}
style={{ marginRight: '10px' }}
>
{ t('cancel') }
- </button>
- <button
- className="btn-primary customize-gas__save"
+ </Button>
+ <Button
+ type="primary"
+ className="customize-gas__save"
onClick={() => this.handleSave()}
style={{ marginRight: '10px' }}
disabled={!valid}
>
{ t('save') }
- </button>
+ </Button>
</div>
</div>
</div>
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d..09137d39a 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -7,6 +7,8 @@ const actions = require('../../actions')
const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
const ShapeshiftForm = require('../shapeshift-form')
+import Button from '../button'
+
let DIRECT_DEPOSIT_ROW_TITLE
let DIRECT_DEPOSIT_ROW_TEXT
let COINBASE_ROW_TITLE
@@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({
]),
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
- h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
+ h(Button, {
+ type: 'primary',
+ className: 'deposit-ether-modal__deposit-button',
+ large: true,
onClick: onButtonClick,
}, [buttonLabel]),
]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 60a416304..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors')
const ReadOnlyInput = require('../readonly-input')
const copyToClipboard = require('copy-to-clipboard')
const { checksumAddress } = require('../../util')
+import Button from '../button'
function mapStateToPropsFactory () {
let selectedIdentity = null
@@ -97,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
})
}
-ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
- return h('button', {
- className,
- onClick,
- }, label)
-}
-
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [
- !privateKey && this.renderButton(
- 'btn-default btn--large export-private-key__button export-private-key__button--cancel',
- () => hideModal(),
- 'Cancel'
- ),
+ !privateKey && h(Button, {
+ type: 'default',
+ large: true,
+ className: 'export-private-key__button export-private-key__button--cancel',
+ onClick: () => hideModal(),
+ }, this.context.t('cancel')),
(privateKey
- ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
- : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+ ? (
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'export-private-key__button',
+ onClick: () => hideModal(),
+ }, this.context.t('done'))
+ ) : (
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'export-private-key__button',
+ onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+ }, this.context.t('confirm'))
+ )
),
])
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')]),
]),
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7d7d3f462..7782b541c 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,6 +8,8 @@ const { requestRevealSeedWords } = require('../../../actions')
const { DEFAULT_ROUTE } = require('../../../routes')
const ExportTextContainer = require('../../export-text-container')
+import Button from '../../button'
+
const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
@@ -106,10 +108,16 @@ class RevealSeedPage extends Component {
renderPasswordPromptFooter () {
return (
h('.page-container__footer', [
- h('button.btn-default.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('cancel')),
- h('button.btn-primary.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'page-container__footer-button',
onClick: event => this.handleSubmit(event),
disabled: this.state.password === '',
}, this.context.t('next')),
@@ -120,7 +128,10 @@ class RevealSeedPage extends Component {
renderRevealSeedFooter () {
return (
h('.page-container__footer', [
- h('button.btn-default.btn--large.page-container__footer-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'page-container__footer-button',
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('close')),
])
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index a5ea1b89c..423276cf3 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -13,6 +13,8 @@ const ToggleButton = require('react-toggle-button')
const { REVEAL_SEED_ROUTE } = require('../../../routes')
const locales = require('../../../../../app/_locales/index.json')
+import Button from '../../button'
+
const getInfuraCurrencyOptions = () => {
const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
@@ -241,7 +243,10 @@ class Settings extends Component {
]),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'settings__button',
onClick (event) {
window.logStateString((err, result) => {
if (err) {
@@ -266,7 +271,10 @@ class Settings extends Component {
h('div.settings__content-item', this.context.t('revealSeedWords')),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--red', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'settings__button--red',
onClick: event => {
event.preventDefault()
history.push(REVEAL_SEED_ROUTE)
@@ -286,7 +294,10 @@ class Settings extends Component {
h('div.settings__content-item', this.context.t('useOldUI')),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--orange', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'settings__button--orange',
onClick (event) {
event.preventDefault()
setFeatureFlagToBeta()
@@ -305,7 +316,10 @@ class Settings extends Component {
h('div.settings__content-item', this.context.t('resetAccount')),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.btn-primary.btn--large.settings__button--orange', {
+ h(Button, {
+ type: 'primary',
+ large: true,
+ className: 'settings__button--orange',
onClick (event) {
event.preventDefault()
showResetAccountConfirmationModal()
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf..a842bcc8b 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -9,6 +9,8 @@ const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions
const { isValidAddress } = require('../util')
const SimpleDropdown = require('./dropdowns/simple-dropdown')
+import Button from './button'
+
function mapStateToProps (state) {
const {
coinOptions,
@@ -242,8 +244,10 @@ ShapeshiftForm.prototype.render = function () {
]),
- !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
- className: btnClass,
+ !depositAddress && h(Button, {
+ type: 'primary',
+ large: true,
+ className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
disabled: !token,
onClick: () => this.onBuyWithShapeShift(),
}, [this.context.t('buy')]),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a..2bfa350d3 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -23,6 +23,7 @@ const {
} = require('../selectors.js')
import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
const { DEFAULT_ROUTE } = require('../routes')
@@ -248,7 +249,10 @@ SignatureRequest.prototype.renderFooter = function () {
}
return h('div.request-signature__footer', [
- h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+ h(Button, {
+ type: 'default',
+ large: true,
+ className: 'request-signature__footer__cancel-button',
onClick: event => {
cancel(event).then(() => {
this.props.clearConfirmTransaction()
@@ -256,7 +260,9 @@ SignatureRequest.prototype.renderFooter = function () {
})
},
}, this.context.t('cancel')),
- h('button.btn-primary.btn--large', {
+ h(Button, {
+ type: 'primary',
+ large: true,
onClick: event => {
sign(event).then(() => {
this.props.clearConfirmTransaction()
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 77c7f3a4b..064a6ab55 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -17,6 +17,8 @@ const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
+import Button from './button'
+
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
@@ -199,7 +201,9 @@ WalletView.prototype.render = function () {
h(TokenList),
- h('button.btn-primary.wallet-view__add-token-button', {
+ h(Button, {
+ type: 'primary',
+ className: 'wallet-view__add-token-button',
onClick: () => {
history.push(ADD_TOKEN_ROUTE)
sidebarOpen && hideSidebar()
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 34565767f..655188a3e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,7 @@
Buttons
*/
-.btn-default,
-.btn-primary,
-.btn-secondary,
-.btn-confirm {
+.button {
height: 44px;
background: $white;
display: flex;
@@ -79,6 +76,16 @@
background-color: $curious-blue;
}
+.btn-raised {
+ color: $curious-blue;
+ background-color: $white;
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+ padding: 6px;
+ height: initial;
+ width: initial;
+ min-width: initial;
+}
+
.btn--large {
height: 54px;
}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 806ac8536..abc77b75a 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -833,6 +833,10 @@
line-height: 12px;
color: $red;
}
+
+ &__cancel {
+ margin-right: 10px;
+ }
}
&__gas-modal-card {