Modify interaction states and design for Apply Filter buttons

[angelathe]

What needs to be done

Right now, the Apply Filter buttons for Filter by Date and Filter by Condition are always enabled. We need to make sure that the button is only enabled when a filter change has been made. We also want to update the designs of the button so that it matches the designs for the disabled/enabled/hover/active states of the button.

Why it needs to be done

1. Apply Filter button should only be enabled when a filter change has been made
   • Why? User need clear feedback when they have made a pending modification to the filter they are interacting with.
2. Update the Apply Filter button designs for disabled/enabled/hover/active state of the button
   • Why? There should be distinct visual cues for each state to improve usability -- it makes the button's status clear to users.

Design review

Apply filter buttons
Link to Figma in dev mode

Acceptance Criteria

• For each filter box (by date and by condition), the Apply Filter button should only be enabled when a change has been made (i.e., A condition has been checked/unchecked, or a different date range has been selected).
  • The button should be enabled whether or not it ends up getting clicked. If the page is re-loaded and the query is re-set to its previous state, the Apply Filter button should be reset to the disabled state
• The Apply Filter button must have distinct visual styles for the following states:
  • Disabled: Button is not clickable
  • Enabled: Button is clickable
  • Hover: Button is hovered over
  • Active: Button is clicked

Technical Notes

Relevant files:

• containers/ecr-viewer/src/app/components/Filters.tsx

Additional context

N/A