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.
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
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: https://github.com/hackforla/311-data/issues/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
UPDATE FEATURE: Pre-defined Date Ranges
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
Screenshot before proposed changes
Screenshot after proposed changes
