aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/app.js3
-rw-r--r--ui/app/components/app-header/app-header.component.js23
-rw-r--r--ui/app/components/app-header/index.js3
-rw-r--r--ui/app/components/app-header/index.scss (renamed from ui/app/css/itcss/components/header.scss)51
-rw-r--r--ui/app/components/index.scss2
-rw-r--r--ui/app/css/itcss/components/index.scss2
6 files changed, 28 insertions, 56 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index dbb6146d1..4fcf092ca 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -39,8 +39,7 @@ const Modal = require('./components/modals/index').Modal
// Global Alert
const Alert = require('./components/alert')
-const AppHeader = require('./components/app-header')
-
+import AppHeader from './components/app-header'
import UnlockPage from './components/pages/unlock-page'
// Routes
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index 07ca6cf84..b8b002dcc 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { matchPath } from 'react-router-dom'
@@ -11,7 +11,7 @@ const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('
const Identicon = require('../identicon')
const NetworkIndicator = require('../network')
-class AppHeader extends Component {
+export default class AppHeader extends PureComponent {
static propTypes = {
history: PropTypes.object,
location: PropTypes.object,
@@ -107,20 +107,19 @@ class AppHeader extends Component {
onClick={() => history.push(DEFAULT_ROUTE)}
>
<img
- className="app-header__metafox"
- src="/images/metamask-fox.svg"
+ className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+ src="/images/logo/metamask-logo-horizontal-beta.svg"
+ height={30}
+ />
+ <img
+ className="app-header__metafox-logo app-header__metafox-logo--icon"
+ src="/images/logo/metamask-fox.svg"
height={42}
width={42}
/>
- <div className="flex-row">
- <h1>{ this.context.t('appName') }</h1>
- <div className="app-header__beta-label">
- { this.context.t('beta') }
- </div>
- </div>
</div>
<div className="app-header__account-menu-container">
- <div className="network-component-wrapper">
+ <div className="app-header__network-component-wrapper">
<NetworkIndicator
network={network}
provider={provider}
@@ -135,5 +134,3 @@ class AppHeader extends Component {
)
}
}
-
-export default AppHeader
diff --git a/ui/app/components/app-header/index.js b/ui/app/components/app-header/index.js
index daa31f621..6de2f9c78 100644
--- a/ui/app/components/app-header/index.js
+++ b/ui/app/components/app-header/index.js
@@ -1,2 +1 @@
-import AppHeader from './app-header.container'
-module.exports = AppHeader
+export { default } from './app-header.container'
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/components/app-header/index.scss
index 3ccfd5c15..325844af5 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/components/app-header/index.scss
@@ -30,21 +30,19 @@
}
}
- &__metafox {
+ &__metafox-logo {
cursor: pointer;
- }
- &__beta-label {
- font-family: Roboto;
- text-transform: uppercase;
- font-weight: 500;
- font-size: .8rem;
- color: $buttercup;
- margin-left: 5px;
- line-height: initial;
+ &--icon {
+ @media screen and (min-width: $break-large) {
+ display: none;
+ }
+ }
- @media screen and (max-width: 575px) {
- display: none;
+ &--horizontal {
+ @media screen and (max-width: $break-small) {
+ display: none;
+ }
}
}
@@ -83,31 +81,10 @@
flex-flow: row nowrap;
align-items: center;
}
-}
-
-.app-header h1 {
- font-family: Roboto;
- text-transform: uppercase;
- font-weight: 400;
- font-size: 1.1rem;
- position: relative;
- padding-left: 15px;
- color: #5b5d67;
- @media screen and (max-width: 575px) {
- display: none;
+ &__network-component-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
}
}
-
-h2.page-subtitle {
- text-transform: uppercase;
- color: #aeaeae;
- font-size: 1em;
- margin: 12px;
-}
-
-.network-component-wrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
-}
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index b3e14ce23..35d38e2a3 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -19,3 +19,5 @@
@import './sender-to-recipient/index';
@import './tabs/index';
+
+@import './app-header/index';
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 96ad5fe64..821a6b612 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -1,7 +1,5 @@
@import './buttons.scss';
-@import './header.scss';
-
@import './footer.scss';
@import './network.scss';