Skip to content

Amaresh - Team Member Tasks: Fix dark mode dropdown contrast - #5379

Open
amaresh2001 wants to merge 1 commit into
developmentfrom
amaresh/timeoff-review-dropdown-dark-mode
Open

Amaresh - Team Member Tasks: Fix dark mode dropdown contrast#5379
amaresh2001 wants to merge 1 commit into
developmentfrom
amaresh/timeoff-review-dropdown-dark-mode

Conversation

@amaresh2001

Copy link
Copy Markdown

Description

When a team member has scheduled time off, their row in the Team Member Tasks widget (Dashboard) shows a "[Name] Is Not Available this Week" overlay. In dark mode, the "Ready for Review" dropdown menu (View Link / Edit Link / mark complete / more work needed) rendered with near-white text on a near-white background, making it unreadable. This was one of two issues flagged; PR #5317 (sphurthy-timeoff-hotfix) addressed the functional click-through issue but did not fix this contrast bug.

https://www.loom.com/share/86f58e5b27a3496e998d82ed9f2b89e7

Related PRs (if any):

This is a follow-up to #5317, which fixed the dropdown's disabled/click-through behavior but left the dark mode contrast issue unresolved.

Main changes explained:

  • Update reviewButton.module.css: added the .dark-mode-btn class (dark navy background #1c2541, light text, with hover/focus states), which was previously referenced in ReviewButton.jsx but never defined, so it silently did nothing. Also added .review-button-dropdown-dark for the dropdown menu container's background.
  • Update ReviewButton.jsx: both DropdownMenu instances (own-task view and reviewer view) now conditionally apply the new dark background class when darkMode is true; all 6 DropdownItem elements now conditionally apply text-light + dark-mode-btn together only in dark mode (previously the CSS-module class was applied unconditionally regardless of mode, which was harmless only because it didn't exist).

How to test:

  1. Checkout branch amaresh/timeoff-review-dropdown-dark-mode
  2. npm install and run the app locally
  3. Clear site data/cache
  4. Log in as an Admin user
  5. Go to Dashboard → Team Member Tasks widget → find a user with an active time-off request and a task with reviewStatus: "Submitted"
  6. Click "Ready for Review" to open the dropdown and verify all items (View Link, Edit Link, complete, more work needed) are clickable
  7. Toggle dark mode and verify the dropdown text is clearly readable (light text on dark navy background), then toggle back to light mode and confirm it still renders as plain white/normal, no dark strips or leftover dark styling

Screenshots or videos of changes:

Screenshot 2026-07-09 at 12 37 53 PM Screenshot 2026-07-09 at 12 38 05 PM Screenshot 2026-07-09 at 12 38 24 PM Screenshot 2026-07-09 at 12 39 15 PM Screenshot 2026-07-09 at 12 39 30 PM

Note:

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Development

Successfully merging this pull request may close these issues.