Skip to content

Fix dark mode search token colors

What does this MR do and why?

Fixes dark mode search token colors (redo of !150693 (merged))

Note that the first commit in this MR is actually from !151617 (merged) (this branch is based off that branch). Once !151617 (merged) merges, this MR will only have a single commit/change.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Issue search (uses Vue)

Scenario Before After Prod light mode (for reference)
search token at rest

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>issues__sort=created_date&state=opened&assignee_username%5B%5D=root&first_page_size=20 (0).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>issues__sort_created_date_state_opened_assignee_username_5B_5D_root_first_page_size_20

search token being hovered

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>issues__sort=created_date&state=opened&assignee_username%5B%5D=root&first_page_size=20 (1).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>issues__sort=created_date&state=opened&assignee_username%5B%5D=root&first_page_size=20 (1).png

search dropdown with one item active

Screenshot 2024-04-24 at 10.51.46 (2).png

Screenshot 2024-04-24 at 10.46.36 (2).png

search dropdown with one item hovered

(note: "Confidential" is being hovered in all three screenshots)

Screenshot 2024-04-24 at 10.51.52 (2).png

Screenshot 2024-04-24 at 10.46.40 (2).png

search dropdown with active item hovered

(note: "Assignee" is active and being hovered in all three screenshots)

Screenshot 2024-04-24 at 10.51.55 (2).png

Screenshot 2024-04-24 at 10.46.43 (2).png

MR search (uses haml)

Scenario Before After Prod light mode (for reference)
search token at rest

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root.png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root.png

search token being hovered

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (1).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (1).png

search dropdown with one item active

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (2).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (2).png

search dropdown with one item hovered

(note that active and hover colors are identical in Before)

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (3).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (3).png

search dropdown with active item hovered

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (4).png

gdk.test_3000_flightjs_Flight<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>-<span data-escaped-char><span data-escaped-char><span data-escaped-char>_</span></span></span>merge_requests_scope=all&state=opened&assignee_username=root (4).png

How to set up and validate locally

  1. Check out this branch locally
  2. Ensure your GDK user is using dark mode
  3. Visit an Issues list page and search
  4. follow each of the scenarios for an issues search above
  5. Visit an MR list page and search
  6. follow each of the scenarios for an MR search above

Related to #451018 (closed), #444717 (closed)

Edited by Chad Lavimoniere

Merge request reports