colocate notification-modal styles (#9147)

Follows former examples of colocating styles with the modals that use them.

ui/app/components/app/modals/index.scss

@@ -1,5 +1,6 @@
 @import 'cancel-transaction/index';
 @import 'confirm-remove-account/index';
+@import 'notification-modal/index';
 @import 'qr-scanner/index';
 @import 'transaction-confirmed/index';
 @import 'metametrics-opt-in-modal/index';

ui/app/components/app/modals/notification-modal/index.js

@@ -0,0 +1 @@
+export { default } from './notification-modal'

ui/app/components/app/modals/notification-modal/index.scss

@@ -0,0 +1,56 @@
+.notification-modal {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    border: 1px solid $alto;
+    box-shadow: 0 0 2px 2px $alto;
+  }
+
+  &__header {
+    background: $wild-sand;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+    font-size: 22px;
+    color: $nile-blue;
+  }
+
+  &__message {
+    padding: 20px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    font-size: 17px;
+    color: $nile-blue;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-bottom: 24px;
+    padding: 0 42px;
+
+    &__btn {
+      cursor: pointer;
+    }
+  }
+
+  &__link {
+    color: $primary-blue;
+  }
+
+  .modal-close-x::after {
+    content: '\00D7';
+    font-size: 2em;
+    color: $dusty-gray;
+    position: absolute;
+    top: 25px;
+    right: 17.5px;
+    cursor: pointer;
+  }
+}

ui/app/components/app/modals/notification-modal/notification-modal.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
-import { hideModal } from '../../../store/actions'
+import { hideModal } from '../../../../store/actions'
 
 class NotificationModal extends Component {
   static contextProps = {

ui/app/css/itcss/components/modal.scss

@@ -212,16 +212,6 @@
   padding: 9px 13px 8px;
 }
 
-.modal-close-x::after {
-  content: '\00D7';
-  font-size: 2em;
-  color: $dusty-gray;
-  position: absolute;
-  top: 25px;
-  right: 17.5px;
-  cursor: pointer;
-}
-
 // Hide token confirmation
 
 .hide-token-confirmation {
@@ -286,55 +276,6 @@
   }
 }
 
-//Notification Modal
-
-.notification-modal {
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    position: relative;
-    border: 1px solid $alto;
-    box-shadow: 0 0 2px 2px $alto;
-  }
-
-  &__header {
-    background: $wild-sand;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding: 30px;
-    font-size: 22px;
-    color: $nile-blue;
-  }
-
-  &__message {
-    padding: 20px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    font-size: 17px;
-    color: $nile-blue;
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: space-evenly;
-    width: 100%;
-    margin-bottom: 24px;
-    padding: 0 42px;
-
-    &__btn {
-      cursor: pointer;
-    }
-  }
-
-  &__link {
-    color: $primary-blue;
-  }
-}
-
 // Deposit Ether Modal
 .deposit-ether-modal {
   border-radius: 8px;
@@ -498,38 +439,3 @@
     text-align: center;
   }
 }
-
-//Notification Modal
-
-.notification-modal-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  position: relative;
-  border: 1px solid $alto;
-  box-shadow: 0 0 2px 2px $alto;
-}
-
-.notification-modal-header {
-  background: $wild-sand;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 30px;
-  font-size: 22px;
-  color: $nile-blue;
-}
-
-.notification-modal-message {
-  padding: 20px;
-}
-
-.notification-modal-message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  font-size: 17px;
-  color: $nile-blue;
-}