m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add raised type buttons to Button component. Refactor all buttons within app to Button components

Browse Source
This commit is contained in:
Alexander Tseung 2018-08-27 20:58:40 -07:00
parent 930dac110a
commit 31089778ba
18 changed files with 179 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/components/button/button.component.js
View File

@ -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

15
ui/app/components/customize-gas-modal/index.js
View File

@ -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')]),
]),

11
ui/app/components/modals/account-details-modal.js
View File

@ -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,

15
ui/app/components/modals/customize-gas/customize-gas.component.js
View File

@ -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>

7
ui/app/components/modals/deposit-ether-modal.js
View File

@ -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]),
]),

36
ui/app/components/modals/export-private-key-modal.js
View File

@ -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'))
)
),
])

29
ui/app/components/pages/create-account/connect-hardware/account-list.js
View File

@ -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, {
type: 'default',
large: true,
className: '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: 'primary',
large: true,
className: 'new-account-connect-form__button unlock',
disabled,
onClick: this.props.onUnlockAccount.bind(this, this.props.device),
}, [this.context.t('unlock')]),
])
}

15
ui/app/components/pages/create-account/connect-hardware/connect-screen.js
View File

@ -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')
),
])

19
ui/app/components/pages/create-account/import-account/json.js
View File

@ -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')]),
]),

19
ui/app/components/pages/create-account/import-account/private-key.js
View File

@ -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')]),
]),

19
ui/app/components/pages/create-account/new-account.js
View File

@ -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')]),
]),

17
ui/app/components/pages/keychains/reveal-seed.js
View File

@ -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')),
])

22
ui/app/components/pages/settings/settings.js
View File

@ -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()

8
ui/app/components/shapeshift-form.js
View File

@ -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')]),

10
ui/app/components/signature-request.js
View File

@ -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()

6
ui/app/components/wallet-view.js
View File

@ -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()

15
ui/app/css/itcss/components/buttons.scss
View File

@ -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;
}

4
ui/app/css/itcss/components/send.scss
View File

@ -833,6 +833,10 @@
line-height: 12px;
color: $red;
}
&__cancel {
margin-right: 10px;
}
}
&__gas-modal-card {