From 85e658993b6a6f0ccf459b644e191bb40754cdab Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 7 Aug 2020 10:25:00 -0500
Subject: [PATCH] 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 +
 .../app/modals/notification-modal/index.js    |  1 +
 .../app/modals/notification-modal/index.scss  | 56 +++++++++++
 .../notification-modal.js                     |  2 +-
 ui/app/css/itcss/components/modal.scss        | 94 -------------------
 5 files changed, 59 insertions(+), 95 deletions(-)
 create mode 100644 ui/app/components/app/modals/notification-modal/index.js
 create mode 100644 ui/app/components/app/modals/notification-modal/index.scss
 rename ui/app/components/app/modals/{ => notification-modal}/notification-modal.js (97%)

diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss
index ebb662b96..c7f01b20b 100644
--- a/ui/app/components/app/modals/index.scss
+++ b/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';
diff --git a/ui/app/components/app/modals/notification-modal/index.js b/ui/app/components/app/modals/notification-modal/index.js
new file mode 100644
index 000000000..a2aab7c1d
--- /dev/null
+++ b/ui/app/components/app/modals/notification-modal/index.js
@@ -0,0 +1 @@
+export { default } from './notification-modal'
diff --git a/ui/app/components/app/modals/notification-modal/index.scss b/ui/app/components/app/modals/notification-modal/index.scss
new file mode 100644
index 000000000..93e085496
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal/notification-modal.js
similarity index 97%
rename from ui/app/components/app/modals/notification-modal.js
rename to ui/app/components/app/modals/notification-modal/notification-modal.js
index 7fe776934..71f826747 100644
--- a/ui/app/components/app/modals/notification-modal.js
+++ b/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 = {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 318cfb1ee..7b63ffd9f 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/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;
-}