Abhishek_fix: add missing dark mode styles for pie chart legend table text

[Abhi-R0211]

Related PRs:

• siva : fix pie chart color issue #4283 — pie chart color determinism fix
• Sayali: dark mode background for Reports People page #5015 — Reports People dark mode background fix

Main changes explained

The "Tasks With Completed Hours" table (Dashboard → Reports → People → select person) references a pie-chart-legend-table-dark CSS class in PieChart.jsx for dark mode styling, but this class was never actually defined in PieChart.module.css — only referenced once inside an unrelated hover selector. As a result, task name and hours text in the table body had no explicit dark-mode color and inherited a hardcoded semi-transparent black (rgb(0 0% 50%)) from a parent wrapper, rendering nearly invisible against the dark background.

Added the missing .pie-chart-legend-table-dark styles (header background, header text color, cell text color) in PieChart.module.css. Light mode styling and all other functionality are untouched — this component (src/components/common/PieChart) is only used by the People report, so the change has no impact on other pages.

Files changed:

• src/components/common/PieChart/PieChart.module.css

How to test

1. Check out branch Abhishek_Fix_PeopleTasksPieChart_DarkMode
2. Run:

   yarn install
   yarn start:local

3. Start the backend on development
4. Clear cache, log in as admin
5. Navigate: Dashboard → Reports dropdown → Reports → People
6. Select a person with multiple completed tasks (e.g. one with several rows in "Tasks With Completed Hours")
7. Toggle dark mode on
8. Verify: In the "Tasks With Completed Hours" section, all table text (Task Name, Hours) is clearly legible — white/light text against the dark background, with a dark header row background
9. Toggle dark mode off
10. Verify: Light mode table appearance is unchanged (white header background, gray body text)

Screenshots or videos of changes

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	179b1e9
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a481ea71ae04700083eec73
😎 Deploy Preview	https://deploy-preview-5366--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.

[Abhi-R0211]

Hi @one-community, opened this PR to address the dark mode text contrast issue on the People Report "Tasks With Completed Hours" table (flagged in the Reports UI issues task, related to #4283 and #5015). Could you assign a reviewer or take a look when you get a chance? Let me know if any additional context is needed.

[kzou55]

Hi Abhishek,

I ran and tested the PR locally

Verified

• Can toggle to Dark Mode

• The component contains the header title(Tasks With Completed Hours, the pie chart, and the associated information related to the pie chart)

  

• Light Mode is unchanged when I toggle Dark Mode off

  

-- Issues

1. The section title "Tasks With Completed Hours" text has poor contrast in Dark Mode

   

2. There's a background color different from the Task With Completed Hours section background color. Is this intended?

   

[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

[Abhi-R0211]

Hi @kzou55, thank you for the review!

To clarify scope: this PR was originally opened to fix a dark mode text contrast issue specifically in the "Tasks With Completed Hours" table (task name and hours text were unreadable against the dark background due to a missing CSS class). That's the fix described in the PR description and covered by the listed test steps.

The header contrast issue you flagged on "Time Logged to Projects/Non-tasks" is technically a separate element outside that original scope, but since it's the same root cause (a missing dark mode text color rule) in the same component, I've gone ahead and included the fix here rather than opening a new task for it.

Issues addressed:

1. Section title contrast ("Tasks With Completed Hours" / "Time Logged to Projects/Non-tasks") — Fixed. Both headers were missing an explicit dark mode text color and were inheriting a low-contrast inherited color. Added a .text-light override so both render in light text against the dark background.

2. Background color difference between the two sections — This is intentional, not a bug. Both sections use the same shared ReportPage.ReportBlock component. In dark mode, the outer wrapper is transparent (showing the page background, #0b1d3a) while the inner content has its own background (#1a2639) with a 2px margin gap between them. This creates a subtle frame/border effect around each card without using an actual border property. This design was introduced in Sayali: dark mode background for Reports People page #5015 and applies uniformly to every ReportBlock on the page, so both sections are styled identically by design.

Please re-review when you get a chance. Let me know if anything else needs attention!

[HemanthNidamanuru]

Hi Abhishek,

I tested this PR locally.

The table text in the “Tasks With Completed Hours” section is clearly visible in dark mode, and light mode is unchanged.

Everything is working fine.

[DeepighaJ]

Hi Tested the PR locally and the pie chart loads well and dark mode is perfect. However i noticed the "Hours Logged This Week" metric displays NaN instead of a valid numeric value. The application should display the correct hours or a fallback value (such as 0 or N/A) when no data is available.