Use ref in Mascot component rather than reaching into DOM directly (#…

…7893)

Accessing the dom via `document` is strongly discouraged in React.
Instead the DOM element is now referenced by ref instead.

ui/app/components/ui/mascot.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { Component } from 'react'
+import React, { createRef, Component } from 'react'
 import metamaskLogo from 'metamask-logo'
 import debounce from 'debounce'
 
@@ -22,6 +22,8 @@ export default class Mascot extends Component {
       height,
     })
 
+    this.mascotContainer = createRef()
+
     this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)
     this.unfollowMouse = this.logo.setFollowMouse.bind(this.logo, false)
   }
@@ -43,9 +45,7 @@ export default class Mascot extends Component {
   }
 
   componentDidMount () {
-    const targetDivId = 'metamask-mascot-container'
-    const container = document.getElementById(targetDivId)
-    container.appendChild(this.logo.container)
+    this.mascotContainer.current.appendChild(this.logo.container)
   }
 
   componentWillUnmount () {
@@ -62,7 +62,7 @@ export default class Mascot extends Component {
     this.handleAnimationEvents()
     return (
       <div
-        id="metamask-mascot-container"
+        ref={this.mascotContainer}
         style={{ zIndex: 0 }}
       />
     )