From daccb06a60e10e36d400f3b46807fac07b68a4fe Mon Sep 17 00:00:00 2001
From: ryanml <rlanese@asu.edu>
Date: Tue, 9 Jul 2019 10:17:58 -0700
Subject: [PATCH] Create MetaFoxLogo component (#6819)

---
 .../app/app-header/app-header.component.js    | 17 +++-------
 .../metametrics-opt-in-modal.component.js     | 15 ++-------
 ui/app/components/ui/metafox-logo/index.js    |  1 +
 .../ui/metafox-logo/metafox-logo.component.js | 31 +++++++++++++++++++
 .../tests/metafox-logo.component.test.js      | 25 +++++++++++++++
 .../create-password.component.js              | 15 ++-------
 .../end-of-flow/end-of-flow.component.js      | 15 ++-------
 .../metametrics-opt-in.component.js           | 15 ++-------
 .../seed-phrase/seed-phrase.component.js      | 15 ++-------
 .../select-action/select-action.component.js  | 15 ++-------
 10 files changed, 73 insertions(+), 91 deletions(-)
 create mode 100644 ui/app/components/ui/metafox-logo/index.js
 create mode 100644 ui/app/components/ui/metafox-logo/metafox-logo.component.js
 create mode 100644 ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js

diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
index 0ccfa7372..7bf7a39bd 100644
--- a/ui/app/components/app/app-header/app-header.component.js
+++ b/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
-            className="app-header__logo-container"
+          <MetaFoxLogo
+            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 && (
diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
index 0335991fc..1bf7c21b5 100644
--- a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ b/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">
-              <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>
+            <MetaFoxLogo />
             <div className="metametrics-opt-in__body-graphic">
               <img src="images/metrics-chart.svg" />
             </div>
diff --git a/ui/app/components/ui/metafox-logo/index.js b/ui/app/components/ui/metafox-logo/index.js
new file mode 100644
index 000000000..0aeaed743
--- /dev/null
+++ b/ui/app/components/ui/metafox-logo/index.js
@@ -0,0 +1 @@
+export { default } from './metafox-logo.component'
diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
new file mode 100644
index 000000000..041e354ef
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js
new file mode 100644
index 000000000..c794a004f
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js
index 5e67a2244..fbeb34d77 100644
--- a/ui/app/pages/first-time-flow/create-password/create-password.component.js
+++ b/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">
-          <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>
+        <MetaFoxLogo />
         <Switch>
           <Route
             exact
diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
index 83b0e7fc6..e410ebc3c 100644
--- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
+++ b/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">
-          <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>
+        <MetaFoxLogo />
         <div className="end-of-flow__emoji">🎉</div>
         <div className="first-time-flow__header">
           { t('congratulations') }
diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
index 6b9d06cf9..e4d6afb76 100644
--- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ b/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">
-            <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>
+          <MetaFoxLogo />
           <div className="metametrics-opt-in__body-graphic">
             <img src="images/metrics-chart.svg" />
           </div>
diff --git a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
index 0b19af18c..f4557115a 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
+++ b/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">
-            <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>
+          <MetaFoxLogo />
           <Switch>
             <Route
               exact
diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js
index 5af29a505..9e7b84e93 100644
--- a/ui/app/pages/first-time-flow/select-action/select-action.component.js
+++ b/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">
-          <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>
+        <MetaFoxLogo />
 
         <div className="select-action__wrapper">