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

@@ -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 {

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>
     )

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` }