Mani shashank fix: match no-show insights tab and percentage styling to Figma

[shashankm9]

Description

Figma:

Related PRS (if any):

…

Main changes explained:

1. Percentage color fix

• Renamed .insightPercentage → .insightsPercentage (was a class name mismatch, so no styles applied at all)
• Color changed from neutral dark to red — matching the tracking table's trackingRateRed for consistency
• Removed font-weight: bold

2. Active tab — pill/segmented control style

• Container (.insightsTabs): replaced bordered rectangle with a gray (#f0f0f0) rounded pill background (border-radius: 8px), no border
• Inactive tabs: transparent background, dark gray text
• Active tab: white background with subtle shadow — visually "lifted" within the gray container

3. Dark mode active tab

• Container: #334155 (visible slate, not near-black)
• Active tab: near-white #e2e8f0 background with dark #1e293b text — strong light-on-dark contrast
• Inactive tabs: muted #94a3b8 text

4. Stylelint fixes (to pass the pre-commit hook)

• Converted all rgba() → rgb(a / b%) modern notation
• Shortened #ffffff → #fff
• Expanded single-line declaration blocks
• Fixed selector ordering for no-descending-specificity
• Replaced deprecated page-break-* with break-*

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to dashboard→ http://localhost:5173/communityportal/reports/participation
6. verify function percentage is in right color
7. verify active tab style matches with the figma

Screenshots or videos of changes:

Recording.2026-03-19.211909.mp4

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	dd2c813
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69ead12edf09d30008f76bde
😎 Deploy Preview	https://deploy-preview-5023--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[rohanrastogi311]

Hi Mani,

Well done with this implementation.

[HemanthNidamanuru]

Hi Shashank,

I tested this PR locally and no-show insights tab and percentage style correctly matches with Figma Prototype.

[sonarqubecloud]

Quality Gate passed

Issues
5 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

[one-community]

Thank you all, merging!