colocate the base modal styles with the modal component (#9151)

finalizes the colocation of styles with the consuming components.

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

@@ -192,7 +192,7 @@ class FadeModal extends Component {
     const backdrop = this.props.backdrop
       ? (
         <div
-          className="backdrop"
+          className="modal__backdrop"
           style={backdropStyle}
           onClick={this.props.closeOnClick
             ? this.handleBackdropClick
@@ -208,7 +208,7 @@ class FadeModal extends Component {
       <span>
         <div className="modal" style={modalStyle}>
           <div
-            className="content"
+            className="modal__content"
             ref={(el) => (this.content = el)}
             tabIndex="-1"
             style={contentStyle}

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

@@ -1,14 +1,46 @@
 @import 'account-details-modal/index';
 @import 'account-modal-container/index';
+@import 'add-to-addressbook-modal/index';
 @import 'cancel-transaction/index';
 @import 'confirm-remove-account/index';
 @import 'deposit-ether-modal/index';
+@import 'edit-approval-permission/index';
 @import 'export-private-key-modal/index';
 @import 'hide-token-confirmation-modal/index';
+@import 'metametrics-opt-in-modal/index';
+@import 'new-account-modal/index';
 @import 'notification-modal/index';
 @import 'qr-scanner/index';
 @import 'transaction-confirmed/index';
-@import 'metametrics-opt-in-modal/index';
+
-@import './add-to-addressbook-modal/index';
+.modal {
-@import './edit-approval-permission/index';
+  z-index: 1050;
-@import './new-account-modal/index';
+  position: fixed;
+  width: 500px;
+  transform: translate3d(-50%, -50%, 0);
+  top: 50%;
+  left: 50%;
+
+  &__content {
+    margin: 0;
+    background-color: white;
+    animation-fill-mode: forwards;
+  }
+
+  &__backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+    background-color: #373a47;
+    animation-fill-mode: forwards;
+    animation-duration: 0.3s;
+  }
+
+  & > div:focus {
+    outline: none !important;
+  }
+}
+

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

@@ -6,7 +6,6 @@
 @import '../../../components/ui/icon/preloader/index';
 @import './footer';
 @import './network';
-@import './modal';
 @import './newui-sections';
 @import './send';
 @import './loading-overlay';

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

@@ -1,30 +0,0 @@
-.modal {
-  z-index: 1050;
-  position: fixed;
-  width: 500px;
-  transform: translate3d(-50%, -50%, 0);
-  top: 50%;
-  left: 50%;
-
-  .content {
-    margin: 0;
-    background-color: white;
-    animation-fill-mode: forwards;
-  }
-}
-
-.backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  background-color: #373a47;
-  animation-fill-mode: forwards;
-  animation-duration: 0.3s;
-}
-
-.modal > div:focus {
-  outline: none !important;
-}