Repository navigation
Shubham - Fix calendar icon visibility in Weekly Progress dark mode - #5717
Open
shubhamjakhete wants to merge 1 commit into
Open
shubhamjakhete wants to merge 1 commit into
shubhamjakhete wants to merge 1 commit into
Conversation
The start and end date inputs on the Weekly Progress dashboard showed a dark calendar icon on the dark background, so the date picker was hard to find in dark mode. Set color-scheme: dark on these inputs when body.dark-mode is active, so the browser renders the calendar icon and the picker popup in its dark variant. Light mode is unchanged. Re-add the /weeklyprogress route, which had been removed from the development branch, so the dashboard can be opened and tested. It uses the same path and permission as the original route. Also apply stylelint auto-fixes to existing rules in this file (modern rgb() and media range notation, blank lines). They are required by the pre-commit hook and do not change how the page looks.
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
This branch has not been deployed
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
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 (PRIORITY HIGH) Phase 2 Summary Dashboard: Fix the calender icon issue in Dark Mode.
On the Weekly Progress dashboard (
/weeklyprogress), the calendar icons inside the Start date and End date inputs were rendered dark on the dark background when dark mode was on. This made the date picker icons almost invisible, so it was not obvious that the fields open a calendar.Root cause
The date fields are native
<input type="date">elements. The calendar icon is drawn by the browser, not by our CSS, and the browser picks a light or dark icon based on the element'scolor-scheme. The inputs had nocolor-schemeset, so the browser always used the default (light) style, which has a dark icon, even when the page was in dark mode.Related PRS (if any):
None. This is a frontend-only change; no backend changes are needed.
Main changes explained:
src/components/WeeklyProgress/WeeklyProgress.module.csscolor-scheme: darkto the date inputs whenbody.dark-modeis active. This tells the browser to draw the native date control in its dark style, so the calendar icon becomes light and the date picker popup also opens with a dark background.cursor: pointerto the calendar icon in dark mode.body.dark-modeis present.color-scheme: dark, withoutfilter: invert()on::-webkit-calendar-picker-indicator. Some other components combine both, but together they cancel each other out and turn the icon dark again.src/routes.jsx/weeklyprogressroute and theWeeklyProgressDashboardimport. The route had been removed fromdevelopment, so the page could not be opened to test or use the fix. It uses the same path and permission (weeklySummariesReport) as the original route.WeeklyProgress.module.cssstylelint --fix:rgba(r, g, b, a)changed torgb(r g b / a%),(min-width: 900px)changed to(width >= 900px), and some blank lines were adjusted. These are notation changes only and do not change how the page looks.How to test:
git checkout shubham-fix-weekly-progress-calendar-dark-modenpm install, thennpm run start:localhttp://localhost:5173/weeklyprogressScreenshots or videos of changes:
Note:
/weeklyprogressroute is re-added in this PR because the page was not reachable ondevelopmentwithout it. If the route was removed on purpose, please let me know and I will take that part out of the PR.routes.jsx. No other pages are affected.