Fixing dropdown caret for dark and light mode (#13911)

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
+      <IconCaretDown size={16} className="dropdown__icon-caret-down" />
-        size={16}
-        className="dropdown-container__icon-caret-down"
-      />
     </div>
   );
 };

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;

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) => {