Skip to content

Sayali : convert CSS files to CSS modules#5194

Merged
one-community merged 17 commits into
developmentfrom
fix/css-modules-v2
May 28, 2026
Merged

Sayali : convert CSS files to CSS modules#5194
one-community merged 17 commits into
developmentfrom
fix/css-modules-v2

Conversation

@sayali-2308
Copy link
Copy Markdown
Contributor

Description

Implements CSS Modules conversion across the HGN Frontend to prevent global CSS conflicts between components.

Related PRs (if any):

No related backend PR.

##Main changes explained:

  • Renamed 51 .css files to .module.css across src/components/
  • Updated all local CSS imports to use import styles from './X.module.css' format
  • Replaced className="..." strings with className={styles...} for all local CSS classes
  • Reverted Bootstrap/third-party utility classes back to plain strings
  • Fixed third-party CSS imports (bootstrap, leaflet, react-toastify) that were wrongly converted
  • Updated 10+ test files to use CSS module compatible selectors
  • Fixed GoogleDocIcon component sizing issue caused by CSS module conversion
  • Installed identity-obj-proxy for Jest CSS module mocking

##How to test:

  1. Check out branch fix/convert-css-to-modules
  2. Run npm install and npm run start:local
  3. Clear site data/cache
  4. Log in as admin (devadmin@hgn.net / DeveloperPassword100%!)
  5. Navigate to Dashboard — verify layout looks correct
  6. Navigate to Reports — verify layout looks correct
  7. Navigate to User Profile — verify styles look correct
  8. Verify dark mode works on all pages

##Screenshots or videos of changes:

##Note:
This PR converts all local CSS files to CSS Modules for scoped styling. Bootstrap utility classes and third-party library CSS imports were intentionally kept as plain imports and were not converted.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 25, 2026

Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit c9a821f
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a18b9f55986f30008ebbe2e
😎 Deploy Preview https://deploy-preview-5194--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
Copy link
Copy Markdown

sonarqubecloud Bot commented May 5, 2026

@sonarqubecloud
Copy link
Copy Markdown

@one-community
Copy link
Copy Markdown
Member

Thank you all, merging!

@one-community one-community merged commit 3a912c7 into development May 28, 2026
10 checks passed
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