aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app/components/button/button.component.js23
-rw-r--r--ui/app/components/button/button.stories.js19
-rw-r--r--ui/app/components/customize-gas-modal/index.js2
-rw-r--r--ui/app/components/modals/deposit-ether-modal.js2
-rw-r--r--ui/app/components/modals/export-private-key-modal.js6
-rw-r--r--ui/app/components/pages/add-token/add-token.component.js2
-rw-r--r--ui/app/components/pages/confirm-add-token/confirm-add-token.component.js2
-rw-r--r--ui/app/components/pages/create-account/import-account/json.js4
-rw-r--r--ui/app/components/pages/create-account/import-account/private-key.js6
-rw-r--r--ui/app/components/pages/create-account/new-account.js4
-rw-r--r--ui/app/components/pages/keychains/reveal-seed.js6
-rw-r--r--ui/app/components/pages/settings/settings.js8
-rw-r--r--ui/app/components/shapeshift-form.js2
-rw-r--r--ui/app/components/signature-request.js4
-rw-r--r--ui/app/css/itcss/components/buttons.scss49
-rw-r--r--ui/app/send-v2.js2
16 files changed, 79 insertions, 62 deletions
diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index fe3bf363c..e8e798445 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -2,20 +2,15 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
-const SECONDARY = 'secondary'
+const CLASSNAME_DEFAULT = 'btn-default'
const CLASSNAME_PRIMARY = 'btn-primary'
-const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg'
const CLASSNAME_SECONDARY = 'btn-secondary'
-const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg'
+const CLASSNAME_LARGE = 'btn--large'
-const getClassName = (type, large = false) => {
- let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY
-
- if (large) {
- output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}`
- }
-
- return output
+const typeHash = {
+ default: CLASSNAME_DEFAULT,
+ primary: CLASSNAME_PRIMARY,
+ secondary: CLASSNAME_SECONDARY,
}
class Button extends Component {
@@ -24,7 +19,11 @@ class Button extends Component {
return (
<button
- className={classnames(getClassName(type, large), className)}
+ className={classnames(
+ typeHash[type],
+ large && CLASSNAME_LARGE,
+ className
+ )}
{ ...buttonProps }
>
{ this.props.children }
diff --git a/ui/app/components/button/button.stories.js b/ui/app/components/button/button.stories.js
index d1e14e869..dec084a25 100644
--- a/ui/app/components/button/button.stories.js
+++ b/ui/app/components/button/button.stories.js
@@ -13,13 +13,21 @@ storiesOf('Button', module)
{text('text', 'Click me')}
</Button>
)
- .add('secondary', () => (
+ .add('secondary', () =>
<Button
onClick={action('clicked')}
type="secondary"
>
{text('text', 'Click me')}
</Button>
+ )
+ .add('default', () => (
+ <Button
+ onClick={action('clicked')}
+ type="default"
+ >
+ {text('text', 'Click me')}
+ </Button>
))
.add('large primary', () => (
<Button
@@ -39,3 +47,12 @@ storiesOf('Button', module)
{text('text', 'Click me')}
</Button>
))
+ .add('large default', () => (
+ <Button
+ onClick={action('clicked')}
+ type="default"
+ large
+ >
+ {text('text', 'Click me')}
+ </Button>
+ ))
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 1ff8eea87..e3529041b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -308,7 +308,7 @@ CustomizeGasModal.prototype.render = function () {
}, [this.context.t('revert')]),
h('div.send-v2__customize-gas__buttons', [
- h('button.btn-secondary.send-v2__customize-gas__cancel', {
+ h('button.btn-default.send-v2__customize-gas__cancel', {
onClick: this.props.hideModal,
style: {
marginRight: '10px',
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index ad5f9b695..2daa7fa1d 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -109,7 +109,7 @@ DepositEtherModal.prototype.renderRow = function ({
]),
!hideButton && h('div.deposit-ether-modal__buy-row__button', [
- h('button.btn-primary--lg.deposit-ether-modal__deposit-button', {
+ h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
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 447e43b7a..80ece425f 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -87,14 +87,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
return h('div.export-private-key-buttons', {}, [
!privateKey && this.renderButton(
- 'btn-secondary--lg export-private-key__button export-private-key__button--cancel',
+ 'btn-default btn--large export-private-key__button export-private-key__button--cancel',
() => hideModal(),
'Cancel'
),
(privateKey
- ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.context.t('done'))
- : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+ ? 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'))
),
])
diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index 0677b4317..1f4b37b53 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -323,7 +323,7 @@ class AddToken extends Component {
</div>
<div className="page-container__footer">
<Button
- type="secondary"
+ type="default"
large
className="page-container__footer-button"
onClick={() => {
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 9db9efc37..65d654b92 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -87,7 +87,7 @@ export default class ConfirmAddToken extends Component {
</div>
<div className="page-container__footer">
<Button
- type="secondary"
+ type="default"
large
className="page-container__footer-button"
onClick={() => history.push(ADD_TOKEN_ROUTE)}
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 0a3314b2a..0164417ec 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -51,7 +51,7 @@ class JsonImportSubview extends Component {
h('div.new-account-create-form__buttons', {}, [
- h('button.btn-secondary.new-account-create-form__button', {
+ h('button.btn-default.new-account-create-form__button', {
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, [
this.context.t('cancel'),
@@ -105,7 +105,7 @@ class JsonImportSubview extends Component {
}
this.props.importNewJsonAccount([ fileContents, password ])
- // JS runtime requires caught rejections but failures are handled by Redux
+ // JS runtime requires caught rejections but failures are handled by Redux
.catch()
}
}
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 df7ac910a..e55a47a3c 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
@@ -59,13 +59,13 @@ PrivateKeyImportView.prototype.render = function () {
h('div.new-account-import-form__buttons', {}, [
- h('button.btn-secondary--lg.new-account-create-form__button', {
+ h('button.btn-default.btn--large.new-account-create-form__button', {
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, [
this.context.t('cancel'),
]),
- h('button.btn-primary--lg.new-account-create-form__button', {
+ h('button.btn-primary.btn--large.new-account-create-form__button', {
onClick: () => this.createNewKeychain(),
}, [
this.context.t('import'),
@@ -91,7 +91,7 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
const { importNewAccount, history } = this.props
importNewAccount('Private Key', [ privateKey ])
- // JS runtime requires caught rejections but failures are handled by Redux
+ // JS runtime requires caught rejections but failures are handled by Redux
.catch()
.then(() => history.push(DEFAULT_ROUTE))
}
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 03a5ee72d..9c94990e0 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component {
h('div.new-account-create-form__buttons', {}, [
- h('button.btn-secondary--lg.new-account-create-form__button', {
+ h('button.btn-default.btn--large.new-account-create-form__button', {
onClick: () => history.push(DEFAULT_ROUTE),
}, [
this.context.t('cancel'),
]),
- h('button.btn-primary--lg.new-account-create-form__button', {
+ h('button.btn-primary.btn--large.new-account-create-form__button', {
onClick: () => {
createAccount(newAccountName || defaultAccountName)
.then(() => history.push(DEFAULT_ROUTE))
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 685c81074..7d7d3f462 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -106,10 +106,10 @@ class RevealSeedPage extends Component {
renderPasswordPromptFooter () {
return (
h('.page-container__footer', [
- h('button.btn-secondary--lg.page-container__footer-button', {
+ h('button.btn-default.btn--large.page-container__footer-button', {
onClick: () => this.props.history.push(DEFAULT_ROUTE),
}, this.context.t('cancel')),
- h('button.btn-primary--lg.page-container__footer-button', {
+ h('button.btn-primary.btn--large.page-container__footer-button', {
onClick: event => this.handleSubmit(event),
disabled: this.state.password === '',
}, this.context.t('next')),
@@ -120,7 +120,7 @@ class RevealSeedPage extends Component {
renderRevealSeedFooter () {
return (
h('.page-container__footer', [
- h('button.btn-secondary--lg.page-container__footer-button', {
+ h('button.btn-default.btn--large.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 f58ac7ddf..ff42a13de 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -217,7 +217,7 @@ class Settings extends Component {
]),
h('div.settings__content-item', [
h('div.settings__content-item-col', [
- h('button.btn-primary--lg.settings__button', {
+ h('button.btn-primary.btn--large.settings__button', {
onClick (event) {
window.logStateString((err, result) => {
if (err) {
@@ -242,7 +242,7 @@ 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--lg.settings__button--red', {
+ h('button.btn-primary.btn--large.settings__button--red', {
onClick: event => {
event.preventDefault()
history.push(REVEAL_SEED_ROUTE)
@@ -262,7 +262,7 @@ 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--lg.settings__button--orange', {
+ h('button.btn-primary.btn--large.settings__button--orange', {
onClick (event) {
event.preventDefault()
setFeatureFlagToBeta()
@@ -281,7 +281,7 @@ 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--lg.settings__button--orange', {
+ h('button.btn-primary.btn--large.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 22ab64426..93d2023b5 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -242,7 +242,7 @@ ShapeshiftForm.prototype.render = function () {
]),
- !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', {
+ !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
className: btnClass,
disabled: !token,
onClick: () => this.onBuyWithShapeShift(),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 474fcf439..ab780dcf4 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -235,12 +235,12 @@ SignatureRequest.prototype.renderFooter = function () {
}
return h('div.request-signature__footer', [
- h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
+ h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
onClick: event => {
cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE))
},
}, this.context.t('cancel')),
- h('button.btn-primary--lg', {
+ h('button.btn-primary.btn--large', {
onClick: event => {
sign(event).then(() => this.props.history.push(DEFAULT_ROUTE))
},
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 4cbed6093..f93daec04 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,10 @@
Buttons
*/
+.btn-default,
.btn-primary,
-.btn-primary--lg,
-.btn-secondary,
-.btn-secondary--lg {
+.btn-secondary {
+ height: 44px;
background: $white;
display: flex;
justify-content: center;
@@ -20,10 +20,16 @@
width: 100%;
text-transform: uppercase;
outline: none;
+
+ &--disabled,
+ &[disabled] {
+ cursor: auto;
+ opacity: .5;
+ pointer-events: none;
+ }
}
-.btn-primary,
-.btn-primary--lg {
+.btn-primary {
color: $curious-blue;
border: 2px solid $spindle;
@@ -35,17 +41,23 @@
&:hover {
border-color: $curious-blue;
}
+}
- &--disabled,
- &[disabled] {
- cursor: auto;
- opacity: .5;
- pointer-events: none;
+.btn-secondary {
+ color: $monzo;
+ border: 2px solid lighten($monzo, 40%);
+
+ &:active {
+ background: lighten($monzo, 55%);
+ border-color: $monzo;
+ }
+
+ &:hover {
+ border-color: $monzo;
}
}
-.btn-secondary,
-.btn-secondary--lg {
+.btn-default {
color: $scorpion;
border: 2px solid $dusty-gray;
@@ -57,20 +69,9 @@
&:hover {
border-color: $scorpion;
}
-
- &--disabled,
- &[disabled] {
- cursor: auto;
- opacity: .5;
- pointer-events: none;
- }
-}
-
-.btn-primary, .btn-secondary {
- height: 44px;
}
-.btn-primary--lg, .btn-secondary--lg {
+.btn--large {
height: 54px;
}
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 6736b5571..4fbe8ff11 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -499,7 +499,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
return h('div.page-container__footer', [
h(Button, {
- type: 'secondary',
+ type: 'default',
large: true,
className: 'page-container__footer-button',
onClick: () => {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 11:51:46 +0800