[Jaden300]

Jaden fix: No-show Rate Insights percentage styling inconsistent with Figma (DONE Jaden)- #5785

Description

Fixes the percentage values in the No-show Rate Insights section of /communityportal/reports/participation, which did not follow the red emphasis and weight from Figma. The fix from #5023 is no longer present on development, so this re-applies it against the current code.

The root cause was a CSS module class name mismatch: NoShowInsights.jsx used styles.insightsPercentage and styles.insightsPercentageDark, while the stylesheet only defined .insightPercentage. The classes resolved to undefined, so no percentage styles applied at all and the only color came from a hardcoded inline style.

Related PRs

Follow-up to #5023 (Mani shashank - match no-show insights tab and percentage styling to Figma)

Changes made

Class name fix

• Renamed .insightPercentage to .insightsPercentage in Participation.module.css so it matches the className used in NoShowInsights.jsx

Styling

• Percentages are red with font-weight 500 instead of bold, following the intent of Mani shashank fix: match no-show insights tab and percentage styling to Figma #5023
• Light mode uses #d32f2f (4.98:1 on white, meets WCAG 4.5:1); plain red is about 4:1 and fails
• Dark mode .insightsPercentageDark uses #ff6b6b instead of the neutral --color-text-dark
• Removed the hardcoded inline style={{ color: 'red' }} from NoShowInsights.jsx so styling lives in the CSS module

Scope

• 2 files changed: NoShowInsights.jsx and Participation.module.css

How to test

1. Check out branch jaden-fix-noshow-insights-percentage-styling
2. Run npm install and npm run start:local
3. Go to /communityportal/reports/participation and scroll to No-show Rate Insights
4. Verify the percentage values (e.g. 55%, 43%) are red and not bold in light mode
5. Toggle dark mode ON - verify the percentages are a lighter red and readable on the dark background
6. Switch between the insights tabs and sort - verify the percentage styling stays consistent

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	c5b43bb
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aed08168c090df81a8ce458
😎 Deploy Preview	https://deploy-preview-5785--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle 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]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud