feat: add detour date and reason filter

assets/css/_circle_x_icon.scss

@@ -3,8 +3,6 @@
   width: 0.75rem;
   height: 0.75rem;
 
-  color: $color-gray-600;
-
   &__path {
     fill: currentColor;
     .c-circle-x-icon-container:hover & {

assets/css/_date_time_picker.scss

@@ -0,0 +1,70 @@
+@use "./color/tokens_2024" as tokens;
+
+.flatpickr-calendar {
+  .flatpickr-current-month {
+    .flatpickr-monthDropdown-months {
+      // fix bug in flatpickr where year overflows
+      display: inline-block !important;
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+
+    input.cur-year {
+      color: tokens.$gray-700;
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    svg {
+      fill: tokens.$gray-900;
+    }
+
+    &:hover svg {
+      fill: tokens.$eggplant-500 !important;
+    }
+  }
+
+  .flatpickr-day {
+    color: tokens.$black;
+
+    &.today {
+      border: unset;
+    }
+
+    &:hover,
+    &.today:hover {
+      color: tokens.$black;
+      background-color: tokens.$gray-300;
+      border-color: tokens.$gray-300;
+    }
+
+    &.prevMonthDay,
+    &.nextMonthDay {
+      &:not(.flatpickr-disabled):not(.selected) {
+        color: tokens.$gray-500;
+      }
+    }
+
+    &.disabled {
+      color: tokens.$gray-300;
+    }
+
+    &.selected,
+    &.selected.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.selected.today {
+      color: tokens.$white;
+      background-color: tokens.$eggplant-500;
+      border-color: tokens.$eggplant-500;
+
+      &:hover {
+        color: tokens.$white;
+        background-color: tokens.$eggplant-300;
+        border-color: tokens.$eggplant-300;
+      }
+    }
+  }
+}

assets/css/_filter_accordion.scss

@@ -1,5 +1,10 @@
 .c-filter-accordion {
-  @extend .c-garage-filter;
+  @include filter-input;
+  padding: unset;
+
+  &__header {
+    @include filter-placeholder;
+  }
 
   // Visible when collapsed
   &__toggle-button {

assets/css/_garage_filter.scss

@@ -1,19 +1,12 @@
-.c-garage-filter {
-  @include font-small;
-  font-weight: 400;
-  color: $color-gray-600;
-  background: $white;
-  border: 1px solid $color-gray-400;
-  border-radius: 6px;
+@use "./color/tokens_2024" as tokens;
 
-  &:hover {
-    border: 1px solid $color-eggplant-400;
-  }
+.c-garage-filter {
+  @include filter-input;
+  padding: unset;
+}
 
-  &:focus-within {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-  }
+.c-garage-filter__header {
+  @include filter-placeholder;
 }
 
 .c-garage-filter__show-hide-button {
@@ -51,6 +44,8 @@
 }
 
 .c-garage-filter__garages {
+  @include font-small;
+  font-weight: 400;
   margin: 0;
   padding: 1rem;
   display: flex;

assets/css/_search_form.scss

@@ -27,60 +27,6 @@
   position: relative;
 }
 
-.c-search-form__search-input-container {
-  // Use bootstrap control as base for now
-  @extend .form-control;
-
-  // fill control defined valid area
-  height: 100%;
-  // Make space for `input-controls`
-  padding-right: calc(2.25rem * 2);
-  // Ignore bootstrap padding due to `input-controls`
-  padding-block: 0;
-
-  border-color: $color-gray-400;
-
-  &:focus,
-  &:focus-within,
-  &:active {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px #aa4ef22b;
-    color: $color-gray-800;
-  }
-}
-
-.c-search-form__input {
-  // Align self within parent boundaries
-  width: 100%;
-  height: 100%;
-
-  // Match font size from the Route Picker Search
-  @include font-small;
-
-  // Remove default displays
-  border: none;
-}
-
-// #region Search Input Buttons
-.c-search-form__input-controls {
-  @include filter-input-controls;
-}
-
-.c-search-form__clear {
-  @include button-icon(0.875rem);
-
-  // Reserve space around icon in flex container
-  flex: 0;
-
-  height: 100%;
-  aspect-ratio: 1/1;
-}
-
-.c-search-form__submit {
-  @include filter-submit;
-}
-// #endregion Search Input Buttons
-
 // #region Autocomplete Control
 // Hide the autocomplete control by default
 .c-search-form__autocomplete-container {
@@ -96,7 +42,7 @@
 
   // -- Visually join the bottom of the input bar with autocomplete by squaring
   //    off the bottom
-  .c-search-form__search-input-container {
+  .c-search-form__input {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }

assets/css/_ui_kit.scss

@@ -379,35 +379,32 @@ $color-tooltip-background: #333333;
   font-weight: 400;
 }
 
-@mixin filter-input {
-  @include font-small;
-  line-height: 1;
-  border: 1px solid $color-gray-400;
-  border-radius: 6px;
-  padding: 0.625rem 1rem;
-  color: $color-gray-700;
-  font-weight: 400;
+@mixin filter-placeholder {
+  color: new_tokens.$gray-700;
+}
 
-  &::placeholder {
-    opacity: 1;
-    color: $color-gray-600;
-  }
+@mixin filter-border {
+  border-color: new_tokens.$gray-400;
 
   &:hover {
-    border: 1px solid $color-eggplant-400;
+    border-color: new_tokens.$eggplant-500;
+    box-shadow: 0 0 0 4px rgba(new_tokens.$eggplant-500, 0.25);
   }
 
-  &:focus {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-    color: $color-gray-800;
-
-    &::placeholder {
-      color: $color-gray-700;
-    }
+  &::placeholder {
+    @include filter-placeholder;
   }
 }
 
+@mixin filter-input {
+  @extend .form-control;
+
+  padding-right: 64px;
+  text-overflow: ellipsis;
+
+  @include filter-border;
+}
+
 @mixin filter-input-controls {
   position: absolute;
   // Stick to right side of box, do not intercept mouse events to the text input
@@ -420,57 +417,20 @@ $color-tooltip-background: #333333;
   display: flex;
   flex-flow: row nowrap;
   justify-content: end;
-}
-
-@mixin filter-clear {
-  @include button-transparent;
-  @include button-icon(0.875rem);
-  position: absolute;
-  display: flex;
-  width: 0.875rem;
-  height: 0.875rem;
-  color: $color-gray-600;
-
-  &:hover {
-    color: $color-gray-400;
-  }
-
-  &:focus-within {
-    color: $color-gray-700;
-  }
-}
-
-@mixin filter-submit {
-  span > svg {
-    fill: currentColor;
-
-    display: block;
-    height: 1rem;
-    aspect-ratio: 1/1;
-  }
-
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
 
-  height: 100%;
-  aspect-ratio: 1/1;
-
-  color: $color-eggplant-700;
-  border-radius: 0.375rem;
+  button {
+    @include button-icon(16px);
+    color: new_tokens.$gray-800;
+    min-width: 32px;
 
-  &[disabled] {
-    color: $color-gray-700;
-  }
-
-  &:focus {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-  }
+    &:hover,
+    &:focus {
+      color: var(--bs-primary);
+    }
 
-  &:hover svg {
-    color: $color-eggplant-500;
+    span svg {
+      stroke: none;
+    }
   }
 }
 
@@ -520,11 +480,6 @@ select {
   background-repeat: no-repeat, repeat;
   background-position: right 0.7em top 50%, 0 0;
   background-size: 0.65em auto, 100%;
-
-  &:focus,
-  &:hover {
-    color: $color-secondary-dark;
-  }
 }
 
 // #endregion

assets/css/app.scss

@@ -41,6 +41,7 @@ $vpp-location-padding: 1rem;
 @import "crowding";
 @import "cutout_overlay";
 @import "data_status_banner";
+@import "date_time_picker";
 @import "detour_list_page";
 @import "detours/detour_map";
 @import "detours/detour_modal";
@@ -102,7 +103,6 @@ $vpp-location-padding: 1rem;
 @import "properties_panel/tab_panels";
 @import "properties_panel/vehicle_properties_panel";
 @import "recent_searches";
-@import "route_filter";
 @import "route_ladder";
 @import "route_ladders";
 @import "route_picker";

assets/css/bootstrap/_extra_bespoke.scss

@@ -12,3 +12,24 @@
   --bs-btn-active-color: #{new_tokens.$lemon-800};
   --bs-btn-active-border-color: #{new_tokens.$lemon-700};
 }
+
+.input-group-filter {
+  position: relative;
+  display: flex;
+
+  input {
+    @include filter-input;
+
+    & + div {
+      @include filter-input-controls;
+    }
+  }
+}
+
+.select-filter {
+  @include filter-border;
+
+  &:has(option[value="all"]:checked) {
+    @include filter-placeholder;
+  }
+}