Juhitha - Fixed dark mode support for Building Management dashboard pages

[Juhitha-Reddy]

Description

PFixed dark mode support for Building Management dashboard pages where Issues page and Project Dashboard were not properly inheriting dark mode theming when users enabled dark mode. This resulted in inconsistent user experience across the Building Management section.
Fixes critical dark mode functionality bug (priority high) identified in PR #3486 testing.

Related PRS:

This frontend PR addresses issues identified during testing of PR #3486.
Related to: #3486

Main changes explained:

• Update IssueHeader.css for comprehensive Issues page dark mode support
• Update ProjectDetails.css to fix Project Dashboard dark mode theming
• Add dark mode styling for search bars, project tabs, cards, and containers
• Implement CSS classes following project patterns instead of inline styles
• Add proper color contrast and hover states for all interactive elements

How to test:

1. Check into current branch Juhitha-bmdashboard dark mode support
2. Do npm install && npm run start:local to run this PR locally
3. Clear site data/cache
4. Log as admin user
5. Go to Building Management dashboard → Issues (/bmdashboard/issues)
6. Toggle dark mode on/off and verify search bar, project tabs, and dropdown have proper dark styling
7. Navigate to a Project Dashboard (/bmdashboard/projects/:id)
8. Verify background is blue theme (not black) and all cards/containers have proper dark mode styling
9. Verify this feature works in dark mode across both pages

Screenshots or videos of changes:

Screen.Recording.2025-08-09.at.12.25.08.AM.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	e85c5e3
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6896d9063481e80008b0d955
😎 Deploy Preview	https://deploy-preview-3871--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.

[nikitha2n]

Dark mode features work correctly and consistently across both pages with no visual issues.

PR_3871.mp4

[sohailuddinsyed]

All the changes are working as expected.

[Namitha7070]

Both pages are working as expected in dark mode.

Recording.2025-08-11.162556.mp4

[JERRRRY]

The UI and logic look great in dark and light mode.

[beblicarl]

This functionality works as intended and the code is great

https://www.loom.com/share/5aa566a68c614685ad4e8b7127cfb7ae?sid=65ed5992-9704-468c-aa5f-a1c80bafc5af

[SreePujitha01]

I verified the changes on the Building Management dashboard and Project Dashboard. Dark mode styling is applied correctly across both pages. The search bar, project tabs, and dropdown display proper dark mode styling. On the Project Dashboard, the background shows the expected blue theme and all cards/containers are styled appropriately. Everything is working as expected.

[AbhishekSrikanth]

Verified both the listed pages and all the listed components are styled for dark mode. The "Members working on site today" table's styling can be improved later to have white text to improve readability and contrast. Otherwise, working as expected.

PR3871.mp4

[rohanrastogi311]

Hi Juhitha,

Well done with this implementation.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ca49316
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69a49e3fe52e14000838e940
😎 Deploy Preview	https://deploy-preview-3871--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

[one-community]

Thank you all, merging!