Make date range textboxes clickable in Search and Filters modal

[ryanfchase]

Overview

Based on usability testing, we want to make the date range text boxes function similarly to the calendar dropdown button so that users can access the calendar more easily.

Action Items

• Modify DatePicker to add on-click functionality to the Selected Days textboxes
• Modify the cursor type to be cursor: pointer when hovering over Selected Days textboxes
• Provide SCREEN RECORDING of date range textboxes causing the date picker to appear

Resources/Instructions

Important Components & Files

• DateSelector: components/DateSelector/DateSelector.jsx
• DatePicker: components/common/DatePicker/DatePicker.jsx
  • consider adding on-click functionality to L115: (see below)
  • consider the existing calendar toggle method: toggleCalendar, defined on L109 and used on L119 in <IconButton/>

L115 of DatePicker.jsx:

  <div>{renderSelectedDays([startDate, endDate], classes, range)}</div>

Screenshot before proposed changes

Date range text boxes can be highlighted, but do not contain functionality

SCREEN RECORDING of proposed changes

[TODO: insert screen capture here]

[ryanfchase]

@palakkeni5 thank you for getting started on this. Can you leave a comment with the following info:

• your ETA (feel free to give a generous estimate since this is your first ticket)
• your availability (e.g. when can we reach you for comment/discussion on this ticket)

Thanks, happy coding

[DorianDeptuch]

ETA: Friday, September 13th
Availability: Weekday Evenings 7pm-11pm

[DorianDeptuch]

The PR for this issue can be found here: #1826

@ryanfchase @traycn

[ryanfchase]

@DorianDeptuch we'll just do 1 approval for your PR. You're good to merge when ready 👍