Aditya-Fix dark mode text visibility in Weekly Project Summary dashboard charts#4620
Open
Aditya-gam wants to merge 15 commits intodevelopmentfrom
Open
Aditya-Fix dark mode text visibility in Weekly Project Summary dashboard charts#4620Aditya-gam wants to merge 15 commits intodevelopmentfrom
Aditya-gam wants to merge 15 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.
|
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
1 participant
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