Skip to content

Fix Activity style when it appears in dark mode modal

What does this MR do and why?

The styles used for timeline entries as they appear in work item modals and outside those modals are identical, but they assume a specific background color. The modal has a slightly lighter background color than the regular page in dark mode, which happens to be the same color used in dark mode for the line connecting timeline entries and the border around the dot for each timeline entry. And due to a particularity in how the timeline is constructed, the last item in the timeline actually has a line applied to it that is the same color as the (usual) page background to cover over the grey line that connects the rest of the timeline items.

This means that in a modal when you're using dark mode, the line connecting activity notes seems to disappear along with the borders around the dots, and a dark grey line seems to appear beneath the last note's dot!

This MR adds some styles specific to timeline entries that appear within a modal in dark mode, in order to address this.

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

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

Place where notes appear Before After Note
Issuable body or work item when viewed as full page Screenshot_2024-01-29_at_16.17.37 Screenshot_2024-01-29_at_16.17.37 (No change)
Work item when open in a modal Capture-2024-01-29-163329 Capture-2024-01-29-164833

How to set up and validate locally

  1. Check out this branch locally
  2. If not already using dark mode, turn on dark mode in your user preferences on the GDK
  3. Navigate to an issue that contains tasks
  4. Confirm that the Activity timeline on the issue looks correct
  5. Open a task in a modal
  6. Confirm that the activity timeline on the task open in the modal in dark mode looks correct

Related to #436090 (closed)

Edited by Chad Lavimoniere

Merge request reports