Dropdown Component: Clean Styling across Browsers (#1365)

* Dropdown styling (Chrome and Firefox)
* Fix incompatible row heights rendering in tables (Firefox)

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -54,6 +54,10 @@
       border-radius: 4px;
       background-color: $ui-off-white;
       border: solid 1px $core-dark-blue-grey;
+
+      &.is-focused {
+        border: 1px solid $core-vibrant-blue;
+      }
     }
   }
 
@@ -97,9 +101,12 @@
   &--single {
     > .Select-control {
       .Select-value {
-        line-height: 38px;
-        margin-top: 4px;
+        line-height: 40px;
         border: none;
+        top: 1px;
+        right: 1px;
+        left: 1px;
+        bottom: 1px;
       }
     }
   }
@@ -140,21 +147,17 @@
     }
   }
 
-  // .Select-arrow {
-  //   border-top-color: $core-vibrant-blue;
-  // }
+  &.is-focused {
+    .Select-control {
+      border: 1px solid $core-vibrant-blue;
+    }
 
-  // &.is-focused {
-  //   .Select-control {
-  //     border: 1px solid $core-vibrant-blue;
-  //   }
-
-  //   &:not(.is-open) {
-  //     .Select-control {
-  //       box-shadow: none;
-  //     }
-  //   }
-  // }
+    &:not(.is-open) {
+      .Select-control {
+        box-shadow: none;
+      }
+    }
+  }
 
   &.has-value {
     > .Select-control,
@@ -169,12 +172,12 @@
   }
 
   .Select-menu-outer {
-    margin-top: $pad-xsmall;
     box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15);
-    border-radius: $border-radius;
+    border-radius: 0 0 $border-radius $border-radius;
     z-index: 6;
     overflow: hidden;
     border: 0;
+    margin: 0;
   }
 
   .Select-noresults {
@@ -196,6 +199,11 @@
       }
     }
 
+    &:last-child {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
     &.is-disabled {
       color: $ui-gray;
 
@@ -248,10 +256,6 @@
       }
     }
 
-    .Select-value {
-      margin-top: 4px;
-    }
-
     .Select-value-label {
       padding: 0 0 0 10px;
     }