Skip to content

Gayatri - Participation: add icons to Drop-off and No-show Rate Tracking filters - #5786

Open
sawantgayatri19 wants to merge 1 commit into
developmentfrom
gayatri/dropoff-noshow-filter-icons
Open

sawantgayatri19 wants to merge 1 commit into
developmentfrom
gayatri/dropoff-noshow-filter-icons

Conversation

@sawantgayatri19

Copy link
Copy Markdown

Description

Implements: (PRIORITY LOW) Phase 3 – Add Icons to Filters on Drop-off and No-show Rate Tracking Participation Page.
Location: /communityportal/reports/participation → Drop-off and no-show rate tracking

Main changes explained:

  • All Events filter: 📅 faCalendarCheck inside the box on the left.
  • All Time filter: 🕒 faClock, the same icon as the Upcoming Events time filter.
  • Added aria-labels ("Filter by event", "Filter by time") for screen readers.
  • The filters sit side by side and move below the title when the card is narrow, instead of overlapping it.
  • Icon styles are in a new DropOffTracking.module.css, so the shared Participation.module.css is unchanged. Icon color follows light/dark mode and doesn't block clicks.
  • Existing DropOffTracking tests still pass (69/69 Community Portal tests).

How to test:

  1. Check out this branch, run npm install and npm start (with the backend running), log in.
  2. Go to /communityportal/reports/participation and scroll to Drop-off and no-show rate tracking.
  3. The title is fully visible; both filters show their icons and the text doesn't overlap them.
  4. Pick an event (e.g. Yoga Class) and a time range: the table filters as before.
  5. Switch to dark mode: icons stay visible.

Screenshots or videos of changes:

Light mode: (attach)
drop off

Dark mode: (attach)
off

- Event filter shows faCalendarCheck and time filter shows faClock
  inside the box on the left, matching the Upcoming Events filter icons.
- Added aria-labels ("Filter by event", "Filter by time").
- Filters sit side by side and move below the title on narrow cards
  instead of overlapping it.
- Icon styles live in a new DropOffTracking.module.css so the shared
  Participation.module.css is unchanged; icon color follows dark mode.
@netlify

netlify Bot commented Nov 5, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit d73ec44
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aed0940e0597fe32ceae814
😎 Deploy Preview https://deploy-preview-5786--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@sonarqubecloud

sonarqubecloud Bot commented Nov 5, 2026

Copy link
Copy Markdown

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants