aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2018-08-19 09:41:19 +0800
committerAlexander Tseung <alextsg@gmail.com>2018-08-19 11:46:56 +0800
commitcec87a5b2c29f704e2292f6267be0e4f13677a0a (patch)
tree18b69f12fccf6f6581250309ddab7923232e6279
parentc7f5436143a87369ab29c019a1c988c20a98d810 (diff)
downloadtangerine-wallet-browser-cec87a5b2c29f704e2292f6267be0e4f13677a0a.tar.gz
tangerine-wallet-browser-cec87a5b2c29f704e2292f6267be0e4f13677a0a.tar.zst
tangerine-wallet-browser-cec87a5b2c29f704e2292f6267be0e4f13677a0a.zip
Update logo wordmark
-rw-r--r--app/images/logo/metamask-fox.svg (renamed from app/images/metamask-fox.svg)0
-rw-r--r--app/images/logo/metamask-logo-horizontal-beta.svg115
-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
8 files changed, 143 insertions, 56 deletions
diff --git a/app/images/metamask-fox.svg b/app/images/logo/metamask-fox.svg
index f3c24f79e..f3c24f79e 100644
--- a/app/images/metamask-fox.svg
+++ b/app/images/logo/metamask-fox.svg
diff --git a/app/images/logo/metamask-logo-horizontal-beta.svg b/app/images/logo/metamask-logo-horizontal-beta.svg
new file mode 100644
index 000000000..b1fa040ac
--- /dev/null
+++ b/app/images/logo/metamask-logo-horizontal-beta.svg
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1672.1 241.2"
+ style="enable-background:new 0 0 1672.1 241.2;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#161616;}
+ .st1{fill:#E17726;stroke:#E17726;stroke-linecap:round;stroke-linejoin:round;}
+ .st2{fill:#E27625;stroke:#E27625;stroke-linecap:round;stroke-linejoin:round;}
+ .st3{fill:#D5BFB2;stroke:#D5BFB2;stroke-linecap:round;stroke-linejoin:round;}
+ .st4{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
+ .st5{fill:#CC6228;stroke:#CC6228;stroke-linecap:round;stroke-linejoin:round;}
+ .st6{fill:#E27525;stroke:#E27525;stroke-linecap:round;stroke-linejoin:round;}
+ .st7{fill:#F5841F;stroke:#F5841F;stroke-linecap:round;stroke-linejoin:round;}
+ .st8{fill:#C0AC9D;stroke:#C0AC9D;stroke-linecap:round;stroke-linejoin:round;}
+ .st9{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
+ .st10{fill:#763E1A;stroke:#763E1A;stroke-linecap:round;stroke-linejoin:round;}
+ .st11{fill:#F5841F;}
+</style>
+<g>
+ <path class="st0" d="M1157.7,121.9c-6.8-4.5-14.3-7.7-21.4-11.7c-4.6-2.6-9.5-4.9-13.5-8.2c-6.8-5.6-5.4-16.6,1.7-21.4
+ c10.2-6.8,27.1-3,28.9,10.9c0,0.3,0.3,0.5,0.6,0.5h15.4c0.4,0,0.7-0.3,0.6-0.7c-0.8-9.6-4.5-17.6-11.3-22.7
+ c-6.5-4.9-13.9-7.5-21.8-7.5c-40.7,0-44.4,43.1-22.5,56.7c2.5,1.6,24,12.4,31.6,17.1s10,13.3,6.7,20.1c-3,6.2-10.8,10.5-18.6,10
+ c-8.5-0.5-15.1-5.1-17.4-12.3c-0.4-1.3-0.6-3.8-0.6-4.9c0-0.3-0.3-0.6-0.6-0.6h-16.7c-0.3,0-0.6,0.3-0.6,0.6
+ c0,12.1,3,18.8,11.2,24.9c7.7,5.8,16.1,8.2,24.8,8.2c22.8,0,34.6-12.9,37-26.3C1173.3,141.5,1169.4,129.7,1157.7,121.9z"/>
+ <path class="st0" d="M432.6,63.3h-7.4h-8.1c-0.3,0-0.5,0.2-0.6,0.4l-13.7,45.2c-0.2,0.6-1,0.6-1.2,0l-13.7-45.2
+ c-0.1-0.3-0.3-0.4-0.6-0.4h-8.1h-7.4h-10c-0.3,0-0.6,0.3-0.6,0.6v115.4c0,0.3,0.3,0.6,0.6,0.6h16.7c0.3,0,0.6-0.3,0.6-0.6V91.6
+ c0-0.7,1-0.8,1.2-0.2l13.8,45.5l1,3.2c0.1,0.3,0.3,0.4,0.6,0.4h12.8c0.3,0,0.5-0.2,0.6-0.4l1-3.2l13.8-45.5
+ c0.2-0.7,1.2-0.5,1.2,0.2v87.7c0,0.3,0.3,0.6,0.6,0.6h16.7c0.3,0,0.6-0.3,0.6-0.6V63.9c0-0.3-0.3-0.6-0.6-0.6L432.6,63.3
+ L432.6,63.3z"/>
+ <path class="st0" d="M902,63.3c-0.3,0-0.5,0.2-0.6,0.4l-13.7,45.2c-0.2,0.6-1,0.6-1.2,0l-13.7-45.2c-0.1-0.3-0.3-0.4-0.6-0.4h-25.4
+ c-0.3,0-0.6,0.3-0.6,0.6v115.4c0,0.3,0.3,0.6,0.6,0.6h16.7c0.3,0,0.6-0.3,0.6-0.6V91.6c0-0.7,1-0.8,1.2-0.2l13.8,45.5l1,3.2
+ c0.1,0.3,0.3,0.4,0.6,0.4h12.8c0.3,0,0.5-0.2,0.6-0.4l1-3.2l13.8-45.5c0.2-0.7,1.2-0.5,1.2,0.2v87.7c0,0.3,0.3,0.6,0.6,0.6h16.7
+ c0.3,0,0.6-0.3,0.6-0.6V63.9c0-0.3-0.3-0.6-0.6-0.6L902,63.3L902,63.3z"/>
+ <path class="st0" d="M686.6,63.3h-31.1h-16.7h-31.1c-0.3,0-0.6,0.3-0.6,0.6v14.4c0,0.3,0.3,0.6,0.6,0.6h30.5v100.4
+ c0,0.3,0.3,0.6,0.6,0.6h16.7c0.3,0,0.6-0.3,0.6-0.6V78.9h30.5c0.3,0,0.6-0.3,0.6-0.6V63.9C687.2,63.6,687,63.3,686.6,63.3z"/>
+ <path class="st0" d="M785.1,179.9h15.2c0.4,0,0.7-0.4,0.6-0.8L769.5,63.3c-0.1-0.3-0.3-0.4-0.6-0.4h-5.8h-10.2h-5.8
+ c-0.3,0-0.5,0.2-0.6,0.4l-31.4,115.8c-0.1,0.4,0.2,0.8,0.6,0.8h15.2c0.3,0,0.5-0.2,0.6-0.4l9.1-33.7c0.1-0.3,0.3-0.4,0.6-0.4h33.6
+ c0.3,0,0.5,0.2,0.6,0.4l9.1,33.7C784.6,179.7,784.9,179.9,785.1,179.9z M745.2,128.9l12.2-45.1c0.2-0.6,1-0.6,1.2,0l12.2,45.1
+ c0.1,0.4-0.2,0.8-0.6,0.8h-24.4C745.4,129.7,745.1,129.3,745.2,128.9z"/>
+ <path class="st0" d="M1044.3,179.9h15.2c0.4,0,0.7-0.4,0.6-0.8l-31.4-115.8c-0.1-0.3-0.3-0.4-0.6-0.4h-5.8h-10.2h-5.8
+ c-0.3,0-0.5,0.2-0.6,0.4l-31.4,115.8c-0.1,0.4,0.2,0.8,0.6,0.8h15.2c0.3,0,0.5-0.2,0.6-0.4l9.1-33.7c0.1-0.3,0.3-0.4,0.6-0.4h33.6
+ c0.3,0,0.5,0.2,0.6,0.4l9.1,33.7C1043.8,179.7,1044,179.9,1044.3,179.9z M1004.4,128.9l12.2-45.1c0.2-0.6,1-0.6,1.2,0l12.2,45.1
+ c0.1,0.4-0.2,0.8-0.6,0.8H1005C1004.6,129.7,1004.3,129.3,1004.4,128.9z"/>
+ <path class="st0" d="M510.8,162.8V127c0-0.3,0.3-0.6,0.6-0.6h44.5c0.3,0,0.6-0.3,0.6-0.6v-14.4c0-0.3-0.3-0.6-0.6-0.6h-44.5
+ c-0.3,0-0.6-0.3-0.6-0.6V79.6c0-0.3,0.3-0.6,0.6-0.6H562c0.3,0,0.6-0.3,0.6-0.6V64c0-0.3-0.3-0.6-0.6-0.6h-51.2h-17.3
+ c-0.3,0-0.6,0.3-0.6,0.6v15v31.9v15.6v37v15.8c0,0.3,0.3,0.6,0.6,0.6h17.3h53.3c0.3,0,0.6-0.3,0.6-0.6v-15.2c0-0.3-0.3-0.6-0.6-0.6
+ h-52.8C511,163.4,510.8,163.2,510.8,162.8z"/>
+ <path class="st0" d="M1310.3,178.9l-57.8-59.7c-0.2-0.2-0.2-0.6,0-0.8l52-54c0.4-0.4,0.1-1-0.4-1h-21.3c-0.2,0-0.3,0.1-0.4,0.2
+ l-44.1,45.8c-0.4,0.4-1,0.1-1-0.4V64c0-0.3-0.3-0.6-0.6-0.6H1220c-0.3,0-0.6,0.3-0.6,0.6v115.4c0,0.3,0.3,0.6,0.6,0.6h16.7
+ c0.3,0,0.6-0.3,0.6-0.6v-50.8c0-0.5,0.7-0.8,1-0.4l50,51.6c0.1,0.1,0.3,0.2,0.4,0.2h21.3C1310.4,179.9,1310.7,179.2,1310.3,178.9z"
+ />
+</g>
+<g>
+ <polygon class="st1" points="247.1,1.2 146,76.2 164.8,32 "/>
+ <g>
+ <polygon class="st2" points="13.9,1.2 114.1,76.9 96.2,32 "/>
+ <polygon class="st2" points="210.7,175.1 183.8,216.3 241.4,232.2 257.9,176 "/>
+ <polygon class="st2" points="3.2,176 19.6,232.2 77.1,216.3 50.3,175.1 "/>
+ <polygon class="st2" points="74,105.5 58,129.7 115,132.3 113.1,70.8 "/>
+ <polygon class="st2" points="187,105.5 147.3,70.1 146,132.3 203,129.7 "/>
+ <polygon class="st2" points="77.1,216.3 111.6,199.6 81.9,176.4 "/>
+ <polygon class="st2" points="149.4,199.6 183.8,216.3 179.1,176.4 "/>
+ </g>
+ <g>
+ <polygon class="st3" points="183.8,216.3 149.4,199.6 152.2,222 151.9,231.5 "/>
+ <polygon class="st3" points="77.1,216.3 109.1,231.5 108.9,222 111.6,199.6 "/>
+ </g>
+ <polygon class="st4" points="109.7,161.6 81.1,153.2 101.3,143.9 "/>
+ <polygon class="st4" points="151.3,161.6 159.7,143.9 180,153.2 "/>
+ <g>
+ <polygon class="st5" points="77.1,216.3 82.1,175.1 50.3,176 "/>
+ <polygon class="st5" points="178.9,175.1 183.8,216.3 210.7,176 "/>
+ <polygon class="st5" points="203,129.7 146,132.3 151.3,161.6 159.7,143.9 180,153.2 "/>
+ <polygon class="st5" points="81.1,153.2 101.3,143.9 109.7,161.6 115,132.3 58,129.7 "/>
+ </g>
+ <g>
+ <polygon class="st6" points="58,129.7 81.9,176.4 81.1,153.2 "/>
+ <polygon class="st6" points="180,153.2 179.1,176.4 203,129.7 "/>
+ <polygon class="st6" points="115,132.3 109.7,161.6 116.4,196.2 117.9,150.6 "/>
+ <polygon class="st6" points="146,132.3 143.2,150.5 144.6,196.2 151.3,161.6 "/>
+ </g>
+ <polygon class="st7" points="151.3,161.6 144.6,196.2 149.4,199.6 179.1,176.4 180,153.2 "/>
+ <polygon class="st7" points="81.1,153.2 81.9,176.4 111.6,199.6 116.4,196.2 109.7,161.6 "/>
+ <polygon class="st8" points="151.9,231.5 152.2,222 149.6,219.8 111.4,219.8 108.9,222 109.1,231.5 77.1,216.3 88.3,225.5
+ 111,241.2 149.9,241.2 172.7,225.5 183.8,216.3 "/>
+ <polygon class="st9" points="149.4,199.6 144.6,196.2 116.4,196.2 111.6,199.6 108.9,222 111.4,219.8 149.6,219.8 152.2,222 "/>
+ <g>
+ <polygon class="st10" points="251.4,81.1 259.9,39.7 247.1,1.2 149.4,73.7 187,105.5 240.1,121 251.8,107.3 246.7,103.6
+ 254.8,96.2 248.6,91.4 256.7,85.2 "/>
+ <polygon class="st10" points="1.1,39.7 9.7,81.1 4.2,85.2 12.4,91.4 6.2,96.2 14.3,103.6 9.2,107.3 20.9,121 74,105.5 111.6,73.7
+ 13.9,1.2 "/>
+ </g>
+ <polygon class="st7" points="240.1,121 187,105.5 203,129.7 179.1,176.4 210.7,176 257.9,176 "/>
+ <polygon class="st7" points="74,105.5 20.9,121 3.2,176 50.3,176 81.9,176.4 58,129.7 "/>
+ <polygon class="st7" points="146,132.3 149.4,73.7 164.8,32 96.2,32 111.6,73.7 115,132.3 116.3,150.7 116.4,196.2 144.6,196.2
+ 144.7,150.7 "/>
+</g>
+<g>
+ <path class="st7" d="M1409.7,92.6V32.1h19.3c2.9,0,5.6,0.4,8.2,1c2.5,0.6,4.7,1.6,6.6,2.9c1.9,1.3,3.4,3,4.5,5.1
+ c1.1,2.1,1.6,4.5,1.6,7.3c0,3-0.9,5.5-2.5,7.7c-1.6,2.1-3.8,3.8-6.6,4.9c1.7,0.5,3.2,1.1,4.5,2c1.3,0.9,2.4,1.9,3.3,3.1
+ c0.9,1.2,1.6,2.6,2,4c0.5,1.5,0.7,3.1,0.7,4.7c0,2.9-0.5,5.4-1.6,7.6c-1.1,2.2-2.5,4-4.4,5.5c-1.9,1.5-4.1,2.6-6.6,3.3
+ c-2.6,0.8-5.3,1.2-8.3,1.2H1409.7z M1419.8,57.6h9.6c1.5,0,2.9-0.2,4.2-0.6c1.3-0.4,2.4-0.9,3.3-1.7c0.9-0.7,1.7-1.6,2.2-2.7
+ c0.6-1.1,0.8-2.3,0.8-3.7c0-1.5-0.3-2.8-0.8-3.9c-0.5-1.1-1.3-2-2.2-2.7c-1-0.7-2.1-1.2-3.4-1.5c-1.3-0.3-2.7-0.5-4.3-0.5h-9.5
+ V57.6z M1419.8,65.2v19.3h10.9c1.6,0,3-0.3,4.3-0.7c1.3-0.5,2.4-1.1,3.4-1.9c0.9-0.8,1.7-1.8,2.2-2.9c0.5-1.2,0.8-2.5,0.8-3.9
+ c0-1.5-0.2-2.9-0.7-4.1c-0.5-1.2-1.1-2.2-2-3.1c-0.9-0.8-2-1.5-3.2-1.9c-1.3-0.5-2.7-0.7-4.3-0.7H1419.8z"/>
+ <path class="st7" d="M1506.3,65.5h-24.9v19h29.1v8.1h-39.1V32.1h38.8v8.2h-28.8v17.1h24.9V65.5z"/>
+ <path class="st7" d="M1574.8,40.4h-18.6v52.2h-9.9V40.4h-18.4v-8.2h46.9V40.4z"/>
+ <path class="st7" d="M1615.2,78.6h-18.9l-4.2,14h-10.3l19.6-60.5h8.8l19.3,60.5h-10.3L1615.2,78.6z M1598.9,70h13.9l-6.9-23.7
+ L1598.9,70z"/>
+</g>
+<path class="st11" d="M1644.3,8c10.7,0,19.5,8.7,19.5,19.5v69.8c0,10.7-8.7,19.5-19.5,19.5H1395c-10.7,0-19.5-8.7-19.5-19.5V27.5
+ c0-10.7,8.7-19.5,19.5-19.5H1644.3 M1644.3,0H1395c-15.2,0-27.5,12.3-27.5,27.5v69.8c0,15.2,12.3,27.5,27.5,27.5h249.2
+ c15.2,0,27.5-12.3,27.5-27.5V27.5C1671.7,12.3,1659.4,0,1644.3,0L1644.3,0z"/>
+</svg>
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';