Aditya-Fix dark mode text visibility in Weekly Project Summary dashboard charts#4620
Open
Aditya-gam wants to merge 23 commits intodevelopmentfrom
Open
Aditya-Fix dark mode text visibility in Weekly Project Summary dashboard charts#4620Aditya-gam wants to merge 23 commits intodevelopmentfrom
Aditya-gam wants to merge 23 commits intodevelopmentfrom
Conversation
- Update filter dropdowns to use #2b3344 background and #fff text in dark mode - Change chart container background from #1e1e1e to #253342 in dark mode - Set axes labels to #fff in dark mode for better visibility - Refactor nested ternary operations for improved code readability - Add high-specificity CSS selectors to prevent style overrides
- Update container background from #121212 to #253342 in dark mode - Change chart background to #253342 in dark mode - Set axes labels to #fff for better visibility - Update filter dropdowns and date pickers to use #2b3344 background and #fff text - Add high-specificity CSS selectors to prevent style overrides - Refactor nested ternary operations for improved code readability
…lters - Set date range filter placeholder text color to #fff in dark mode - Add high-specificity CSS selectors to prevent style overrides - Target both direct className and react-datepicker wrapper structures
- Add dark mode styles for select and date input filters with #2b3344 background and #fff text - Use high-specificity CSS selectors to prevent style overrides from global styles - Add white dropdown arrow for select elements in dark mode - Create CSS module to replace inline styles for better maintainability
- Replace native HTML5 date inputs with react-datepicker components - Update date state from strings to Date objects - Remove native date input CSS and add react-datepicker styles - Add dark mode styles for date picker inputs and calendar popup - Follow pattern from InjuryCategoryBarChart for consistency
…tionLaborHours Replace native HTML date inputs with react-datepicker components to properly support dark mode styling. Add high-specificity CSS selectors for datepicker inputs with #2b3344 background and #fff text color in dark mode, following the pattern used in InjuryCategoryBarChart.
…y Availability chart - Replace native HTML date inputs with react-datepicker components - Add dark and light mode styling for datepickers matching reference implementation - Restructure filters into 2x2 grid layout for improved visual organization - Update date state management to use Date objects instead of strings
Update button colors from black to light gray shades for better visual consistency. Hover state uses darker gray for improved feedback.
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Update CustomTooltip component to accept darkMode prop and apply conditional styling for better contrast and readability in dark mode.
Extract common chart styling and utility functions into a centralized module to eliminate code duplication across BMDashboard chart components. This addresses SonarQube duplication violations where the codebase exceeded the 3% duplication threshold at 15.4%. Created src/utils/bmdashboard/chartUtils.js with shared utilities: - toYMD(): Date formatting function for YYYY-MM-DD conversion - getSelectStyles(): React-select styling configuration for dark/light modes - getDatePickerStyles(): Inline styles for react-datepicker components - getChartAxisProps(): Common Recharts axis styling props Refactored the following components to use shared utilities: - openIssueCharts.jsx: Removed ~100 lines of duplicated select styles - ProjectRiskProfileOverview.jsx: Removed ~100 lines of duplicated select styles - InjuryCategoryBarChart.jsx: Removed ~100 lines of duplicated code - ToolsHorizontalBarChart.jsx: Removed ~60 lines of duplicated code Total reduction: ~360+ lines of duplicated code eliminated while maintaining existing functionality and visual appearance. All components now share consistent styling logic, making future maintenance easier.
|
…resolve conflicts Resolved conflicts in: - issueChart.module.css (syntax + @media fix) - openIssueCharts.jsx - DistributionLaborHours.jsx & .module.css - InjuryCategoryBarChart.jsx & .module.css - ProjectRiskProfileOverview.jsx & .module.css - ToolsAvailabilityPage.jsx & .module.css - ToolsHorizontalBarChart.module.css - WeeklyProjectSummary.jsx Fix: remove duplicate .weeklyStatusChange selector in WeeklyProjectSummary.module.css (stylelint no-duplicate-selectors). Co-authored-by: Cursor <cursoragent@cursor.com>
rohanrastogi311
suggested changes
Feb 21, 2026
rohanrastogi311
left a comment
rohanrastogi311
left a comment
There was a problem hiding this comment.
Hi Aditya,
Well done with this implementation, however, small issue with the drop boxes on"Labor and Time tracking".
HemanthNidamanuru
requested changes
Feb 23, 2026
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Aditya,
Nice work on this implementation overall. I noticed that in the “Labor and Time Tracking” section, the dropdown boxes are not properly aligned with the background. Also, in the “Lessons Learned” tab, the selected fields are not clearly visible. Could you please review the styling and rendering in both sections?
Anusha-Gali
suggested changes
Feb 24, 2026
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Aditya,
I have reviewed your PR locally and though most of the chart are adapted to dark mode. The Labor and Time Tracking start and end date as well as the Lesson Learned dropdown selection is not adapted to dark mode.
… hours Apply darkMode class to container and remove inline styles from date pickers so existing module CSS controls appearance. Made-with: Cursor
Style multi-value chips, placeholder, and input in dark mode for visibility. Made-with: Cursor
… files - MostFrequentKeywords.module.css: dev uses classNamePrefix=data-select so dev CSS targeting data-select__* is required; our project-select__* rules would be dead code - ProjectRiskProfileOverview.jsx: dev version is superset — adds click-outside detection, CSS module adoption, chart tooltip theming, removes console.log - ProjectRiskProfileOverview.module.css: dev JSX references new class names (.chartCard, .filterContainer, .formGroup, .dropdownMenu); our old names (.wrapper, .container, .filterRow) are no longer used - SupplierPerformanceGraph.jsx: dev adds darkMode Redux, chartTheme object, CustomTooltip outside component, proper Y-domain, removes console.logs - WeeklyProjectSummary.module.css: dev JSX (auto-resolved) references layout classes only present in dev CSS (.toolsTrackingLayout, .lessonsLearnedGrid, .financialsGrid, etc.); required for page layout correctness
The development version of SupplierPerformanceGraph.jsx imports this CSS module but the file was not present on this branch, causing the build to fail. Taken directly from development branch (no changes on this branch).
…lution - MostFrequentKeywords.jsx: fix classNamePrefix mismatch — CSS module targets data-select__* classes (dev version) but JSX still generated project-select__* classes, making all react-select dark mode CSS dead code. Changed classNamePrefix from 'project-select' to 'data-select'. - WeeklyProjectSummary.module.css: re-add .weeklyStatusChange class that was present in branch's CSS but missing from the development version we took during conflict resolution. WeeklyProjectSummary.jsx uses styles.weeklyStatusChange, which requires the camelCase class to exist. Uses --wow-color CSS variable (already set via inline style on the card) to apply the correct color for positive/negative/neutral change indicators.
.darkMode .statusCard had background: var(--card-bg) !important which
overrode the inline style={{ backgroundColor: cardBg }} set in JSX.
Since CSS !important beats inline styles, all cards were rendered with
the same flat #2b3e59 background, losing the accent-tinted colors
computed by darkTintedCardBg().
Removed only the background override — color and border-color rules
remain to ensure text and borders are correctly themed.
Contributor
Author
|
Hi guys, 
|
|
rohanrastogi311
suggested changes
Apr 16, 2026
rohanrastogi311
left a comment
rohanrastogi311
left a comment
There was a problem hiding this comment.
Hi Aditya,
Good fix, paid labor cost now has white boxes in dark mode.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Fixes dark mode text visibility issues across multiple charts in the Weekly Project Summary dashboard by replacing native HTML date inputs with
react-datepickercomponents and implementing consistent dark mode styling.Related PRs (if any):
Main changes explained:
Key Changes:
<input type="date">withreact-datepickerfor better dark mode stylingToolsAvailabilityPage.jsx,DistributionLaborHours.jsx,ExpenseBarChart.jsx,ToolsHorizontalBarChart.jsx#2b3344backgrounds,#ffftext,#253342chart containersHow to test:
Aditya-fix/dark-mode-text-visibility-pr3882rm -rf node_modules && yarn cache cleanyarn installand start the app:yarn start:local#253342), filter stylingVerify: All text is readable in both modes, date pickers function correctly, no console errors, consistent styling across components.
Screenshots or videos of changes:
TestVideo.mov
Note:
react-datepicker.PaidLaborCostchart are fixed in PR #4496