Skip to content

Sayali : convert CSS files to CSS modules#5194

Open
sayali-2308 wants to merge 7 commits intodevelopmentfrom
fix/css-modules-v2
Open

Sayali : convert CSS files to CSS modules#5194
sayali-2308 wants to merge 7 commits intodevelopmentfrom
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 afcc053
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69ec459d34d59b00086de44c
😎 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.

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

@sonarqubecloud
Copy link
Copy Markdown

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.

1 participant