Fix new logo related errors

Fixed logo deallocation related bugs, had to patch the logo repo itself to add a stopAnimating method.

Also tuned up the logo to more closely resemble the old behavior.
- Overlaps the title text
- Points nose at cursor, not just front of eyes
- Cursor is more "distant" from fox, to avoid extreme angles on edges.

1 files changed, 6 insertions, 3 deletions

diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
index d0d599ea0..ae998406b 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -26,7 +26,9 @@ Mascot.prototype.render = function () {
   // and we dont get that until render
   this.handleAnimationEvents()
 
-  return h('#metamask-mascot-container')
+  return h('#metamask-mascot-container', {
+    style: { zIndex: 2 },
+  })
 }
 
 Mascot.prototype.componentDidMount = function () {
@@ -36,12 +38,13 @@ Mascot.prototype.componentDidMount = function () {
 }
 
 Mascot.prototype.componentWillUnmount = function () {
-  if (!this.logo.webGLSupport) return
+  this.animations = this.props.animationEventEmitter
+  this.animations.removeAllListeners()
   this.logo.container.remove()
+  this.logo.stopAnimation()
 }
 
 Mascot.prototype.handleAnimationEvents = function () {
-  if (!this.logo.webGLSupport) return
   // only setup listeners once
   if (this.animations) return
   this.animations = this.props.animationEventEmitter