Skip to content

Fix remove button color on scoped labels in dark mode

Chad Lavimoniere requested to merge 428092-scoped-labels-dark-mode-x into master

What does this MR do and why?

Currently, the remove buttons on scoped labels that have a dark label color will use the label color. This behavior was designed for light mode, but in dark mode this often means that the remove button on the scoped label has an insufficient contrast against the dark background color of the page. This MR changes the style for remove buttons on scoped labels in dark mode, so that they all use the same light color.

Note that this MR does not address all problems indicated in the related issue, only the contrast issue for scoped label remove buttons.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-10-12_at_19.14.17 Screenshot_2023-10-12_at_19.14.42

How to set up and validate locally

  1. in the gdk on master branch, navigate to an issue with scoped labels that have a dark label color (if none are available, create some)
  2. you will observe that the "x" button to remove those labels is the same color as the label color, and does not have an accessible contrast on the dark background color of the page
  3. in the terminal, navigate to the gitlab directory and check out this branch. If necessary, refresh the page in the browser to see changes
  4. you will see that all the scoped labels have a "x" remove button that is the same light color regardless of the label color.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #428092

Edited by Chad Lavimoniere

Merge request reports