From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 4 Sep 2017 15:55:14 -0700 Subject: [PATCH] Fix header style; Address comments --- ui/app/app.js | 5 +-- .../dropdowns/account-selection-dropdown.js | 2 +- .../dropdowns/components/account-dropdowns.js | 31 ++++++------------- .../dropdowns/components/dropdown.js | 11 ++++++- .../components/dropdowns/network-dropdown.js | 28 ++++++++--------- ui/app/components/menu-droppo.js | 4 ++- .../itcss/components/account-dropdown.scss | 2 +- ui/app/css/itcss/components/header.scss | 26 +++++++++------- ui/app/css/itcss/components/network.scss | 23 +++++++++++--- .../css/itcss/components/newui-sections.scss | 2 +- 10 files changed, 75 insertions(+), 59 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 32c9cffb2..9ad85d85d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () { h('h1', { style: { position: 'relative', - left: '9px', + paddingLeft: '9px', + color: '#5B5D67', }, }, 'MetaMask'), @@ -239,7 +240,7 @@ App.prototype.renderAppBar = function () { }), ]), - ]) + ]), ]), ]) diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js index b1f4d68ce..7a8502d18 100644 --- a/ui/app/components/dropdowns/account-selection-dropdown.js +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown // TODO: selectedAddress is not defined... should we use selected? AccountSelectionDropdown.prototype.render = function () { const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props - console.log({style}) + return h(AccountDropdowns, { enableAccountOptions: false, enableAccountsSelector: true, diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js index be9245c0e..1961a61b5 100644 --- a/ui/app/components/dropdowns/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -181,7 +181,6 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '18px', fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '23px', @@ -215,7 +214,6 @@ class AccountDropdowns extends Component { h('span', { style: { marginLeft: '20px', - fontSize: '18px', marginBottom: '5px', fontFamily: 'DIN OT', fontSize: '16px', @@ -231,6 +229,10 @@ class AccountDropdowns extends Component { renderAccountOptions () { const { actions, dropdownWrapperStyle, useCssTransition } = this.props const { optionsMenuActive, menuItemStyles } = this.state + const dropdownMenuItemStyle = { + fontFamily: 'DIN OT', + fontSize: 16, + } return h( Dropdown, @@ -262,10 +264,7 @@ class AccountDropdowns extends Component { this.props.actions.showAccountDetailModal() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -281,10 +280,7 @@ class AccountDropdowns extends Component { global.platform.openWindow({ url }) }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -300,10 +296,7 @@ class AccountDropdowns extends Component { copyToClipboard(checkSumAddress) }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -317,10 +310,7 @@ class AccountDropdowns extends Component { actions.requestAccountExport() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, @@ -334,10 +324,7 @@ class AccountDropdowns extends Component { actions.showAddTokenPage() }, style: Object.assign( - { - fontFamily: 'DIN OT', - fontSize: 16, - }, + dropdownMenuItemStyle, menuItemStyles, ), }, diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js index 1f35f0c70..c4b2c2550 100644 --- a/ui/app/components/dropdowns/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -8,7 +8,15 @@ const noop = () => {} class Dropdown extends Component { render () { - const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props + const { + containerClassName, + isOpen, + onClickOutside, + style, + innerStyle, + children, + useCssTransition, + } = this.props const innerStyleDefaults = extend({ borderRadius: '4px', @@ -20,6 +28,7 @@ class Dropdown extends Component { return h( MenuDroppo, { + containerClassName, useCssTransition, isOpen, zIndex: 30, diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js index 23af3f7e4..fa0bb899e 100644 --- a/ui/app/components/dropdowns/network-dropdown.js +++ b/ui/app/components/dropdowns/network-dropdown.js @@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () { fontFamily: 'DIN OT', fontSize: '16px', lineHeight: '20px', - }; + } return h(Dropdown, { useCssTransition: true, @@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () { this.props.hideNetworkDropdown() } }, + containerClassName: 'network-droppo', zIndex: 11, style: { position: 'absolute', - right: '2px', top: '38px', minWidth: '309px', }, @@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.diamond'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b' + color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b', }, }, 'Main Ethereum Network'), ] @@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.red-dot'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b' + color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b', }, }, 'Ropsten Test Network'), ] @@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.hollow-diamond'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b' + color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b', }, }, 'Kovan Test Network'), ] @@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () { [ providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('.menu-icon.golden-square'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b' + color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b', }, }, 'Rinkeby Test Network'), ] @@ -171,9 +171,9 @@ NetworkDropdown.prototype.render = function () { [ activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b' + color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b', }, }, 'Localhost 8545'), ] @@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () { [ activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'), h('i.fa.fa-question-circle.fa-lg.menu-icon'), - h('span.network-name', { + h('span.network-name-item', { style: { - color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b' + color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b', }, }, 'Custom RPC'), ] diff --git a/ui/app/components/menu-droppo.js b/ui/app/components/menu-droppo.js index 2f173544e..95b75f54c 100644 --- a/ui/app/components/menu-droppo.js +++ b/ui/app/components/menu-droppo.js @@ -13,6 +13,7 @@ function MenuDroppoComponent () { } MenuDroppoComponent.prototype.render = function () { + const { containerClassName = '' } = this.props const speed = this.props.speed || '300ms' const useCssTransition = this.props.useCssTransition const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0 @@ -26,8 +27,9 @@ MenuDroppoComponent.prototype.render = function () { style.zIndex = zIndex return ( - h('.menu-droppo-container', { + h('div', { style, + className: `.menu-droppo-container ${containerClassName}`, }, [ h('style', ` .menu-droppo-enter { diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 715f41dc9..1c4620e40 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -10,7 +10,7 @@ .account-dropdown-edit-button { color: $dusty-gray; font-family: "DIN OT"; - font-weight: 500; + &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index bfa94134d..160476d58 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -2,11 +2,12 @@ align-items: center; visibility: visible; background: $gallery; - padding: 6px 8px; height: 14.4vh; max-height: 97px; position: relative; z-index: $header-z-index; + display: flex; + flex-flow: column nowrap; @media screen and (max-width: 575px) { position: fixed; @@ -19,13 +20,22 @@ .app-header-contents { display: flex; - justify-content: inherit; + justify-content: space-between; + flex-flow: row nowrap; width: 100%; + height: 6.9vh; @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { width: 80vw; - margin-left: 10vw; - margin-bottom: 15px; + height: 6.9vh; + } + + @media screen and (min-width: 1281px) { + width: 65vw; } } @@ -47,18 +57,10 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; - - @media screen and (min-width: 576px) { - margin-bottom: 1.8em; - } } .left-menu-wrapper { display: flex; flex-direction: row; align-items: center; - - @media screen and (min-width: 576px) { - margin-bottom: 1.8em; - } } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index f242102af..8beef5e72 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -5,15 +5,30 @@ } .network-name { - width: 5.2em; - line-height: 9px; - text-rendering: geometricPrecision; + line-height: 12px; + padding: 0 4px; font-family: 'DIN OT'; font-size: 10px; flex: 1 0 auto; } -.network-name { +.network-droppo { + right: 2px; + + @media screen and (min-width: 576px) { + right: calc(((100% - 85vw) / 2) + 2px); + } + + @media screen and (min-width: 769px) { + right: calc(((100% - 80vw) / 2) + 2px); + } + + @media screen and (min-width: 1281px) { + right: calc(((100% - 65vw) / 2) + 2px); + } +} + +.network-name-item { font-weight: 100; flex: 1 0 auto; color: $dusty-gray; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 288a3650d..5c5d16ef3 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -97,7 +97,7 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 85%; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);