Update Search/Filter Modal functionality and design

[traycn]

Overview

We need to update the design for the Search/Filter modal to change the functionality of the pre-defined Date Ranges and the style of the modals components.

Design issue for reference: #1600

More Info (optional)

Hand Off Materials
Figma Section Name: Search/Filter Modal #1600 - Final

Action Items

NEW FEATURE: Custom Date Range using Start/End Date Input fields

• Add 2 Date validated input fields to replace the single Date Range input field.
  • Update the queries Date Range values for Start/End Date based on the input field values:
    • Start Date
    • End Date
  • Quick test of the feature 💫
    • Check Date Range values are reflected in the 2 input fields
    • Check Date Range values are reflected in the results of the Map
    • Check Date Range values are reflected in the Calendar
• Style the two input fields with a Calendar icon based on mockups:
  • Calendar icon
  • Start Date
  • End Date
• Update Styling for Calendar
  • Center align Calendar
  • Update Arrow colors to the yellow used across modal
  • Update Styling of date picker circle/highlighted date range

UPDATE FEATURE: Pre-defined Date Ranges

• Change date ranges to query:
  • Last 7 Days
  • Last 14 Days
  • Last 30 Days
• Style date ranges to the cell design & new text:
  • Last 7 Days
  • Last 14 Days
  • Last 30 Days
• Quick test of the feature 💫
  • Check Date Range values are reflected in the results of the Map
  • Check Date Range values are reflected in the Calendar

Resources/Instructions

Interactive Prototype Figma file - please refer to the 'Allison J' page and the wireframes under 'INTERACTIVE PROTOTYPE - 2.27.24'
Popover Message Figma file - refer to the 'Anna K' page and the 'Popover' section

• Figma design file link
• Related previous ticket

Screenshot before proposed changes


Screenshot after proposed changes