Create MetaFoxLogo component (#6819)

ui/app/components/app/app-header/app-header.component.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Identicon from '../../ui/identicon'
+import MetaFoxLogo from '../../ui/metafox-logo'
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 const NetworkIndicator = require('../network')
 
@@ -90,20 +91,10 @@ export default class AppHeader extends PureComponent {
       <div
         className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}>
         <div className="app-header__contents">
-          <div
+          <MetaFoxLogo
-            className="app-header__logo-container"
+            unsetIconHeight={true}
             onClick={() => history.push(DEFAULT_ROUTE)}
-          >
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.svg"
-              height={30}
           />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--icon"
-              src="/images/logo/metamask-fox.svg"
-            />
-          </div>
           <div className="app-header__account-menu-container">
             {
               !hideNetworkIndicator && (

ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import MetaFoxLogo from '../../../ui/metafox-logo'
 import PageContainerFooter from '../../../ui/page-container/page-container-footer'
 
 export default class MetaMetricsOptInModal extends Component {
@@ -20,19 +21,7 @@ export default class MetaMetricsOptInModal extends Component {
       <div className="metametrics-opt-in metametrics-opt-in-modal">
         <div className="metametrics-opt-in__main">
           <div className="metametrics-opt-in__content">
-            <div className="app-header__logo-container">
+            <MetaFoxLogo />
-              <img
-                className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-                src="/images/logo/metamask-logo-horizontal.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>
             <div className="metametrics-opt-in__body-graphic">
               <img src="images/metrics-chart.svg" />
             </div>

ui/app/components/ui/metafox-logo/index.js

@@ -0,0 +1 @@
+export { default } from './metafox-logo.component'

ui/app/components/ui/metafox-logo/metafox-logo.component.js

@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class MetaFoxLogo extends PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func,
+    unsetIconHeight: PropTypes.bool,
+  }
+
+  render () {
+    const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 }
+
+    return (
+      <div
+        onClick={this.props.onClick}
+        className="app-header__logo-container"
+      >
+        <img
+          height={30}
+          src="/images/logo/metamask-logo-horizontal.svg"
+          className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+        />
+        <img
+          {...iconProps}
+          src="/images/logo/metamask-fox.svg"
+          className="app-header__metafox-logo app-header__metafox-logo--icon"
+        />
+      </div>
+    )
+  }
+}

ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { mount } from 'enzyme'
+import MetaFoxLogo from '../'
+
+describe('MetaFoxLogo', () => {
+
+  it('sets icon height and width to 42 by default', () => {
+    const wrapper = mount(
+      <MetaFoxLogo />
+    )
+
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), 42)
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), 42)
+  })
+
+  it('does not set icon height and width when unsetIconHeight is true', () => {
+    const wrapper = mount(
+      <MetaFoxLogo unsetIconHeight={true} />
+    )
+
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null)
+    assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), null)
+  })
+})

ui/app/pages/first-time-flow/create-password/create-password.component.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
 import NewAccount from './new-account'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import ImportWithSeedPhrase from './import-with-seed-phrase'
 import {
   INITIALIZE_CREATE_PASSWORD_ROUTE,
@@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent {
 
     return (
       <div className="first-time-flow__wrapper">
-        <div className="app-header__logo-container">
+        <MetaFoxLogo />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.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>
         <Switch>
           <Route
             exact

ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../../components/ui/button'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 
 export default class EndOfFlowScreen extends PureComponent {
@@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent {
 
     return (
       <div className="end-of-flow">
-        <div className="app-header__logo-container">
+        <MetaFoxLogo />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.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>
         <div className="end-of-flow__emoji">🎉</div>
         <div className="first-time-flow__header">
           { t('congratulations') }

ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import PageContainerFooter from '../../../components/ui/page-container/page-container-footer'
 
 export default class MetaMetricsOptIn extends Component {
@@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component {
     return (
       <div className="metametrics-opt-in">
         <div className="metametrics-opt-in__main">
-          <div className="app-header__logo-container">
+          <MetaFoxLogo />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.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>
           <div className="metametrics-opt-in__body-graphic">
             <img src="images/metrics-chart.svg" />
           </div>

ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js

@@ -10,6 +10,7 @@ import {
 } from '../../../helpers/constants/routes'
 import HTML5Backend from 'react-dnd-html5-backend'
 import {DragDropContextProvider} from 'react-dnd'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 
 export default class SeedPhrase extends PureComponent {
   static propTypes = {
@@ -32,19 +33,7 @@ export default class SeedPhrase extends PureComponent {
     return (
       <DragDropContextProvider backend={HTML5Backend}>
         <div className="first-time-flow__wrapper">
-          <div className="app-header__logo-container">
+          <MetaFoxLogo />
-            <img
-              className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-              src="/images/logo/metamask-logo-horizontal.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>
           <Switch>
             <Route
               exact

ui/app/pages/first-time-flow/select-action/select-action.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../../components/ui/button'
+import MetaFoxLogo from '../../../components/ui/metafox-logo'
 import {
   INITIALIZE_METAMETRICS_OPT_IN_ROUTE,
 } from '../../../helpers/constants/routes'
@@ -40,19 +41,7 @@ export default class SelectAction extends PureComponent {
 
     return (
        <div className="select-action">
-        <div className="app-header__logo-container">
+        <MetaFoxLogo />
-          <img
-            className="app-header__metafox-logo app-header__metafox-logo--horizontal"
-            src="/images/logo/metamask-logo-horizontal.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>
 
         <div className="select-action__wrapper">