From 8e0f71a00859d7ddadac15a89e34999a05d11d0c Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Fri, 11 Mar 2022 09:09:15 -0800
Subject: [PATCH] Fixing dropdown caret for dark and light mode (#13911)

---
 ui/components/ui/dropdown/dropdown.js         |  9 ++--
 ui/components/ui/dropdown/dropdown.scss       | 41 ++++++++++---------
 .../advanced-tab/advanced-tab.component.js    |  2 +-
 3 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/ui/components/ui/dropdown/dropdown.js b/ui/components/ui/dropdown/dropdown.js
index 040721a0e..3a6de0dca 100644
--- a/ui/components/ui/dropdown/dropdown.js
+++ b/ui/components/ui/dropdown/dropdown.js
@@ -22,9 +22,9 @@ const Dropdown = ({
   );
 
   return (
-    <div className="dropdown-container">
+    <div className={classnames('dropdown', className)}>
       <select
-        className={classnames('dropdown', className)}
+        className="dropdown__select"
         disabled={disabled}
         title={title}
         onChange={_onChange}
@@ -39,10 +39,7 @@ const Dropdown = ({
           );
         })}
       </select>
-      <IconCaretDown
-        size={16}
-        className="dropdown-container__icon-caret-down"
-      />
+      <IconCaretDown size={16} className="dropdown__icon-caret-down" />
     </div>
   );
 };
diff --git a/ui/components/ui/dropdown/dropdown.scss b/ui/components/ui/dropdown/dropdown.scss
index c7d6824ca..7311bbac0 100644
--- a/ui/components/ui/dropdown/dropdown.scss
+++ b/ui/components/ui/dropdown/dropdown.scss
@@ -1,32 +1,33 @@
 .dropdown {
-  @include H6;
-
-  appearance: none;
-  color: var(--color-text-default);
-
-  // TODO: remove these after getting autoprefixer working in Storybook
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border: 1px solid var(--color-border-default);
-  border-radius: 4px;
-  background-color: var(--color-background-default);
-  color: var(--color-text-default);
-  padding: 8px 32px 8px 16px;
-
-  [dir='rtl'] & {
-    padding: 8px 16px 8px 32px;
-  }
-}
-
-.dropdown-container {
   position: relative;
   display: inline-block;
 
+  &__select {
+    appearance: none;
+    // TODO: remove these after getting autoprefixer working in Storybook
+    -moz-appearance: none;
+    -webkit-appearance: none;
+
+    @include H6;
+
+    color: var(--color-text-default);
+    border: 1px solid var(--color-border-default);
+    border-radius: 4px;
+    background-color: var(--color-background-default);
+    padding: 8px 40px 8px 16px;
+    width: 100%;
+
+    [dir='rtl'] & {
+      padding: 8px 16px 8px 40px;
+    }
+  }
+
   &__icon-caret-down {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
+    pointer-events: none;
 
     [dir='rtl'] & {
       left: 16px;
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 116effd62..60bae67da 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -172,7 +172,7 @@ export default class AdvancedTab extends PureComponent {
         <div className="settings-page__content-item">
           <div className="settings-page__content-item-col">
             <Button
-              type="warning"
+              type="danger"
               large
               className="settings-tab__button--red"
               onClick={(event) => {