Aditya-Fix: Improve dark mode text contrast in Total Org Summary statistics cards

[Aditya-gam]

---

Description

Fixes critical readability issue in Total Org Summary page where statistics card text became unreadable in dark mode due to poor contrast (white text on light card backgrounds). Also converts StatisticsTab component to CSS modules to comply with pre-commit hook requirements.

Key Fix: Statistics card text now remains black in dark mode for proper contrast, while section headers remain white for theme consistency.

---

Related PRs

• This PR fixes dark mode issues from PR #4142

---

Main Changes

Files Modified

1. src/components/TotalOrgSummary/StatisticsTab/StatisticsTab.module.css (renamed from .css)

   • Converted all CSS classes from kebab-case to camelCase for CSS modules
   • Added dark mode override selectors (lines 47-57) to keep card text black
   • Updated selectors to use :global() syntax for cross-module references
   • Preserved CSS variables and responsive styles

2. src/components/TotalOrgSummary/StatisticsTab/StatisticsTab.jsx

   • Updated import to use CSS module: import styles from './StatisticsTab.module.css'
   • Replaced all className strings with styles.className references
   • No functional changes to component logic

Implementation Details

• Dark Mode Fix: Added specific selectors using :global(.bg-oxford-blue) with higher specificity to override white text rule from TotalOrgSummary.module.css line 17
• CSS Modules: All classes are now scoped, preventing global conflicts
• Specificity Strategy: Override targets .statisticsTabHolder combined with element types to ensure proper cascade

---

How to Test

1. Checkout branch: Aditya-fix/dark-mode-statistics-card-text-contrast
2. Reinstall dependencies and clear cache: rm -rf node_modules && yarn cache clean
3. Run yarn install and start the app: yarn start:local
4. Log in as owner/admin.
5. Navigate to Total Org Summary page
6. Toggle dark mode and verify:
   • Statistics cards show black text on light backgrounds (readable)
   • Section headers remain white
   • Light mode unchanged (no regressions)
7. Test responsive behavior on different screen sizes

---

Screenshots

• Before: White text on light card backgrounds (poor contrast)

BeforeVideo.mov

• After: Black text on light card backgrounds (good contrast)

AfterVideo.mov

• Include side-by-side comparison(Left Image is After and Right Image is before)

---

Notes

• Pre-commit Hook: Now complies with .module.css file requirement

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	45ce07b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69334a76b9b4ea0008ccbd47
😎 Deploy Preview	https://deploy-preview-4506--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

[Anusha-Gali]

Hi Aditya,

I have reviewed your PR locally and the text appears in dark mode as per the requirements and is responsive as well.

[one-community]

Thank you all, merging!