Sphurthy-added dark mode

[sphurthy]

Description

Related PRS (if any):

None

Main changes explained:

• No files deleted or created — this PR only adds dark-mode styling to existing BMDashboard Phase 2 pages (43 files touched, all under src/components/BMDashboard/ plus one root fix).
• Fix src/App.module.css to make the intended dark #root/body background actually apply (it was a CSS-module that hashed body.dark-mode #root, leaving a white gutter behind every page) — wrapped in :global().
• Update list/table pages (ItemListView, Equipment/List, ToolItemListView) to give table cells light text in dark mode by overriding Bootstrap's --bs-table-color (cells were dark-on-dark).
• Update form pages (purchase/add/update for materials, reusables, tools, consumables, equipment; AddTeamMember, AddTool, EquipmentUpdateForm) with dark backgrounds, readable labels, dark inputs, and dark react-select dropdowns.
• Update detail/misc pages (EquipmentDetail, ToolDetailPage, Issue, BMTimeLogger/BMTimeLogCard, LessonCard) for dark surfaces + readable text.
• Update modals (RecordsModal, ToolRecordsModal, EquipmentListModal, BMError) — neutralized a global filter: invert(1) that flipped white modal titles to black, and gave modal tables light cell text.

How to test:

1. Check out this branch.
2. Run npm install and npm start to run locally.
3. Clear site data/cache.
4. Log in as an admin user with BM Portal access.
5. Toggle dark mode on (header dark-mode button).
6. Visit each Phase 2 page under /bmdashboard/... (materials, consumables, reusables, equipment, tools, inventorytypes, the add/purchase/update forms, equipment & tool detail, lessonlist, lessonform, timelog, AddTeamMember).
7. On the list pages (materials/tools/equipment), click View / Updates / Purchases and View Update History to open the modals.
8. Verify everything is readable: no white background outside the page, no dark-on-dark or black-on-dark text, modal titles/tables/dropdowns all legible.
9. Toggle back to light mode and confirm nothing regressed.
10. Confirm it follows the dark mode guidelines.

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	c03f83b
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a43244e6862350008a3a6ff
😎 Deploy Preview	https://deploy-preview-5357--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle 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.

[beblicarl]

This UI looks as intended and the code is great

[DeepighaJ]

• UsageRecord Record popup doesn't show any content and the alignment of Usage record, updates and purchases need improvement as it looks compressed. View Update history is not clickable. Please scroll down and look for other comments along with screenshots.

- Text contrast improvement needed in purchase request submission popup. - Project dropdown background is white in dark mode, and on hover highlight is contrast need improvement. -Image uploaded shows enlarged

[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

[DeepighaJ]

• Tested the PR locally.
• The Usage Record issue is fixed, it displays the content now.
• The hover issue is fixed in material/update.
• The image upload issue is fixed in material/add.
  Issue:
• The Request Submitted successfully title color can be improved since its in black its blending with grey background in dark mode.
• The View Update, Add material, View Update history buttons under /bmdashboard/materials are still not clickable. Is it future scope?
• The update, usage, purchase view icons alignment still exist. Is it covered under this scope?

[kzou55]

Hi Sphurthy,

I ran and tested the PR locally.

Verified the following pages are fine

• bmdashboard/materials/purchase

  

• bmdashboard/materials/add page

  

• bmdashboard/reusables/purchase

  

• bmdashboard/tools

  

• bmdashboard/tools/purchase

  

• bmdashboard/tools/add

  

• bmdashboard/tools/log

  

• bmdashboard/tools/equpimentupdate

  

• bmdashboard/lessonlist
  

• bmdashboard/equipment
  

• bmdashboard/equipment/id/update
  

• bmdashboard/addteammember
  

Issues/Concerns

1. /bmdashboard has a random layer above the section

2. The Date picker component has overlapping issues and not fully in dark mode in these pages materials, reusables, consumables, issue

   

3. The update form/popup Title needs better contrast

   

4. Many of the /Update pages like in /materials, /reusables have issues

   

• Datepicker icon could have better contrast. And the datepicker dropdown isn't in Dark Mode

  

• Project filter isn't in Dark Mode. And it's dropdown has poor contrast.

  

• Hovering over the row data has poor contrast

  

5. bmdashboard/projects/:projectid` - Member working today section not in dark mode
   

6. bmdashboard/eequipment/:equipmentID - page not fully in dark mode
   

• bmdashboard/consumables/purchase - Consumable dropdown isn't in dark mode
  

7. Some buttons were not responsive but given this is just a dark mode PR, I'm assuming those issues are out of scope. Let me know if that's correct. Ex. Add Material, Edit Name/Measurement, View Update History"