From d59fc79e0febb2306a4681077641f8680922e8fd Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Fri, 7 Aug 2020 13:57:33 -0500
Subject: [PATCH] colocate deposit-ether-modal styles (#9148)

Moves the still alive deposit-ether-modal styles to be colocated with it's component, as per the examples already in place in the components/modal folder
---
 .../app/modals/deposit-ether-modal/index.scss | 162 +++++++++++++++++
 ui/app/components/app/modals/index.scss       |   1 +
 ui/app/css/itcss/components/modal.scss        | 164 ------------------
 3 files changed, 163 insertions(+), 164 deletions(-)
 create mode 100644 ui/app/components/app/modals/deposit-ether-modal/index.scss

diff --git a/ui/app/components/app/modals/deposit-ether-modal/index.scss b/ui/app/components/app/modals/deposit-ether-modal/index.scss
new file mode 100644
index 000000000..c52e4e563
--- /dev/null
+++ b/ui/app/components/app/modals/deposit-ether-modal/index.scss
@@ -0,0 +1,162 @@
+.deposit-ether-modal {
+  border-radius: 8px;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+
+  &__header {
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    background-color: $mid-gray;
+    display: flex;
+    position: relative;
+    padding: 25px;
+    flex-flow: column;
+    align-items: flex-start;
+
+    &__title {
+      color: $white;
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    &__description {
+      color: $white;
+      font-size: 16px;
+      line-height: 22px;
+      margin-top: 10px;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 2em;
+      color: $white;
+      position: absolute;
+      top: 20.8px;
+      right: 28px;
+      cursor: pointer;
+    }
+  }
+
+  &__buy-rows {
+    width: 100%;
+    padding: 0 30px;
+    display: flex;
+    flex-flow: column nowrap;
+    flex: 1;
+    align-items: center;
+
+    @media screen and (max-width: 575px) {
+      height: 0;
+    }
+  }
+
+  &__logo {
+    height: 60px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__buy-row {
+    border-bottom: 1px solid $alto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1 0 auto;
+    padding: 30px 0 20px;
+    min-height: 170px;
+
+    @media screen and (max-width: 575px) {
+      min-height: 270px;
+      flex-flow: column;
+      justify-content: flex-start;
+    }
+
+    &__back {
+      position: absolute;
+      top: 10px;
+      left: 0;
+    }
+
+    &__logo-container {
+      display: flex;
+      justify-content: center;
+      flex: 0 0 auto;
+      padding: 0 20px;
+
+      @media screen and (min-width: 576px) {
+        width: 12rem;
+      }
+
+      @media screen and (max-width: 575px) {
+        width: 100%;
+        max-height: 6rem;
+        padding-bottom: 20px;
+      }
+    }
+
+    &__right {
+      display: flex;
+    }
+
+    &__description {
+      color: $cape-cod;
+      padding-bottom: 20px;
+      align-self: flex-start;
+
+      @media screen and (min-width: 575px) {
+        width: 15rem;
+      }
+
+      &__title {
+        font-size: 20px;
+        line-height: 30px;
+      }
+
+      &__text {
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 7px;
+      }
+    }
+
+    &__button {
+      display: flex;
+      justify-content: flex-end;
+
+      @media screen and (min-width: 575px) {
+        min-width: 300px;
+      }
+    }
+  }
+
+  &__buy-row:last-of-type {
+    border-bottom: 0;
+  }
+
+  &__deposit-button {
+    width: 257px;
+  }
+
+  .simple-dropdown {
+    color: #5b5d67;
+    font-size: 16px;
+    line-height: 21px;
+    border: 1px solid #d8d8d8;
+    background-color: #fff;
+    text-align: center;
+    width: 100%;
+    height: 45px;
+    line-height: 44px;
+    font-weight: 300;
+  }
+
+  .simple-dropdown__selected {
+    text-align: center;
+  }
+}
diff --git a/ui/app/components/app/modals/index.scss b/ui/app/components/app/modals/index.scss
index c7f01b20b..ae162ea16 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 'deposit-ether-modal/index';
 @import 'notification-modal/index';
 @import 'qr-scanner/index';
 @import 'transaction-confirmed/index';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 8d47c753e..a0ed3728d 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -275,167 +275,3 @@
     margin: 0 5px;
   }
 }
-
-// Deposit Ether Modal
-.deposit-ether-modal {
-  border-radius: 8px;
-  display: flex;
-  flex-flow: column;
-  height: 100%;
-
-  &__header {
-    width: 100%;
-    border-radius: 8px 8px 0 0;
-    background-color: $mid-gray;
-    display: flex;
-    position: relative;
-    padding: 25px;
-    flex-flow: column;
-    align-items: flex-start;
-
-    &__title {
-      color: $white;
-      font-size: 24px;
-      line-height: 32px;
-    }
-
-    &__description {
-      color: $white;
-      font-size: 16px;
-      line-height: 22px;
-      margin-top: 10px;
-    }
-
-    &__close::after {
-      content: '\00D7';
-      font-size: 2em;
-      color: $white;
-      position: absolute;
-      top: 20.8px;
-      right: 28px;
-      cursor: pointer;
-    }
-  }
-
-  &__buy-rows {
-    width: 100%;
-    padding: 0 30px;
-    display: flex;
-    flex-flow: column nowrap;
-    flex: 1;
-    align-items: center;
-
-    @media screen and (max-width: 575px) {
-      height: 0;
-    }
-  }
-
-  &__logo {
-    height: 60px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &__buy-row {
-    border-bottom: 1px solid $alto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1 0 auto;
-    padding: 30px 0 20px;
-    min-height: 170px;
-
-    @media screen and (max-width: 575px) {
-      min-height: 270px;
-      flex-flow: column;
-      justify-content: flex-start;
-    }
-
-    &__back {
-      position: absolute;
-      top: 10px;
-      left: 0;
-    }
-
-    &__logo-container {
-      display: flex;
-      justify-content: center;
-      flex: 0 0 auto;
-      padding: 0 20px;
-
-      @media screen and (min-width: 576px) {
-        width: 12rem;
-      }
-
-      @media screen and (max-width: 575px) {
-        width: 100%;
-        max-height: 6rem;
-        padding-bottom: 20px;
-      }
-    }
-
-    &__right {
-      display: flex;
-    }
-
-    &__description {
-      color: $cape-cod;
-      padding-bottom: 20px;
-      align-self: flex-start;
-
-      @media screen and (min-width: 575px) {
-        width: 15rem;
-      }
-
-      &__title {
-        font-size: 20px;
-        line-height: 30px;
-      }
-
-      &__text {
-        font-size: 14px;
-        line-height: 22px;
-        margin-top: 7px;
-      }
-    }
-
-    &__button {
-      display: flex;
-      justify-content: flex-end;
-
-      @media screen and (min-width: 575px) {
-        min-width: 300px;
-      }
-    }
-  }
-
-  &__buy-row:last-of-type {
-    border-bottom: 0;
-  }
-
-  &__deposit-button {
-    width: 257px;
-  }
-
-  .simple-dropdown {
-    color: #5b5d67;
-    font-size: 16px;
-    line-height: 21px;
-    border: 1px solid #d8d8d8;
-    background-color: #fff;
-    text-align: center;
-    width: 100%;
-    height: 45px;
-    line-height: 44px;
-    font-weight: 300;
-  }
-
-  .simple-dropdown__selected {
-    text-align: center;
-  }
-}