styled both drop downs

Author: garrettlchow

src/app/components/Actions/DropDown.tsx

@@ -21,6 +21,7 @@ const DropDown = ({
     <div className='dropdown-container'>
       <Select
         placeholder='Select Hook'
+        classNamePrefix='react-select'
         onChange={handleChange}
         options={options}
         value={options.find((option) => option.value === dropdownSelection)}

src/app/styles/components/_actionComponent.scss

@@ -94,10 +94,6 @@
   background: var(--button-primary-bg);
 }
 
-.jump-button:hover {
-  background: var(--text-primary);
-}
-
 .current-location {
   color: var(--color-primary);
   background: #f0fdfa;

src/app/styles/components/_performanceVisx.scss

@@ -62,7 +62,7 @@
 .routes,
 .control-select option {
   padding: 0.5rem;
-  color: #1e293b;
+  color: var(--text-primary);
 }
 
 // bar graph background

src/app/styles/layout/_travelContainer.scss

@@ -13,3 +13,117 @@
   min-width: 90px;
   margin: 8px;
 }
+
+.react-select__control {
+  background-color: var(--bg-secondary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 6px !important;
+  min-height: 36px !important;
+  box-shadow: none !important;
+  cursor: pointer !important;
+  transition: all 200ms ease !important;
+}
+
+.react-select__control:hover {
+  border-color: var(--border-color-dark) !important;
+  background-color: var(--bg-tertiary) !important;
+}
+
+.react-select__control--is-focused {
+  border-color: var(--color-primary) !important;
+  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1) !important;
+}
+
+.react-select__menu {
+  background-color: var(--bg-primary) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 6px !important;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+  margin-top: 4px !important;
+  z-index: 100 !important;
+}
+
+.react-select__option {
+  background-color: var(--bg-primary) !important;
+  color: var(--text-primary) !important;
+  cursor: pointer !important;
+  padding: 8px 12px !important;
+  font-size: 14px !important;
+  transition: all 200ms ease !important;
+}
+
+.react-select__option:hover {
+  background-color: var(--bg-tertiary) !important;
+}
+
+.react-select__option--is-selected {
+  background-color: var(--color-primary) !important;
+  color: white !important;
+}
+
+.react-select__option--is-focused {
+  background-color: var(--bg-tertiary) !important;
+}
+
+.react-select__single-value {
+  color: var(--text-primary) !important;
+  font-size: 14px !important;
+}
+
+.react-select__indicator-separator {
+  background-color: var(--border-color) !important;
+}
+
+.react-select__dropdown-indicator {
+  color: var(--text-secondary) !important;
+  transition: transform 200ms ease !important;
+}
+
+.react-select__dropdown-indicator:hover {
+  color: var(--text-primary) !important;
+}
+
+.react-select__control--menu-is-open .react-select__dropdown-indicator {
+  transform: rotate(180deg) !important;
+}
+
+.react-select__placeholder {
+  color: var(--text-secondary) !important;
+  font-size: 14px !important;
+}
+
+.react-select__multi-value {
+  background-color: var(--bg-tertiary) !important;
+  border-radius: 4px !important;
+}
+
+.react-select__multi-value__label {
+  color: var(--text-primary) !important;
+  font-size: 14px !important;
+  padding: 2px 6px !important;
+}
+
+.react-select__multi-value__remove {
+  color: var(--text-secondary) !important;
+  cursor: pointer !important;
+  padding: 0 4px !important;
+  transition: all 200ms ease !important;
+}
+
+.react-select__multi-value__remove:hover {
+  background-color: var(--border-color) !important;
+  color: var(--text-primary) !important;
+}
+
+.react-select__clear-indicator {
+  color: var(--text-secondary) !important;
+  cursor: pointer !important;
+  padding: 0 8px !important;
+  transition: all 200ms ease !important;
+}
+
+.react-select__clear-indicator:hover {
+  color: var(--text-primary) !important;
+}