From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: [PATCH] Various styling fixes --- ui/app/app.js | 45 ++++++----- .../components/dropdowns/network-dropdown.js | 2 +- ui/app/components/network.js | 11 ++- .../itcss/components/account-dropdown.scss | 4 +- ui/app/css/itcss/components/buttons.scss | 4 +- ui/app/css/itcss/components/confirm.scss | 2 +- ui/app/css/itcss/components/header.scss | 26 +++++-- ui/app/css/itcss/components/modal.scss | 30 ++++---- ui/app/css/itcss/components/network.scss | 77 +++++++++++++++---- .../css/itcss/components/newui-sections.scss | 20 ++--- ui/app/css/itcss/components/sections.scss | 10 +-- ui/app/css/itcss/components/send.scss | 14 ++-- ui/app/css/itcss/components/token-list.scss | 2 +- .../itcss/components/transaction-list.scss | 2 +- ui/app/css/itcss/generic/index.scss | 2 +- ui/app/css/itcss/settings/variables.scss | 4 + 16 files changed, 170 insertions(+), 85 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index fb57775b6..360ba04cf 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -27,6 +27,7 @@ const Import = require('./accounts/import') const InfoScreen = require('./info') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') +const Identicon = require('./components/identicon') const BuyView = require('./components/buy-button-subview') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') @@ -60,6 +61,7 @@ function mapStateToProps (state) { noActiveNotices: state.metamask.noActiveNotices, isInitialized: state.metamask.isInitialized, isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, currentView: state.appState.currentView, activeAddress: state.appState.activeAddress, transForward: state.appState.transForward, @@ -198,7 +200,7 @@ App.prototype.renderAppBar = function () { if (window.METAMASK_UI_TYPE === 'notification') { return null } - + console.log(this.props) return ( h('.full-width', { @@ -230,24 +232,31 @@ App.prototype.renderAppBar = function () { ]), - h('div.network-component-wrapper', { - style: {}, - }, [ - // Network Indicator - h(NetworkIndicator, { - network: this.props.network, - provider: this.props.provider, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - if (this.props.networkDropdownOpen === false) { - this.props.showNetworkDropdown() - } else { - this.props.hideNetworkDropdown() - } - }, - }), + h('div.header__right-actions', [ + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network: this.props.network, + provider: this.props.provider, + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + if (this.props.networkDropdownOpen === false) { + this.props.showNetworkDropdown() + } else { + this.props.hideNetworkDropdown() + } + }, + }), + ]), + + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, + }), ]), ]), ]), diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 4c578fbeb..567bf07a0 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () { key: 'main', closeMenu: () => this.props.hideNetworkDropdown(), onClick: () => props.setProviderType('mainnet'), - style: dropdownMenuItemStyle, + style: { ...dropdownMenuItemStyle, borderColor: '#038789' }, }, [ providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'), diff --git a/ui/app/components/network.js b/ui/app/components/network.js index 8424a479a..b24505750 100644 --- a/ui/app/components/network.js +++ b/ui/app/components/network.js @@ -1,5 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') +const classnames = require('classnames'); const inherits = require('util').inherits const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon') @@ -61,7 +62,13 @@ Network.prototype.render = function () { } return ( - h('.network-component.pointer', { + h('div.network-component.pointer', { + className: classnames('network-component pointer', { + 'ethereum-network': providerName === 'mainnet', + 'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3, + 'kovan-test-network': providerName === 'kovan', + 'rinkeby-test-network': providerName === 'rinkeby', + }), title: hoverText, onClick: (event) => this.props.onClick(event), }, [ @@ -71,7 +78,7 @@ Network.prototype.render = function () { return h('.network-indicator', [ h(NetworkDropdownIcon, { backgroundColor: '#038789', // $blue-lagoon - nonSelectBackgroundColor: '#15afb2' + nonSelectBackgroundColor: '#15afb2', }), h('.network-name', { style: { diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 42f02d84d..9966c7f3f 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,5 +1,5 @@ .account-dropdown-name { - font-family: 'DIN OT'; + font-family: Roboto; } .account-dropdown-balance { @@ -9,7 +9,7 @@ .account-dropdown-edit-button { color: $dusty-gray; - font-family: "DIN OT"; + font-family: Roboto; &:hover { color: $white; diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 2c5e6cf57..8ba084b4a 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -52,7 +52,7 @@ button.primary { box-shadow: 0 3px 6px rgba(247, 134, 28, .36); color: $white; font-size: 1.1em; - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; } @@ -62,7 +62,7 @@ button.primary { box-shadow: 0 3px 6px rgba(247, 134, 28, .36); color: #585d67; // TODO: make reusable light button color font-size: 1.1em; - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; text-align: center; line-height: 20px; diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 3576da377..15c752923 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -12,7 +12,7 @@ } @media screen and (min-width: 576px) { - top: -26px; + // top: -26px; } } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index f750ec014..4fa80f047 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -8,15 +8,24 @@ flex-flow: column nowrap; @media screen and (max-width: 575px) { - padding: 0 12px; + padding: 12px; width: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @media screen and (min-width: 576px) { - height: 14.4vh; - max-height: 97px; + height: 75px; + justify-content: center; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 32px; + background: $gallery; + bottom: -32px; + } } } @@ -45,13 +54,13 @@ } .app-header h1 { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; + font-weight: 400; color: #22232c; // $shark } h2.page-subtitle { - font-family: 'Montserrat Regular'; text-transform: uppercase; color: #aeaeae; font-size: 1em; @@ -62,6 +71,7 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; + margin-right: 20px; } .left-menu-wrapper { @@ -69,3 +79,9 @@ h2.page-subtitle { flex-direction: row; align-items: center; } + +.header__right-actions { + display: flex; + flex-flow: row nowrap; + align-items: center; +} diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index aa18ed37d..556f14389 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -8,7 +8,7 @@ align-items: center; justify-content: center; text-align: center; - font-family: 'DIN OT'; + font-family: Roboto; padding: 0 16px; } @@ -20,7 +20,7 @@ .qr-ellip-address, .ellip-address { width: 247px; border: none; - font-family: 'Montserrat Light'; + font-family: Roboto; font-size: 14px; } @@ -192,7 +192,7 @@ padding: 5px 0 31px 0; border: 1px solid $silver; border-radius: 4px; - font-family: 'Montserrat UltraLight'; + font-family: Roboto; button { cursor: pointer; @@ -208,7 +208,7 @@ &__text { margin-top: 2px; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; } @@ -252,7 +252,7 @@ justify-content: center; border: 1px solid $alto; padding: 5px 10px; - font-family: 'Montserrat Light'; + font-family: Roboto; margin-top: 7px; width: 286px; } @@ -269,7 +269,7 @@ padding: 10px 22px; height: 44px; width: 235px; - font-family: 'Montserrat Light'; + font-family: Roboto; } } @@ -320,7 +320,7 @@ .private-key-password::-webkit-input-placeholder { color: $dusty-gray; - font-family: 'Montserrat UltraLight'; + font-family: Roboto; } .private-key-password-warning { @@ -333,7 +333,7 @@ width: 292px; padding: 9px 15px; margin-top: 18px; - font-family: 'Montserrat Regular'; + font-family: Roboto; } .export-private-key-buttons { @@ -362,7 +362,7 @@ .private-key-password-display-textarea { color: $crimson; - font-family: "DIN OT"; + font-family: Roboto; font-size: 16px; line-height: 21px; border: none; @@ -384,7 +384,7 @@ position: relative; border: 1px solid $alto; box-shadow: 0 0 2px 2px $alto; - font-family: 'Montserrat Light'; + font-family: Roboto; } .new-account-modal-header { @@ -439,7 +439,7 @@ width: 100%; font-size: 1em; color: $dusty-gray; - font-family: Montserrat Light; + font-family: Roboto; font-size: 17px; margin: 0 60px; } @@ -506,7 +506,7 @@ &__symbol { color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 16px; line-height: 24px; text-align: center; @@ -517,7 +517,7 @@ height: 30px; width: 271.28px; color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 22px; line-height: 30px; text-align: center; @@ -528,7 +528,7 @@ height: 41px; width: 318px; color: $scorpion; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; text-align: center; @@ -547,7 +547,7 @@ border: 1px solid $scorpion; border-radius: 2px; color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 20px; text-align: center; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 012b1faf6..bf699ac57 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -1,14 +1,65 @@ +.network-component.pointer { + border: 1px solid $shark; + border-radius: 82px; + padding: 6px; + + &.ethereum-network { + border-color: rgb(3, 135, 137); + + .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; + } + } + + &.kovan-test-network { + border-color: rgb(105, 4, 150); + + .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; + } + } +} + +.dropdown-menu-item { + .menu-icon-circle, + .menu-icon-circle--active { + margin: 0 16px; + } +} + .network-indicator { display: flex; align-items: center; font-size: .6em; + + .fa-caret-down { + line-height: 15px; + font-size: 12px; + padding: 0 4px; + } } .network-name { - line-height: 12px; + line-height: 15px; padding: 0 4px; - font-family: 'DIN OT'; - font-size: 10px; + font-family: Roboto; + font-size: 12px; flex: 1 0 auto; } @@ -46,29 +97,27 @@ margin: 0; } -.menu-icon-circle, .menu-icon-circle--active { - height: 23px; - width: 23px; - margin: 9px; +.menu-icon-circle, +.menu-icon-circle--active { background: none; border-radius: 22px; display: flex; justify-content: center; align-items: center; border: 1px solid transparent; - background: none; + margin: 0 4px; } .menu-icon-circle--active { - border: 1px solid white; - background: rgba(100, 100, 100, 0.4); + border: 1px solid $white; + background: rgba(100, 100, 100, .4); } -.menu-icon-circle div, .menu-icon-circle--active div { +.menu-icon-circle div, +.menu-icon-circle--active div { height: 17px; width: 17px; border-radius: 17px; - opacity: 0.7; } .menu-icon-circle--active div { @@ -93,7 +142,7 @@ height: 25px; width: 75px; color: $white; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 18px; line-height: 25px; text-align: center; @@ -103,7 +152,7 @@ height: 36px; width: 265px; color: $dusty-gray; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5ce4f281c..fc1dba87c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -8,9 +8,9 @@ $wallet-view-bg: $wild-sand; // Main container .main-container { - position: absolute; + // position: absolute; z-index: $main-container-z-index; - font-family: "DIN OT Light"; + font-family: Roboto; display: flex; flex-wrap: wrap; align-items: stretch; @@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 41px; + // top: 41px; left: 0; right: 0; bottom: 0; @@ -86,7 +86,9 @@ $wallet-view-bg: $wild-sand; .sidebar-overlay { z-index: $sidebar-overlay-z-index; position: fixed; - top: 41px; + // top: 41px; + height: 100%; + width: 100%; left: 0; right: 0; bottom: 0; @@ -107,7 +109,7 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 85%; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -116,7 +118,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 80%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -125,7 +127,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 65%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -142,8 +144,8 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 41px; - height: calc(100% - 41px); + // margin-top: 41px; + height: 100%; width: 100%; overflow-y: auto; background-color: $white; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 5c32976a7..bc89fdccc 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -295,7 +295,7 @@ textarea.twelve-word-phrase { /* Info screen */ .info-gray { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; color: $silver-chalice; } @@ -305,7 +305,7 @@ textarea.twelve-word-phrase { } .info { - font-family: 'Montserrat Regular', Arial; + font-family: Roboto, Arial; padding-bottom: 10px; display: inline-block; padding-left: 5px; @@ -354,7 +354,7 @@ textarea.twelve-word-phrase { } .buy-inputs { - font-family: 'Montserrat Light'; + font-family: Roboto; font-size: 13px; height: 20px; background: transparent; @@ -398,7 +398,7 @@ textarea.twelve-word-phrase { } .ex-coins { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; text-align: center; font-size: 33px; @@ -409,7 +409,7 @@ textarea.twelve-word-phrase { } .marketinfo { - font-family: 'Montserrat light'; + font-family: Roboto; color: $silver-chalice; font-size: 15px; line-height: 17px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 752d6ffea..80aacf1ab 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -2,7 +2,7 @@ display: flex; flex-flow: column nowrap; z-index: 25; - font-family: 'DIN OT'; + font-family: Roboto; @media screen and (max-width: $break-small) { width: 100%; @@ -19,7 +19,7 @@ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); padding: 46px 40.5px 26px; position: relative; - top: -26px; + // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; @@ -77,7 +77,7 @@ margin: 4px 0 20px; font-size: 16px; line-height: 22.4px; - font-family: "DIN OT"; + font-family: Roboto; } .send-screen-gas-input { @@ -316,7 +316,7 @@ display: flex; flex-flow: column nowrap; z-index: 25; - font-family: "Montserrat Light"; + font-family: Roboto; &__content { width: 498px; @@ -325,7 +325,7 @@ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); padding: 46px 40.5px 26px; position: relative; - top: -26px; + // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; @@ -404,20 +404,18 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); display: flex; flex-flow: column nowrap; z-index: 25; align-items: center; font-family: Roboto; position: relative; - top: -26px; @media screen and (max-width: $break-small) { width: 100%; overflow-y: auto; top: 0; - width: 100%; box-shadow: none; } } diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index d04f3a9b1..bbc64c324 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -91,7 +91,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__option { color: $white; - font-family: "DIN OT"; + font-family: Roboto; font-size: 16px; line-height: 21px; text-align: center; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index e3fe1a8b3..76fac09e2 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -132,7 +132,7 @@ .tx-list-date { color: $dusty-gray; font-size: 12px; - font-family: "Montserrat UltraLight"; + font-family: Roboto; } .tx-list-identicon-wrapper { diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 51b7cf789..9d55324e3 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -10,7 +10,7 @@ html, body { - font-family: 'Montserrat Regular', Arial; + font-family: Roboto, Arial; color: #4d4d4d; font-weight: 300; line-height: 1.4em; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 7433df81f..387d14b5f 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -71,3 +71,7 @@ $sidebar-overlay-z-index: 25; $break-small: 575px; $break-midpoint: 780px; $break-large: 576px; + + +$primary-font-type: Roboto; +