Aditya-fix: dark mode styling issues in UtilizationChart component #4724
Conversation
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
- Update UtilizationChart.jsx: Register ChartDataLabels plugin, adjust data label colors to respect dark mode - Update UtilizationChart.module.css: Add dark mode support for datepicker placeholder and dropdown, update button colors to black/white theme, add react-datepicker dark mode styling with modern CSS color notation - Update .stylelintrc: Add stylelint-config-standard extension, configure selector-pseudo-class-no-unknown rule to ignore :global and :local pseudo-classes, disable selector-class-pattern to support CSS module camelCase naming - Update .gitignore: Add .vscode/settings.json to ignore list
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
This PR fixes dark mode styling issues in the UtilizationChart component of the Building Management Dashboard. The changes ensure proper visual consistency when dark mode is enabled, including chart data label colors, date picker styling, button theming, and React DatePicker dropdown calendar appearance. Additionally, this PR updates the stylelint configuration to support modern CSS standards and CSS module naming conventions.
Related PRs (if any):
Main changes explained:
Updated Files:
src/components/BMDashboard/UtilizationChart/UtilizationChart.jsx (+3/-3 lines)
ChartDataLabelsimport and registration with ChartJS to enable data labels on the utilization chart barsdatalabels.colorconfiguration to dynamically switch between#ffffff(white) and#333(dark gray) based on dark mode stateweight: 'bold'from data label font configuration for cleaner appearancedarkModestate selector for consistent themingsrc/components/BMDashboard/UtilizationChart/UtilizationChart.module.css (+42/-13 lines)
rgba()and hex color codes to modern CSS format:rgba(0, 0, 0, 0.1)torgb(0 0 0 / 10%)#ffffff→#fff,#000000→#000,#333333→#333#a0e7e5/#72d6d3) to black/white (#000/#fff) for better contrast.datepickerWrapper::placeholderwith#999color for light mode and#ffffor dark mode:global()selectors:.react-datepicker: Dark background (#333), light text (#e0e0e0), subtle border (#555).react-datepicker__header: Darker header background (#444) with border separation.react-datepicker__current-month,.react-datepicker__day-name,.react-datepicker__day: Consistent light text color.react-datepicker__day:hover: Hover state with#555background.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range: Selected states with brand yellow (#e8a71c) background and black textKey Implementation Details:
.module.css) with camelCase class names, which is why the stylelint configuration needed to be updated to disable theselector-class-patternrulestate.theme.darkMode) and applied conditionally using CSS class composition:${styles.utilizationChartContainer} ${darkMode ? styles.darkMode : ''}chartjs-plugin-datalabelsplugin displays downtime hours on each bar in the horizontal bar chart. The plugin must be registered globally with ChartJS before use:global()pseudo-class selectors to style it from within the scoped CSS module#1b2a41#e8a71c(yellow)#fff#3a506b#4a5a77,#555How to test:
fix/utilization-chart-darkmode-issuesrm -rf node_modules && yarn cache cleanyarn installand start the app:yarn start:local#333)#999)#1b2a41#fff)#e8a71c).Screenshots or videos of changes:
TestVideo.mov
Note:
.stylelintrcnow supports modern CSS color notation and CSS module naming conventions project-wide. This may affect other CSS files in future linting runs, but all existing files should pass with the new configuration.vscode/settings.jsonis now ignored to prevent developer-specific settings from being committed