diff options
27 files changed, 166 insertions, 156 deletions
diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js index 42ed28dca..228192e7b 100644 --- a/test/integration/lib/add-token.js +++ b/test/integration/lib/add-token.js @@ -26,7 +26,7 @@ async function runAddTokenFlowTest (assert, done) { assert.ok($('.token-list-item').length === 0, 'no tokens added') // Go to Add Token screen - let addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') + let addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button') assert.ok(addTokenButton[0], 'add token button present') addTokenButton[0].click() @@ -38,14 +38,14 @@ async function runAddTokenFlowTest (assert, done) { assert.equal(addTokenTitle[0].textContent, 'Add Token', 'add token title is correct') // Cancel Add Token - const cancelAddTokenButton = await queryAsync($, 'button.btn-cancel.add-token__button') + const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.add-token__cancel-button') assert.ok(cancelAddTokenButton[0], 'cancel add token button present') cancelAddTokenButton.click() assert.ok($('.wallet-view')[0], 'cancelled and returned to account detail wallet view') // Return to Add Token Screen - addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') + addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button') assert.ok(addTokenButton[0], 'add token button present') addTokenButton[0].click() @@ -68,7 +68,7 @@ async function runAddTokenFlowTest (assert, done) { tokenWrapper[0].click() // Click Next button - let nextButton = await queryAsync($, 'button.btn-clear.add-token__button') + let nextButton = await queryAsync($, 'button.btn-primary--lg') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') nextButton[0].click() @@ -78,8 +78,8 @@ async function runAddTokenFlowTest (assert, done) { 'Would you like to add these tokens?', 'confirm add token rendered' ) - assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found') - $('button.btn-clear.add-token__button')[0].click() + assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found') + $('button.btn-primary--lg')[0].click() // Verify added token image let heroBalance = await queryAsync($, '.hero-balance') @@ -87,7 +87,7 @@ async function runAddTokenFlowTest (assert, done) { assert.ok(tokenImageUrl.indexOf(heroBalance.find('img').attr('src')) > -1, 'token added') // Return to Add Token Screen - addTokenButton = await queryAsync($, 'button.btn-clear.wallet-view__add-token-button') + addTokenButton = await queryAsync($, 'button.btn-primary.wallet-view__add-token-button') assert.ok(addTokenButton[0], 'add token button present') addTokenButton[0].click() @@ -101,14 +101,14 @@ async function runAddTokenFlowTest (assert, done) { reactTriggerChange(customInput[0]) // Click Next button - nextButton = await queryAsync($, 'button.btn-clear.add-token__button') + nextButton = await queryAsync($, 'button.btn-primary--lg') assert.equal(nextButton[0].textContent, 'Next', 'next button rendered') nextButton[0].click() // Verify symbol length error since contract address won't return symbol const errorMessage = await queryAsync($, '.add-token__add-custom-error-message') assert.ok(errorMessage[0], 'error rendered') - $('button.btn-cancel.add-token__button')[0].click() + $('button.btn-secondary--lg')[0].click() // // Confirm Add token // assert.equal( @@ -116,8 +116,8 @@ async function runAddTokenFlowTest (assert, done) { // 'Would you like to add these tokens?', // 'confirm add token rendered' // ) - // assert.ok($('button.btn-clear.add-token__button')[0], 'confirm add token button found') - // $('button.btn-clear.add-token__button')[0].click() + // assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found') + // $('button.btn-primary--lg')[0].click() // // Verify added token image // heroBalance = await queryAsync($, '.hero-balance') diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js index 9737a2283..f1116d1a6 100644 --- a/test/integration/lib/confirm-sig-requests.js +++ b/test/integration/lib/confirm-sig-requests.js @@ -27,7 +27,7 @@ async function runConfirmSigRequestsTest(assert, done) { let confirmSigRowValue = await queryAsync($, '.request-signature__row-value') assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/)) - let confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') + let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg') confirmSigSignButton[0].click() confirmSigHeadline = await queryAsync($, '.request-signature__headline') @@ -39,7 +39,7 @@ async function runConfirmSigRequestsTest(assert, done) { confirmSigRowValue = await queryAsync($, '.request-signature__row-value') assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0') - confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') + confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg') confirmSigSignButton[0].click() confirmSigHeadline = await queryAsync($, '.request-signature__headline') @@ -49,7 +49,7 @@ async function runConfirmSigRequestsTest(assert, done) { assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!') assert.equal(confirmSigRowValue[1].textContent, '1337') - confirmSigSignButton = await queryAsync($, '.request-signature__footer__sign-button') + confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg') confirmSigSignButton[0].click() const txView = await queryAsync($, '.tx-view') diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 9b557315c..7bd9a7a65 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -29,7 +29,7 @@ async function runSendFlowTest(assert, done) { selectState.val('send new ui') reactTriggerChange(selectState[0]) - const sendScreenButton = await queryAsync($, 'button.btn-clear.hero-balance-button') + const sendScreenButton = await queryAsync($, 'button.btn-primary.hero-balance-button') assert.ok(sendScreenButton[1], 'send screen button present') sendScreenButton[1].click() @@ -122,7 +122,7 @@ async function runSendFlowTest(assert, done) { 'send gas field should show customized gas total converted to USD' ) - const sendButton = await queryAsync($, 'button.btn-clear.page-container__footer-button') + const sendButton = await queryAsync($, 'button.btn-primary--lg.page-container__footer-button') assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') sendButton[0].click() await timeout() @@ -163,7 +163,7 @@ async function runSendFlowTest(assert, done) { sendAmountFieldInputInEdit.val('1.0') reactTriggerChange(sendAmountFieldInputInEdit[0]) - const sendButtonInEdit = await queryAsync($, '.btn-clear.page-container__footer-button') + const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button') assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') sendButtonInEdit[0].click() diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index fa25168f1..eeba73e77 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -50,13 +50,13 @@ class JsonImportSubview extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel', { + h('button.btn-secondary.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create', { + h('button.btn-primary.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ t('import'), diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js index bc9e9384e..13c8da722 100644 --- a/ui/app/accounts/import/private-key.js +++ b/ui/app/accounts/import/private-key.js @@ -48,13 +48,13 @@ PrivateKeyImportView.prototype.render = function () { h('div.new-account-import-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel.allcaps', { + h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create.allcaps', { + h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.createNewKeychain(), }, [ t('import'), diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js index 8ef842a2a..c820cdf6d 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/ui/app/accounts/new-account/create-form.js @@ -20,7 +20,7 @@ class NewAccountCreateForm extends Component { render () { const { newAccountName, defaultAccountName } = this.state - + return h('div.new-account-create-form', [ @@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component { h('div.new-account-create-form__buttons', {}, [ - h('button.new-account-create-form__button-cancel.allcaps', { + h('button.btn-secondary--lg.new-account-create-form__button', { onClick: () => this.props.goHome(), }, [ t('cancel'), ]), - h('button.new-account-create-form__button-create.allcaps', { + h('button.btn-primary--lg.new-account-create-form__button', { onClick: () => this.props.createAccount(newAccountName || defaultAccountName), }, [ t('create'), diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b3a5bdc20..edeea11d8 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -321,10 +321,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { ]), ]), h('div.add-token__buttons', [ - h('button.btn-cancel.add-token__button', { + h('button.btn-secondary--lg.add-token__cancel-button', { onClick: () => this.setState({ isShowingConfirmation: false }), }, t('back')), - h('button.btn-clear.add-token__button', { + h('button.btn-primary--lg', { onClick: () => addTokens(tokens).then(goHome), }, t('addTokens')), ]), @@ -371,10 +371,10 @@ AddTokenScreen.prototype.render = function () { ]), ]), h('div.add-token__buttons', [ - h('button.btn-cancel.add-token__button', { + h('button.btn-secondary--lg.add-token__cancel-button', { onClick: goHome, }, t('cancel')), - h('button.btn-clear.add-token__button', { + h('button.btn-primary--lg', { onClick: this.onNext, }, t('next')), ]), diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index d8384c19d..22ad98ce4 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () { }, [t('revert')]), h('div.send-v2__customize-gas__buttons', [ - h('div.send-v2__customize-gas__cancel.allcaps', { + h('button.btn-secondary.send-v2__customize-gas__cancel', { onClick: this.props.hideModal, + style: { + marginRight: '10px', + }, }, [t('cancel')]), - h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { + h('button.btn-primary.send-v2__customize-gas__save', { onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), + className: error && 'btn-primary--disabled', }, [t('save')]), ]), diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 75f989e86..927d73482 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-clear.account-modal__button', { + h('button.btn-primary.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, t('etherscanView')), // Holding on redesign for Export Private Key functionality - h('button.btn-clear.account-modal__button', { + h('button.btn-primary.account-modal__button', { onClick: () => showExportPrivateKeyModal(), }, t('exportPrivateKey')), diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js index b642513d7..2de1240fc 100644 --- a/ui/app/components/modals/deposit-ether-modal.js +++ b/ui/app/components/modals/deposit-ether-modal.js @@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({ ]), !hideButton && h('div.deposit-ether-modal__buy-row__button', [ - h('button.deposit-ether-modal__deposit-button', { + h('button.btn-primary--lg.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 017177cfd..cf42e4fa2 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -81,14 +81,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-cancel export-private-key__button export-private-key__button--cancel', + 'btn-secondary--lg export-private-key__button export-private-key__button--cancel', () => hideModal(), 'Cancel' ), (privateKey - ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done')) - : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) + ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done')) + : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm')) ), ]) diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 3f8c17932..5729f893c 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () { ]), - !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', { + !depositAddress && h('button.btn-primary--lg.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 7bf34e7b6..810a52e55 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () { } return h('div.request-signature__footer', [ - h('button.request-signature__footer__cancel-button', { + h('button.btn-secondary--lg.request-signature__footer__cancel-button', { onClick: cancel, }, t('cancel')), - h('button.request-signature__footer__sign-button', { + h('button.btn-primary--lg', { onClick: sign, }, t('sign')), ]) diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 96d776270..bf2065106 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear.hero-balance-button.allcaps', { + h('button.btn-primary.hero-balance-button', { onClick: () => showModal({ name: 'DEPOSIT_ETHER', }), }, t('deposit')), - h('button.btn-clear.hero-balance-button.allcaps', { + h('button.btn-primary.hero-balance-button', { style: { marginLeft: '0.8em', }, @@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear.hero-balance-button', { + h('button.btn-primary.hero-balance-button', { onClick: showSendTokenPage, }, t('send')), ]) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 18452205c..2c6d7f784 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -168,7 +168,7 @@ WalletView.prototype.render = function () { h(TokenList), - h('button.btn-clear.wallet-view__add-token-button', { + h('button.btn-primary.wallet-view__add-token-button', { onClick: () => { showAddTokenPage() hideSidebar() diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 13020f62f..bdf9da385 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -172,11 +172,8 @@ justify-content: center; } - &__button { - flex: 1 0 141px; - margin: 0 12px; - padding: 10px 22px; - height: 54px; + &__cancel-button { + margin-right: 1.2rem; } &__token-icons-container { @@ -334,7 +331,7 @@ } &__buttons { - padding: 12px 0; + padding: 1rem; margin: 0; border-top: 1px solid $gallery; width: 100%; diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8df8829f2..04e1ed96e 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,6 +2,76 @@ Buttons */ +.btn-primary, +.btn-primary--lg, +.btn-secondary, +.btn-secondary--lg { + background: $white; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + transition: border-color .3s ease; + padding: 0 20px; + min-width: 140px; + text-transform: uppercase; +} + +.btn-primary, +.btn-primary--lg { + color: $curious-blue; + border: 2px solid $spindle; + + &:active { + background: $zumthor; + border-color: $curious-blue; + } + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-secondary, +.btn-secondary--lg { + color: $scorpion; + border: 2px solid $dusty-gray; + + &:active { + background: $gallery; + border-color: $dusty-gray; + } + + &: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 { + height: 54px; +} + .btn-green { background-color: #02c9b1; // TODO: reusable color in colors.css } @@ -130,20 +200,6 @@ button.btn-thin { font-size: 13px; } -.btn-secondary { - border: 1px solid #979797; - border-radius: 2px; - background-color: $white; - font-size: 16px; - line-height: 24px; - padding: 16px 42px; - - &[disabled] { - background-color: $white !important; - opacity: .5; - } -} - .btn-tertiary { border: 1px solid transparent; border-radius: 2px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a3f051361..69cde8a0f 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -103,10 +103,11 @@ } .hero-balance-button { + min-width: initial; width: 6rem; @media #{$sub-mid-size-breakpoint-range} { - padding: 0.4rem; + padding: .4rem; width: 4rem; display: flex; flex: 1; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index a8d5e8dc2..9ae3ea7fa 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -261,7 +261,7 @@ .account-modal__button { margin-top: 17px; padding: 10px 22px; - width: 235px; + width: 286px; } } @@ -341,9 +341,8 @@ .export-private-key__button { margin-top: 17px; - padding: 10px 22px; width: 141px; - height: 54px; + min-width: initial; } .export-private-key__button--cancel { @@ -765,15 +764,7 @@ } &__deposit-button, .shapeshift-form__shapeshift-buy-btn { - height: 54px; width: 257px; - border: 1px solid $curious-blue; - border-radius: 4px; - display: flex; - justify-content: center; - font-size: 16px; - color: $curious-blue; - background-color: $white; } .shapeshift-form-wrapper { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index c2cefe4ad..aa7fed956 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -192,29 +192,8 @@ justify-content: space-between; } - &__button-cancel, - &__button-create { - height: 55px; + &__button { width: 150px; - border-radius: 2px; - background-color: #FFFFFF; - } - - &__button-cancel { - border: 1px solid $dusty-gray; - color: $dusty-gray; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; + min-width: initial; } - - &__button-create { - border: 1px solid $curious-blue; - color: $curious-blue; - font-family: Roboto; - font-size: 16px; - line-height: 21px; - text-align: center; - } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index d81099bfa..a4728afef 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -190,41 +190,19 @@ width: 100%; display: flex; align-items: center; - justify-content: space-evenly; + justify-content: center; font-size: 22px; position: relative; flex: 0 0 auto; border-top: 1px solid $geyser; + padding: 1.6rem; - &__cancel-button, - &__sign-button { - display: flex; - align-items: center; - justify-content: center; - flex: 1 0 auto; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - height: 55px; - line-height: 32px; - cursor: pointer; - border-radius: 2px; - box-shadow: none; - max-width: 162px; - margin: 12px; + button { + width: 165px; } &__cancel-button { - background: none; - border: 1px solid $dusty-gray; - margin-right: 6px; - } - - &__sign-button { - background-color: $caribbean-green; - border-width: 0; - color: $white; - margin-left: 6px; + margin-right: 1.2rem; } } -}
\ No newline at end of file +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 263b362ca..89d2be891 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -782,7 +782,6 @@ &__buttons { display: flex; justify-content: space-between; - width: 181.75px; margin-right: 21.25px; } @@ -800,13 +799,8 @@ } &__cancel, &__save, &__save__error { - height: 34.64px; width: 85.74px; - border: 1px solid $dusty-gray; - border-radius: 2px; - font-family: 'DIN OT'; - font-size: 12px; - color: $dusty-gray; + min-width: initial; } &__save__error { diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index d60ebd934..dcc9b98d5 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -130,24 +130,32 @@ cursor: pointer; } -.settings__clear-button { - font-size: 16px; - border: 1px solid $curious-blue; - color: $curious-blue; - border-radius: 2px; - padding: 18px; - background-color: $white; - text-transform: uppercase; -} - -.settings__clear-button--red { - border: 1px solid $monzo; +.settings__button--red { + border-color: lighten($monzo, 10%); color: $monzo; + + &:active { + background: lighten($monzo, 55%); + border-color: $monzo; + } + + &:hover { + border-color: $monzo; + } } -.settings__clear-button--orange { - border: 1px solid rgba(247, 134, 28, 1); - color: rgba(247, 134, 28, 1); +.settings__button--orange { + border-color: lighten($ecstasy, 20%); + color: $ecstasy; + + &:active { + background: lighten($ecstasy, 40%); + border-color: $ecstasy; + } + + &:hover { + border-color: $ecstasy; + } } .settings__info-logo-wrapper { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 08e639d74..92321394b 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -132,7 +132,7 @@ input.large-input { height: 55px; font-size: 1rem; text-transform: uppercase; - margin-right: 1rem; + margin-right: 1.2rem; border-radius: 2px; &:last-of-type { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 640fd95b8..0031238a8 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -51,6 +51,8 @@ $java: #29b6af; $wild-strawberry: #ff4a8d; $cornflower-blue: #7057ff; $saffron: #f6c343; +$zumthor: #edf7ff; +$ecstasy: #f7861c; /* Z-Indicies diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 81c4340dc..620da73f8 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -513,13 +513,13 @@ SendTransactionScreen.prototype.renderFooter = function () { const noErrors = !amountError && toError === null return h('div.page-container__footer', [ - h('button.btn-cancel.page-container__footer-button', { + h('button.btn-secondary--lg.page-container__footer-button', { onClick: () => { clearSend() goHome() }, }, t('cancel')), - h('button.btn-clear.page-container__footer-button', { + h('button.btn-primary--lg.page-container__footer-button', { disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), }, t('next')), diff --git a/ui/app/settings.js b/ui/app/settings.js index 105cbb40b..78ca6c94b 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -200,7 +200,7 @@ class Settings extends Component { ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button', { + h('button.btn-primary--lg.settings__button', { onClick (event) { window.logStateString((err, result) => { if (err) { @@ -225,7 +225,7 @@ class Settings extends Component { h('div.settings__content-item', t('revealSeedWords')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--red', { + h('button.btn-primary--lg.settings__button--red', { onClick (event) { event.preventDefault() revealSeedConfirmation() @@ -245,7 +245,7 @@ class Settings extends Component { h('div.settings__content-item', t('useOldUI')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--orange', { + h('button.btn-primary--lg.settings__button--orange', { onClick (event) { event.preventDefault() setFeatureFlagToBeta() @@ -264,7 +264,7 @@ class Settings extends Component { h('div.settings__content-item', t('resetAccount')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--orange', { + h('button.btn-primary--lg.settings__button--orange', { onClick (event) { event.preventDefault() showResetAccountConfirmationModal() |