Style single-select as per design

app/webpacker/css/admin_v3/components/tom_select.scss

@@ -10,7 +10,8 @@
 
   &.input-active {
     .ts-control {
-      border-color: $lighter-grey;
+      border-color: $orient;
+      background-color: $lighter-grey;
 
       input {
         &::placeholder {
@@ -29,20 +30,32 @@
 
     input {
       font-size: $body-font-size;
+      height: auto;
 
       &::placeholder {
         color: $near-black;
       }
     }
+
+    .item {
+      margin-top: 2px; // Ensure it lines up with the input. I have no idea why it's necessary.
+    }
   }
 
   .ts-dropdown {
+    margin-top: 4px;
+    color: $near-black;
     @include border-radius($border-radius);
     border: none;
-    box-shadow: none;
-    color: $near-black;
+    box-shadow: $shadow-dropdown;
+
+    .ts-dropdown-content {
+      padding: $border-radius 0;
+    }
 
     .option {
+      padding: 8px;
+
       &.selected {
         border-left: 2px solid $orient;
       }
@@ -93,5 +106,6 @@
   .ts-dropdown {
     position: absolute;
     top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
+    margin-top: 0;
   }
 }

app/webpacker/css/admin_v3/globals/variables.scss

@@ -74,6 +74,9 @@ $color-action-save-brd:          very-light($color-success, 20 ) !default;
 $color-action-mail-bg:           very-light($color-success, 5  ) !default;
 $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 
+// Dropdown styles
+$shadow-dropdown:                0px 0px 8px 0px rgba($near-black, 0.25);
+
 // Select2 select field colors
 $color-sel-bg:                   $lighter-grey !default;
 $color-sel-hover-bg:             $lighter-grey !default;