diff --git a/ui/app/app.js b/ui/app/app.js index 87477d773..7041e2d1c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -198,46 +198,47 @@ App.prototype.renderAppBar = function () { h('.app-header.flex-row.flex-space-between', { style: {}, }, [ + h('div.app-header-contents', {}, [ + h('div.left-menu-wrapper', { + style: {}, + }, [ + // mini logo + h('img', { + height: 24, + width: 24, + src: '/images/icon-128.png', + }), - h('div.left-menu-wrapper', { - style: {}, - }, [ - // mini logo - h('img', { - height: 24, - width: 24, - src: '/images/icon-128.png', - }), + // metamask name + h('h1', { + style: { + position: 'relative', + left: '9px', + }, + }, 'MetaMask'), - // metamask name - h('h1', { - style: { - position: 'relative', - left: '9px', - }, - }, 'MetaMask'), + ]), - ]), + 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.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() - } - }, - }), - - ]), + ]), + ]) ]), ]) diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 337a8b351..bfa94134d 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -3,8 +3,8 @@ visibility: visible; background: $gallery; padding: 6px 8px; - height: 12vh; - max-height: 60px; + height: 14.4vh; + max-height: 97px; position: relative; z-index: $header-z-index; @@ -17,6 +17,18 @@ } } +.app-header-contents { + display: flex; + justify-content: inherit; + width: 100%; + + @media screen and (min-width: 576px) { + width: 80vw; + margin-left: 10vw; + margin-bottom: 15px; + } +} + .app-header h1 { font-family: 'Montserrat Regular'; text-transform: uppercase; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 33fbc83e6..288a3650d 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -106,7 +106,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 80%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -115,7 +115,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 65%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -162,5 +162,5 @@ $wallet-view-bg: $wild-sand; .account-options-menu { align-items: center; justify-content: flex-start; - margin: 5% 7%; + margin: 5% 7% 0%; }