Clean up css for react-select v2 #13425

public/sass/_variables.dark.scss

@@ -194,6 +194,7 @@ $input-box-shadow-focus: rgba(102, 175, 233, 0.6);
 $input-color-placeholder: $gray-1 !default;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-3;
+$input-color-select-arrow: $white;
 
 // Search
 $search-shadow: 0 0 30px 0 $black;

public/sass/_variables.light.scss

@@ -190,6 +190,7 @@ $input-box-shadow-focus: $blue !default;
 $input-color-placeholder: $gray-4 !default;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
+$input-color-select-arrow: $gray-1;
 
 // Sidemenu
 // -------------------------

public/sass/components/_form_select_box.scss

@@ -1,19 +1,5 @@
 $select-input-height: 35px;
-$select-menu-max-height: 300px;
-$select-item-font-size: $font-size-base;
-$select-item-bg: $dropdownBackground;
-$select-item-fg: $input-color;
-$select-option-bg: $menu-dropdown-bg;
-$select-option-color: $input-color;
-$select-noresults-color: $text-color;
-$select-input-bg: $input-bg;
-$select-input-border-color: $input-border-color;
-$select-menu-box-shadow: $menu-dropdown-shadow;
-$select-text-color: $text-color;
 $select-input-bg-disabled: $input-bg-disabled;
-$select-option-selected-bg: $dropdownLinkBackgroundActive;
-
-// @import '../../../node_modules/react-select/scss/default.scss';
 
 @mixin select-control() {
   width: 100%;
@@ -29,13 +15,10 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
   @include box-shadow($shadow);
 }
 
-// new react-select WIP
 .gf-form-select2__control {
   @include select-control();
-  border-color: $dark-3;
-
-  border: 1px solid #262628;
-  color: #d8d9da;
+  border: 1px solid $input-border-color;
+  color: $input-color;
   cursor: default;
   display: table;
   border-spacing: 0;
@@ -86,7 +69,7 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
     color: $dropdownLinkColorHover;
     @include left-brand-border-gradient();
     .fa {
-      color: white;
+      color: $white;
     }
   }
 }
@@ -104,7 +87,7 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
 }
 
 .gf-form-select2__select-arrow {
-  border-color: #999 transparent transparent;
+  border-color: $white transparent transparent;
   border-style: solid;
   border-width: 5px 5px 2.5px;
   display: inline-block;
@@ -113,79 +96,13 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
   position: relative;
 
   &.gf-form-select2__select-arrow--reversed {
-    border-color: transparent transparent #999;
+    border-color: transparent transparent $white;
     top: -2px;
     border-width: 0 5px 5px;
   }
 }
-
-// react-select tweaks
 .gf-form-input--form-dropdown {
   padding: 0;
   border: 0;
   overflow: visible;
-
-  .Select-placeholder {
-    color: $input-color-placeholder;
-  }
-
-  > .Select-control {
-    @include select-control();
-    border-color: $dark-3;
-
-    input {
-      min-width: 1rem;
-    }
-
-    .Select-clear,
-    .Select-arrow {
-      margin-right: 8px;
-    }
-
-    .Select-value {
-      display: inline-block;
-      padding: $input-padding-y $input-padding-x;
-      font-size: $font-size-md;
-      line-height: $input-line-height;
-      vertical-align: baseline;
-      white-space: nowrap;
-    }
-  }
-
-  &.is-open > .Select-control {
-    background: transparent;
-    border-color: $dark-3;
-  }
-
-  &.is-focused > .Select-control {
-    background-color: $input-bg;
-    @include select-control-focus();
-  }
-
-  &.is-focused:not(.is-open) > .Select-control {
-    background-color: $input-bg;
-    @include select-control-focus();
-  }
-
-  .Select-menu-outer {
-    border: 0;
-    width: auto;
-  }
-
-  .Select-option {
-    border-left: 2px solid transparent;
-  }
-
-  .Select-option.is-focused {
-    background-color: $dropdownLinkBackgroundHover;
-    color: $dropdownLinkColorHover;
-    @include left-brand-border-gradient();
-  }
-}
-
-.gf-form-input--form-dropdown-right {
-  .Select-menu-outer {
-    right: 0;
-    left: unset;
-  }
 }

public/sass/components/_tagsinput.scss

@@ -19,7 +19,7 @@
 
   .tag {
     margin-right: 2px;
-    color: white;
+    color: $white;
 
     [data-role='remove'] {
       margin-left: 8px;
@@ -63,13 +63,6 @@
   .tag-count-label {
     margin-left: 3px;
   }
-
-  .gf-form-input--form-dropdown {
-    .Select-menu-outer {
-      border: 0;
-      width: 100%;
-    }
-  }
 }
 
 .tag-filter-values {