From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 10 Jan 2018 21:09:09 -0800 Subject: [PATCH 1/5] Update main view styling --- app/images/metamask-fox.svg | 128 ++++++++++++++++++ ui/app/app.js | 14 +- ui/app/components/balance-component.js | 2 +- ui/app/components/token-cell.js | 2 +- ui/app/components/tx-view.js | 14 +- ui/app/css/itcss/components/header.scss | 8 +- ui/app/css/itcss/components/hero-balance.scss | 30 ++-- .../css/itcss/components/newui-sections.scss | 29 ++-- ui/app/css/itcss/components/token-list.scss | 6 +- .../itcss/components/transaction-list.scss | 6 +- .../css/itcss/components/wallet-balance.scss | 22 +-- ui/app/css/itcss/settings/variables.scss | 1 + yarn.lock | 23 +--- 13 files changed, 199 insertions(+), 86 deletions(-) create mode 100644 app/images/metamask-fox.svg diff --git a/app/images/metamask-fox.svg b/app/images/metamask-fox.svg new file mode 100644 index 000000000..f3c24f79e --- /dev/null +++ b/app/images/metamask-fox.svg @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/app/app.js b/ui/app/app.js index c6fce0e47..73e5c06db 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -253,19 +253,13 @@ App.prototype.renderAppBar = function () { }, [ // mini logo h('img.metafox-icon', { - height: 29, - width: 29, - src: '/images/icon-128.png', + height: 42, + width: 42, + src: '/images/metamask-fox.svg', }), // metamask name - h('h1', { - style: { - position: 'relative', - paddingLeft: '9px', - color: '#5B5D67', - }, - }, 'MetaMask'), + h('h1', 'MetaMask'), ]), diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index 50007ce14..d591ab455 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -40,7 +40,7 @@ BalanceComponent.prototype.render = function () { // style: {}, // }), h(Identicon, { - diameter: 45, + diameter: 50, address: token && token.address, network, }), diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 677b66830..59552f4a0 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -106,7 +106,7 @@ TokenCell.prototype.render = function () { h(Identicon, { className: 'token-list-item__identicon', - diameter: 45, + diameter: 50, address, network, }), diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index e42a20c85..7bddbbef4 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -68,18 +68,14 @@ TxView.prototype.renderButtons = function () { return !selectedToken ? ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - }, + h('button.hero-balance-button', { onClick: () => showModal({ name: 'BUY', }), }, 'DEPOSIT'), - h('button.btn-clear', { + h('button.hero-balance-button', { style: { - textAlign: 'center', marginLeft: '0.8em', }, onClick: showSendPage, @@ -88,11 +84,7 @@ TxView.prototype.renderButtons = function () { ) : ( h('div.flex-row.flex-center.hero-balance-buttons', [ - h('button.btn-clear', { - style: { - textAlign: 'center', - marginLeft: '0.8em', - }, + h('button.hero-balance-button', { onClick: showSendTokenPage, }, 'SEND'), ]) diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index a6332f819..2a1f7abc7 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -53,7 +53,7 @@ } @media screen and (min-width: 1281px) { - width: 65vw; + width: 62vw; } } @@ -61,8 +61,10 @@ font-family: Roboto; text-transform: uppercase; font-weight: 400; - color: #22232c; // $shark - line-height: 29px; + font-size: 1.1rem; + position: relative; + padding-left: 15px; + color: #5b5d67; @media screen and (max-width: 575px) { display: none; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index bdbdd2645..643363f95 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,7 +16,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 2.37em .8em; + margin: 2.3em 2.37em .8em; } .balance-container { @@ -42,8 +42,9 @@ text-align: center; .token-amount { - font-size: 175%; - margin-top: 12.5%; + font-size: 1.75rem; + margin-top: 1rem; + font-weight: 400; } .fiat-amount { @@ -54,12 +55,13 @@ } @media screen and (min-width: $break-large) { - margin-left: 3%; + margin-left: .8em; justify-content: flex-start; align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; + font-weight: 400; } .fiat-amount { @@ -69,13 +71,6 @@ } } - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } - .hero-balance-buttons { @media screen and (max-width: $break-small) { @@ -112,3 +107,14 @@ } } } + +.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/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 61dfbd176..3ae47cb35 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -4,7 +4,7 @@ // Component Colors $tx-view-bg: $white; -$wallet-view-bg: $wild-sand; +$wallet-view-bg: $alabaster; // Main container .main-container { @@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand; .wallet-view { display: flex; flex-direction: column; - flex: 33.5 1 33.5%; + flex: 32 1 32%; width: 0; background: $wallet-view-bg; z-index: 200; @@ -69,22 +69,21 @@ $wallet-view-bg: $wild-sand; } &__keyring-label { - height: 40px; + height: 50px; color: $dusty-gray; font-family: Roboto; font-size: 10px; - line-height: 40px; text-align: right; - padding: 0 20px; + padding: 17px 20px 0; + box-sizing: border-box; } &__details-button { color: $curious-blue; font-size: 10px; - line-height: 13px; text-align: center; border: 1px solid $curious-blue; - border-radius: 10.5px; + border-radius: 17px; background-color: transparent; margin: 0 auto; padding: 4px 12px; @@ -121,12 +120,12 @@ $wallet-view-bg: $wild-sand; &__add-token-button { flex: 0 0 auto; - color: $dusty-gray; + color: $curious-blue; font-size: 14px; line-height: 19px; text-align: center; margin: 36px auto; - border: 1px solid $dusty-gray; + border: 1px solid $curious-blue; border-radius: 2px; font-weight: 300; background: none; @@ -199,7 +198,7 @@ $wallet-view-bg: $wild-sand; .main-container { // margin-top: 6.9vh; - width: 85%; + width: 85vw; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -208,7 +207,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { // margin-top: 6.9vh; - width: 80%; + width: 80vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -217,7 +216,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { // margin-top: 6.9vh; - width: 65%; + width: 62vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -252,11 +251,11 @@ $wallet-view-bg: $wild-sand; // wallet view .account-name { font-size: 24px; - font-weight: 300; + font-weight: 400; line-height: 20px; - color: $scorpion; + color: $black; margin-top: 8px; - margin-bottom: 24px; + margin-bottom: .9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index d4add71b1..5cd5b3807 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -12,7 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( position: relative; &__token-balance { - font-size: 130%; + font-size: 1.5rem; + font-weight: 400; @media #{$wallet-balance-breakpoint-range} { font-size: 105%; @@ -34,7 +35,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &--active { - background-color: rgba($wallet-balance-bg, 1); + background-color: $manatee; + color: $white; } &__identicon { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a5d508f11..0ff0b3dda 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -32,13 +32,9 @@ } @media screen and (min-width: $break-large) { - .tx-list-header-wrapper { - flex: 0 0 55px; - } - .tx-list-header { font-size: 16px; - margin: 1.5em 2.37em; + margin: 1.1em 2.37em .8em; } .tx-list-container::-webkit-scrollbar { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 64b291b89..44f405e08 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( background: rgba($wallet-balance-bg, 0); &--active { - background: rgba($wallet-balance-bg, 1); + background: $manatee; + color: $white; } } @@ -41,7 +42,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; + font-weight: 400; } .fiat-amount { @@ -61,11 +63,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } } } - - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } +} + +.balance-icon { + border-radius: 25px; + width: 50px; + height: 50px; + border: 1px solid $alto; + padding: 5px; + background: $white; } diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 387d14b5f..7e723966b 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -42,6 +42,7 @@ $malibu-blue: #7ac9fd; $athens-grey: #e9edf0; $jaffa: #f28930; $geyser: #d2d8dd; +$manatee: #93949d; /* Z-Indicies diff --git a/yarn.lock b/yarn.lock index 3a22dcf98..f9c705843 100644 --- a/yarn.lock +++ b/yarn.lock @@ -508,7 +508,7 @@ async-eventemitter@^0.2.2: dependencies: async "^2.4.0" -"async-eventemitter@github:ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c": +async-eventemitter@ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c: version "0.2.3" resolved "https://codeload.github.com/ahultgren/async-eventemitter/tar.gz/fa06e39e56786ba541c180061dbf2c0a5bbf951c" dependencies: @@ -2210,10 +2210,6 @@ clone-stats@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680" -clone@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f" - clone@^1.0.0, clone@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f" @@ -11141,12 +11137,12 @@ vinyl-fs@^3.0.0: vinyl "^2.0.0" vinyl-sourcemap "^1.1.0" -vinyl-source-stream@^1.1.0: - version "1.1.2" - resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-1.1.2.tgz#62b53a135610a896e98ca96bee3a87f008a8e780" +vinyl-source-stream@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/vinyl-source-stream/-/vinyl-source-stream-2.0.0.tgz#f38a5afb9dd1e93b65d550469ac6182ac4f54b8e" dependencies: through2 "^2.0.3" - vinyl "^0.4.3" + vinyl "^2.1.0" vinyl-sourcemap@^1.1.0: version "1.1.0" @@ -11166,13 +11162,6 @@ vinyl-sourcemaps-apply@^0.2.0: dependencies: source-map "^0.5.1" -vinyl@^0.4.3: - version "0.4.6" - resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.4.6.tgz#2f356c87a550a255461f36bbeb2a5ba8bf784847" - dependencies: - clone "^0.2.0" - clone-stats "^0.0.1" - vinyl@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-0.5.3.tgz#b0455b38fc5e0cf30d4325132e461970c2091cde" @@ -11189,7 +11178,7 @@ vinyl@^1.1.0, vinyl@^1.2.0: clone-stats "^0.0.1" replace-ext "0.0.1" -vinyl@^2.0.0: +vinyl@^2.0.0, vinyl@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.1.0.tgz#021f9c2cf951d6b939943c89eb5ee5add4fd924c" dependencies: From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: [PATCH 2/5] 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'), ]) From b0a6bfdeece8a5afb860bc47f01373d08a0895b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:59:00 -0800 Subject: [PATCH 3/5] Change styling for network dropdown --- ui/app/components/network.js | 41 ++++++----------------- ui/app/css/itcss/components/network.scss | 42 +++++++++--------------- 2 files changed, 25 insertions(+), 58 deletions(-) diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 5a8d0763d..3f147159b 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -39,7 +39,6 @@ Network.prototype.render = function () { }, src: 'images/loading.svg', }), - h('i.fa.fa-caret-down.network-caret'), ]) } else if (providerName === 'mainnet') { hoverText = 'Main Ethereum Network' @@ -85,12 +84,8 @@ Network.prototype.render = function () { backgroundColor: '#038789', // $blue-lagoon nonSelectBackgroundColor: '#15afb2', }), - h('.network-name', { - style: { - color: '#039396', - }}, - 'Main Network'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Main Network'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'ropsten-test-network': return h('.network-indicator', [ @@ -98,12 +93,8 @@ Network.prototype.render = function () { backgroundColor: '#e91550', // $crimson nonSelectBackgroundColor: '#ec2c50', }), - h('.network-name', { - style: { - color: '#ff6666', - }}, - 'Ropsten Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Ropsten Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'kovan-test-network': return h('.network-indicator', [ @@ -111,12 +102,8 @@ Network.prototype.render = function () { backgroundColor: '#690496', // $purple nonSelectBackgroundColor: '#b039f3', }), - h('.network-name', { - style: { - color: '#690496', - }}, - 'Kovan Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Kovan Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) case 'rinkeby-test-network': return h('.network-indicator', [ @@ -124,12 +111,8 @@ Network.prototype.render = function () { backgroundColor: '#ebb33f', // $tulip-tree nonSelectBackgroundColor: '#ecb23e', }), - h('.network-name', { - style: { - color: '#e7a218', - }}, - 'Rinkeby Test Net'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Rinkeby Test Net'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) default: return h('.network-indicator', [ @@ -140,12 +123,8 @@ Network.prototype.render = function () { }, }), - h('.network-name', { - style: { - color: '#AEAEAE', - }}, - 'Private Network'), - h('i.fa.fa-caret-down.fa-lg.network-caret'), + h('.network-name', 'Private Network'), + h('i.fa.fa-chevron-down.fa-lg.network-caret'), ]) } })(), diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 98dbdffb2..d9a39b8d5 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,41 +8,25 @@ } .network-component.pointer { - border: 1px solid $shark; + border: 2px solid $silver; border-radius: 82px; - padding: 6px; + padding: 3px; flex: 0 0 auto; - &.ethereum-network { - border-color: rgb(3, 135, 137); - - .menu-icon-circle div { - background-color: rgba(3, 135, 137, .7) !important; - } + &.ethereum-network .menu-icon-circle div { + background-color: rgba(3, 135, 137, .7) !important; } - &.ropsten-test-network { - border-color: rgb(233, 21, 80); - - .menu-icon-circle div { - background-color: rgba(233, 21, 80, .7) !important; - } + &.ropsten-test-network .menu-icon-circle div { + background-color: rgba(233, 21, 80, .7) !important; } - &.kovan-test-network { - border-color: rgb(105, 4, 150); - - .menu-icon-circle div { - background-color: rgba(105, 4, 150, .7) !important; - } + &.kovan-test-network .menu-icon-circle div { + background-color: rgba(105, 4, 150, .7) !important; } - &.rinkeby-test-network { - border-color: rgb(235, 179, 63); - - .menu-icon-circle div { - background-color: rgba(235, 179, 63, .7) !important; - } + &.rinkeby-test-network .menu-icon-circle div { + background-color: rgba(235, 179, 63, .7) !important; } } @@ -66,11 +50,12 @@ } .network-name { - line-height: 15px; padding: 0 4px; font-family: Roboto; font-size: 12px; flex: 1 0 auto; + color: $tundora; + font-weight: 500; } .network-droppo { @@ -167,3 +152,6 @@ line-height: 18px; } +.network-caret { + margin: 0 8px 2px; +} From b35e4e026419e42255dbeddee0fe39422fb2bce8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 17:06:30 -0800 Subject: [PATCH 4/5] Fix lint errors --- ui/app/send-v2.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index cc6635e82..ca73fa5ea 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -516,7 +516,6 @@ SendTransactionScreen.prototype.renderFooter = function () { } = this.props const noErrors = !amountError && toError === null - const errorClass = noErrors ? '' : '__disabled' return h('div.send-v2__footer', [ h('button.btn-cancel.send-v2__cancel-btn', { From 0f4bfcb02e3a04f044a571e01a4977dae2afec8e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 17:12:58 -0800 Subject: [PATCH 5/5] Fix token balance color --- ui/app/css/itcss/components/hero-balance.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a7a883909..99fd2a96d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,7 +37,9 @@ } .balance-display { - color: $black; + .token-amount { + color: $black; + } @media screen and (max-width: $break-small) { text-align: center;