From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: [PATCH] Update styling for buttons, font weights --- .../modals/account-details-modal.js | 4 +- .../modals/export-private-key-modal.js | 10 +++-- .../pending-tx/confirm-send-ether.js | 4 +- .../pending-tx/confirm-send-token.js | 4 +- ui/app/components/tx-view.js | 6 +-- ui/app/components/wallet-view.js | 4 +- ui/app/css/itcss/components/buttons.scss | 38 ++++++++++++++++++- ui/app/css/itcss/components/confirm.scss | 9 +---- ui/app/css/itcss/components/hero-balance.scss | 31 +-------------- ui/app/css/itcss/components/modal.scss | 29 +++++--------- .../css/itcss/components/newui-sections.scss | 27 ++++--------- ui/app/css/itcss/components/send.scss | 36 +++--------------- ui/app/css/itcss/components/token-list.scss | 1 - .../css/itcss/components/wallet-balance.scss | 1 - ui/app/css/itcss/settings/variables.scss | 1 + ui/app/send-v2.js | 5 ++- 16 files changed, 84 insertions(+), 126 deletions(-) diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js index 4bf671834..c1f7a3236 100644 --- a/ui/app/components/modals/account-details-modal.js +++ b/ui/app/components/modals/account-details-modal.js @@ -62,12 +62,12 @@ AccountDetailsModal.prototype.render = function () { h('div.account-modal-divider'), - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }), }, 'View account on Etherscan'), // Holding on redesign for Export Private Key functionality - h('button.btn-clear', { + h('button.btn-clear.account-modal__button', { onClick: () => showExportPrivateKeyModal(), }, 'Export private key'), diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js index 193755df5..422f23f44 100644 --- a/ui/app/components/modals/export-private-key-modal.js +++ b/ui/app/components/modals/export-private-key-modal.js @@ -79,11 +79,15 @@ 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-clear btn-cancel', () => hideModal(), 'Cancel'), + !privateKey && this.renderButton( + 'btn-cancel export-private-key__button export-private-key__button--cancel', + () => hideModal(), + 'Cancel' + ), (privateKey - ? this.renderButton('btn-clear', () => hideModal(), 'Done') - : this.renderButton('btn-clear', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Show') + ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done') + : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm') ), ]) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 566224864..652300c94 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index aa4f29fb0..ad489c3e9 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index 7bddbbef4..72183f0f7 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -68,13 +68,13 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { onClick: () => showModal({ name: 'BUY', }), }, 'DEPOSIT'), - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { style: { marginLeft: '0.8em', }, @@ -84,7 +84,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.hero-balance-button', { + h('button.btn-clear.hero-balance-button', { onClick: showSendTokenPage, }, 'SEND'), ]) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3cb7a8b76..b1ef83cee 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -130,7 +130,7 @@ WalletView.prototype.render = function () { selectedIdentity.name, ]), - h('button.wallet-view__details-button', 'DETAILS'), + h('button.btn-clear.wallet-view__details-button', 'DETAILS'), ]), ]), @@ -151,7 +151,7 @@ WalletView.prototype.render = function () { h(TokenList), - h('button.wallet-view__add-token-button', { + h('button.btn-clear.wallet-view__add-token-button', { onClick: () => { showAddTokenPage() hideSidebar() diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8ba084b4a..1450b71cc 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -6,9 +6,43 @@ background-color: #02c9b1; // TODO: reusable color in colors.css } -button.btn-clear { +.btn-clear { background: $white; - border: 1px solid; + text-align: center; + padding: .8rem 1rem; + color: $curious-blue; + border: 2px solid $spindle; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-cancel { + background: $white; + text-align: center; + padding: .9rem 1rem; + color: $scorpion; + border: 2px solid $dusty-gray; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $scorpion; + } } // No longer used in flat design, remove when modal buttons done diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 4a8232e39..e75a827f9 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -102,15 +102,10 @@ .confirm-screen-back-button { background: transparent; - border: 1px solid $curious-blue; left: 24px; position: absolute; - text-align: center; - color: $curious-blue; - padding: 6px 13px 7px 12px; - border-radius: 2px; - height: 30px; - width: 54px; + padding: 6px 12px; + font-size: .7rem; @media screen and (max-width: $break-small) { margin-right: 12px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 643363f95..a7a883909 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,6 +37,7 @@ } .balance-display { + color: $black; @media screen and (max-width: $break-small) { text-align: center; @@ -44,7 +45,6 @@ .token-amount { font-size: 1.75rem; margin-top: 1rem; - font-weight: 400; } .fiat-amount { @@ -61,7 +61,6 @@ .token-amount { font-size: 1.5rem; - font-weight: 400; } .fiat-amount { @@ -84,37 +83,9 @@ flex-grow: 2; justify-content: flex-end; } - - button.btn-clear { - background: $white; - border: 1px solid; - border-radius: 2px; - font-size: 12px; - - @media screen and (max-width: $break-small) { - border-color: $curious-blue; - color: $curious-blue; - height: 36px; - } - - @media screen and (min-width: $break-large) { - border-color: $curious-blue; - color: $curious-blue; - padding: 0; - width: 85px; - height: 34px; - } - } } } .hero-balance-button { - text-align: center; - padding: .9rem 1rem; - color: $white; - background: $curious-blue; - border-radius: 2px; - font-size: .85rem; width: 6rem; - font-weight: 300; } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9b64564d6..307401666 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -258,19 +258,10 @@ width: 286px; } - .btn-clear { - min-height: 28px; - font-size: 14px; - border-color: $curious-blue; - color: $curious-blue; - border-radius: 2px; - flex-basis: 100%; - width: 75%; + .account-modal__button { margin-top: 17px; padding: 10px 22px; - height: 44px; width: 235px; - font-family: Roboto; } } @@ -346,17 +337,17 @@ display: flex; flex-direction: row; justify-content: center; +} - .btn-clear { - width: 141px; - height: 54px; - } +.export-private-key__button { + margin-top: 17px; + padding: 10px 22px; + width: 141px; + height: 54px; +} - .btn-cancel { - margin-right: 15px; - border-color: $dusty-gray; - color: $scorpion; - } +.export-private-key__button--cancel { + margin-right: 15px; } .private-key-password-display-wrapper { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 3ae47cb35..af1a6974c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -79,10 +79,7 @@ $wallet-view-bg: $alabaster; } &__details-button { - color: $curious-blue; font-size: 10px; - text-align: center; - border: 1px solid $curious-blue; border-radius: 17px; background-color: transparent; margin: 0 auto; @@ -120,16 +117,14 @@ $wallet-view-bg: $alabaster; &__add-token-button { flex: 0 0 auto; - color: $curious-blue; - font-size: 14px; - line-height: 19px; - text-align: center; margin: 36px auto; - border: 1px solid $curious-blue; - border-radius: 2px; - font-weight: 300; background: none; - padding: 9px 30px; + padding: .7rem 2rem; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } } } @@ -238,20 +233,12 @@ $wallet-view-bg: $alabaster; overflow-y: auto; background-color: $white; } - - button.btn-clear { - width: 93px; - height: 50px; - font-size: .7em; - background: $white; - border: 1px solid; - } } // wallet view .account-name { font-size: 24px; - font-weight: 400; + font-weight: 300; line-height: 20px; color: $black; margin-top: 8px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 2bd192788..beb3e519c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -526,8 +526,9 @@ } &__form { - margin: 13px 0; + padding: 13px 0; width: 100%; + overflow-y: auto; @media screen and (max-width: $break-small) { padding: 13px 0; @@ -587,7 +588,7 @@ width: 100%; height: 100%; } - + &__list { z-index: 1050; position: absolute; @@ -677,38 +678,13 @@ border-top: 1px solid $alto; background: $white; padding: 0 12px; + flex-shrink: 0; } &__next-btn, - &__cancel-btn, - &__next-btn__disabled { - width: 163px; - text-align: center; - height: 55px; - border-radius: 2px; - background-color: $white; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - line-height: 21px; - border: 1px solid; - margin: 0 4px; - } - - &__next-btn, - &__next-btn__disabled { - color: $curious-blue; - border-color: $curious-blue; - } - - &__next-btn__disabled { - opacity: .5; - cursor: auto; - } - &__cancel-btn { - color: $dusty-gray; - border-color: $dusty-gray; + width: 163px; + margin: 0 4px; } &__customize-gas { diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 5cd5b3807..bdd26099a 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -13,7 +13,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__token-balance { font-size: 1.5rem; - font-weight: 400; @media #{$wallet-balance-breakpoint-range} { font-size: 105%; diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 44f405e08..293771550 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -43,7 +43,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( .token-amount { font-size: 1.5rem; - font-weight: 400; } .fiat-amount { diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 7e723966b..8bd1ad20d 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -43,6 +43,7 @@ $athens-grey: #e9edf0; $jaffa: #f28930; $geyser: #d2d8dd; $manatee: #93949d; +$spindle: #c7ddec; /* Z-Indicies diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 7c9b6dbc6..cc6635e82 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -519,13 +519,14 @@ SendTransactionScreen.prototype.renderFooter = function () { const errorClass = noErrors ? '' : '__disabled' return h('div.send-v2__footer', [ - h('button.send-v2__cancel-btn', { + h('button.btn-cancel.send-v2__cancel-btn', { onClick: () => { clearSend() goHome() }, }, 'Cancel'), - h(`button.send-v2__next-btn${errorClass}`, { + h('button.btn-clear.send-v2__next-btn', { + disabled: !noErrors, onClick: event => this.onSubmit(event), }, 'Next'), ])