Refactor home notification (#10046)

Co-authored-by: Brad Decker <git@braddecker.dev>

ui/app/components/app/home-notification/home-notification.component.js

@@ -1,78 +1,32 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import classnames from 'classnames'
-import { Tooltip as ReactTippy } from 'react-tippy'
 import PropTypes from 'prop-types'
 import Button from '../../ui/button'
+import Tooltip from '../../ui/tooltip'
 
-export default class HomeNotification extends PureComponent {
+const HomeNotification = ({
-  static contextTypes = {
-    metricsEvent: PropTypes.func,
-  }
-
-  static defaultProps = {
-    onAccept: null,
-    ignoreText: null,
-    onIgnore: null,
-    infoText: null,
-  }
-
-  static propTypes = {
-    acceptText: PropTypes.node.isRequired,
-    onAccept: PropTypes.func,
-    ignoreText: PropTypes.node,
-    onIgnore: PropTypes.func,
-    descriptionText: PropTypes.node.isRequired,
-    infoText: PropTypes.node,
-    classNames: PropTypes.array,
-  }
-
-  handleAccept = () => {
-    this.props.onAccept()
-  }
-
-  handleIgnore = () => {
-    this.props.onIgnore()
-  }
-
-  render() {
-    const {
-      descriptionText,
   acceptText,
-      onAccept,
-      ignoreText,
-      onIgnore,
-      infoText,
   classNames = [],
-    } = this.props
+  descriptionText,
-
+  ignoreText,
+  infoText,
+  onAccept,
+  onIgnore,
+}) => {
   return (
     <div className={classnames('home-notification', ...classNames)}>
-        <div className="home-notification__header">
+      <div className="home-notification__content">
-          <div className="home-notification__header-container">
+        <div className="home-notification__content-container">
-            <img
-              className="home-notification__icon"
-              alt=""
-              src="images/icons/connect.svg"
-            />
           <div className="home-notification__text">{descriptionText}</div>
         </div>
         {infoText ? (
-            <ReactTippy
+          <Tooltip
-              style={{
-                display: 'flex',
-              }}
-              html={
-                <p className="home-notification-tooltip__content">{infoText}</p>
-              }
-              offset={-36}
-              distance={36}
-              animation="none"
             position="top"
-              arrow
+            title={infoText}
-              theme="tippy-tooltip-home"
+            wrapperClassName="home-notification__tooltip-wrapper"
           >
-              <img alt="" src="images/icons/info.svg" />
+            <i className="fa fa-info-circle" />
-            </ReactTippy>
+          </Tooltip>
         ) : null}
       </div>
       <div className="home-notification__buttons">
@@ -80,7 +34,7 @@ export default class HomeNotification extends PureComponent {
           <Button
             type="primary"
             className="home-notification__accept-button"
-              onClick={this.handleAccept}
+            onClick={onAccept}
           >
             {acceptText}
           </Button>
@@ -89,7 +43,7 @@ export default class HomeNotification extends PureComponent {
           <Button
             type="secondary"
             className="home-notification__ignore-button"
-              onClick={this.handleIgnore}
+            onClick={onIgnore}
           >
             {ignoreText}
           </Button>
@@ -98,4 +52,15 @@ export default class HomeNotification extends PureComponent {
     </div>
   )
 }
+
+HomeNotification.propTypes = {
+  acceptText: PropTypes.node,
+  classNames: PropTypes.array,
+  descriptionText: PropTypes.node.isRequired,
+  ignoreText: PropTypes.node,
+  infoText: PropTypes.node,
+  onAccept: PropTypes.func,
+  onIgnore: PropTypes.func,
 }
+
+export default HomeNotification

ui/app/components/app/home-notification/index.scss

@@ -1,14 +1,7 @@
-.tippy-tooltip {
-  // This looks weird, but its repeating the class name
-  // using interpolation for higher specificity.
-  &#{&}-home-theme {
-    background: rgba(36, 41, 46, 0.9);
-    color: $white;
-    border-radius: 8px;
-  }
-}
-
 .home-notification {
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
   background: rgba(36, 41, 46, 0.9);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
@@ -19,31 +12,20 @@
     min-width: 472px;
   }
 
-  display: flex;
+  &__content-container {
-  flex-flow: column;
-  justify-content: space-between;
-
-  &__header-container {
     display: flex;
   }
 
-  &__header {
+  &__content {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  &__icon {
-    height: 16px;
-    align-self: center;
-  }
-
   &__text {
     @include H7;
 
     color: $white;
-    margin-left: 10px;
-    margin-right: 8px;
   }
 
   .fa-info-circle {
@@ -102,23 +84,14 @@
   &__buttons {
     display: flex;
     width: 100%;
-    margin-top: 10px;
+    padding-top: 10px;
-    justify-content: flex-start;
+    align-items: center;
+    justify-content: space-between;
     flex-direction: row-reverse;
   }
-}
 
-.home-notification-tooltip {
+  &__tooltip-wrapper {
-  &__tooltip-container {
     display: flex;
-  }
+    margin-left: 10px;
-
-  &__content {
-    @include H7;
-
-    color: $white;
-    text-align: left;
-    display: inline-block;
-    width: 200px;
   }
 }