From eeb329adf7298f124ba353181786c3d9514fe5cc Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 4 Dec 2019 19:57:30 -0400
Subject: [PATCH] Fix the permissions connect screen MetaMask logo (#7641)

The MetaMask logo was throwing an exception because the `history` prop
from React Router wasn't being passed in. However, even if it was
passed in, clicking on the logo wouldn't have done anything because the
home route redirects back to the permission connect page.

Instead the logo now isn't given an `onClick` handler. The
`MetaFoxLogo` component has been updated to only set `cursor: pointer`
if given an `onClick` handler.
---
 ui/app/components/app/app-header/index.scss    |  7 ++++---
 .../ui/metafox-logo/metafox-logo.component.js  | 18 +++++++++++++-----
 .../permissions-connect-header.component.js    |  2 --
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index 0ea1793ca..f93e6f600 100644
--- a/ui/app/components/app/app-header/index.scss
+++ b/ui/app/components/app/app-header/index.scss
@@ -30,8 +30,6 @@
   }
 
   &__metafox-logo {
-    cursor: pointer;
-
     &--icon {
       height: 32px;
       @media screen and (min-width: $break-large) {
@@ -72,8 +70,11 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    cursor: pointer;
     flex: 0 0 auto;
+
+    &--clickable {
+      cursor: pointer;
+    }
   }
 
   &__account-menu-container {
diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
index 041e354ef..4b1509c6e 100644
--- a/ui/app/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class MetaFoxLogo extends PureComponent {
   static propTypes = {
@@ -7,23 +8,30 @@ export default class MetaFoxLogo extends PureComponent {
     unsetIconHeight: PropTypes.bool,
   }
 
+  static defaultProps = {
+    onClick: undefined,
+  }
+
   render () {
-    const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 }
+    const { onClick, unsetIconHeight } = this.props
+    const iconProps = unsetIconHeight ? {} : { height: 42, width: 42 }
 
     return (
       <div
-        onClick={this.props.onClick}
-        className="app-header__logo-container"
+        onClick={onClick}
+        className={classnames('app-header__logo-container', {
+          'app-header__logo-container--clickable': Boolean(onClick),
+        })}
       >
         <img
           height={30}
           src="/images/logo/metamask-logo-horizontal.svg"
-          className="app-header__metafox-logo app-header__metafox-logo--horizontal"
+          className={classnames('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"
+          className={classnames('app-header__metafox-logo', 'app-header__metafox-logo--icon')}
         />
       </div>
     )
diff --git a/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js b/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
index 512866c38..68499b9ae 100644
--- a/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/app/pages/permissions-connect/permissions-connect-header/permissions-connect-header.component.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import MetaFoxLogo from '../../../components/ui/metafox-logo'
-import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'
 
 export default class PermissionsConnectHeader extends Component {
   static propTypes = {
@@ -14,7 +13,6 @@ export default class PermissionsConnectHeader extends Component {
       <div className="permissions-connect-header">
         <MetaFoxLogo
           unsetIconHeight
-          onClick={() => history.push(DEFAULT_ROUTE)}
         />
         <div className="permissions-connect-header__page-count">
           { `${page}/2` }