Replace icons (#747)

* Replaces dropdown icon, close icon, carat icon, collapse icon, add icon

Co-authored-by: Sarah Gillespie <sarahgillespi314@gmail.com>

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

@@ -62,7 +62,7 @@
       border: 0;
       float: right;
       position: relative;
-      line-height: 28px;
+      line-height: 34px;
       width: 25px;
       padding: 0;
       margin: 0 5px;
@@ -81,12 +81,6 @@
         color: $ui-gray;
         text-indent: 0;
       }
-
-      &:hover {
-        &::after {
-          color: $core-fleet-blue;
-        }
-      }
     }
 
     .Select-value-label {
@@ -106,21 +100,57 @@
   }
 
   .Select-arrow {
-    border-top-color: $core-fleet-black;
+    content: url("../assets/images/icon-chevron-black-16x16@2x.png");
+    height: 16px;
+    width: 16px;
+    margin-top: 6px;
+    margin-left: -4px;
+    border: none;
+
+    &:hover {
+      content: url("../assets/images/icon-chevron-blue-16x16@2x.png");
+    }
   }
 
-  &.is-focused {
-    .Select-control {
-      border: 1px solid $core-vibrant-blue;
+  &.is-open {
+    .Select-arrow {
+      content: url("../assets/images/icon-collapse-black-16x16@2x.png");
+      height: 16px;
+      width: 16px;
+      margin-top: 11px;
+      margin-left: -3px;
+      border: none;
+
+      &:hover {
+        content: url("../assets/images/icon-collapse-blue-16x16@2x.png");
+      }
     }
 
-    &:not(.is-open) {
-      .Select-control {
-        box-shadow: none;
+    .Select-arrow-zone {
+      &:hover {
+        .Select-arrow {
+          border-top-color: transparent;
+        }
       }
     }
   }
 
+  // .Select-arrow {
+  //   border-top-color: $core-vibrant-blue;
+  // }
+
+  // &.is-focused {
+  //   .Select-control {
+  //     border: 1px solid $core-vibrant-blue;
+  //   }
+
+  //   &:not(.is-open) {
+  //     .Select-control {
+  //       box-shadow: none;
+  //     }
+  //   }
+  // }
+
   &.has-value {
     > .Select-control,
     &.is-pseudo-focused > .Select-control {