From a79d3eb928718552fcdbc7b4b4e48817f38e6d32 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 21 Mar 2022 08:33:22 -0500
Subject: [PATCH] Dark Mode: Select Quote Popover (#14054)

---
 .../swaps/exchange-rate-display/index.scss    |  4 ---
 .../swaps/select-quote-popover/index.scss     | 32 ++++++++-----------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/ui/pages/swaps/exchange-rate-display/index.scss b/ui/pages/swaps/exchange-rate-display/index.scss
index 2d68dca24..bbd00c9f6 100644
--- a/ui/pages/swaps/exchange-rate-display/index.scss
+++ b/ui/pages/swaps/exchange-rate-display/index.scss
@@ -46,8 +46,4 @@
       -webkit-transform: rotate(180deg);
     }
   }
-
-  &--white {
-    color: var(--white);
-  }
 }
diff --git a/ui/pages/swaps/select-quote-popover/index.scss b/ui/pages/swaps/select-quote-popover/index.scss
index d40da99c2..d221f893c 100644
--- a/ui/pages/swaps/select-quote-popover/index.scss
+++ b/ui/pages/swaps/select-quote-popover/index.scss
@@ -72,18 +72,16 @@
     @include H6;
 
     cursor: pointer;
-    color: var(--black);
+    color: var(--color-text-default);
     height: 49px;
-    border-bottom: 1px solid var(--color-background-alternative);
+    border: 1px solid transparent;
     margin-bottom: 8px;
     border-radius: 8px;
-    background: var(--Grey-000);
+    background: var(--color-background-alternative);
     padding-right: 12px;
-    border: none;
 
     &:hover {
       border: 1px solid var(--color-primary-default);
-      width: 101%;
       padding-right: 11px;
       padding-left: 19.5px;
     }
@@ -98,32 +96,30 @@
     }
 
     &--selected {
-      color: var(--white);
+      color: var(--color-text-default);
       background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--primary-alternative) 101.32%);
       box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
       border-radius: 8px;
-      border-bottom: none;
-      border-top: none;
       height: 64px;
 
       &:hover {
+        color: var(--color-text-default);
         background: linear-gradient(90deg, var(--color-primary-default) 0%, var(--color-primary-alternative) 101.32%);
         width: 100%;
         padding-left: 20px;
         padding-right: 12px;
-        border: none;
       }
 
       .select-quote-popover__caret-right {
-        color: var(--white);
+        color: var(--color-primary-inverse);
 
         &:hover {
-          color: var(--color-text-alternative);
+          color: var(--color-text-default);
         }
       }
 
       .select-quote-popover__zero-slippage {
-        color: var(--white);
+        color: var(--color-primary-inverse);
       }
     }
   }
@@ -159,7 +155,7 @@
 
     &:hover {
       border-radius: 8px;
-      background: white;
+      background: var(--color-primary-inverse);
       border: 1px solid var(--color-primary-default);
     }
   }
@@ -182,7 +178,7 @@
   &__zero-slippage {
     font-size: 12px;
     line-height: 100%;
-    color: #6a737d;
+    color: var(--color-text-muted);
     font-weight: normal;
   }
 
@@ -239,7 +235,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: white;
+    color: var(--color-primary-inverse);
     border-radius: 5px;
     padding: 4px;
     font-size: 10px;
@@ -247,15 +243,15 @@
     padding-bottom: 2px;
 
     &--blue {
-      background: var(--Blue-300);
+      background: var(--color-primary-default);
     }
 
     &--orange {
-      background: var(--Orange-400);
+      background: var(--color-secondary-default);
     }
 
     &--green {
-      background: var(--Green-500);
+      background: var(--color-success-default);
     }
   }
 }