diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-08-28 11:58:40 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-09-13 10:48:51 +0800 |
commit | 31089778ba3c97443e25bd3a7a901f45757894d9 (patch) | |
tree | 4bb099da7f7cbfe65a49f3a61d3000668d077e61 /ui/app/components/modals | |
parent | 930dac110aa9127380673e119b0eaab9d45b1198 (diff) | |
download | tangerine-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/components/modals')
4 files changed, 46 insertions, 23 deletions
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')) + ) ), ]) |