Skip to content

Customize job-log-top-bar box-shadow for dark mode

Miranda Fluharty requested to merge remove-job-log-top-bar-extra-top-edge into master

What does this MR do and why?

There's a var(--white) box-shadow on the top bar of the job log, but because var(--white) is defined as #333238 in dark mode it shows as an extra rounded border line above it on a #1f1e24 background. This MR customizes the box-shadow in dark mode so that it matches the background color of the page.

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

Before (200% zoom) After (200% zoom)
light mode looks fine, dark mode shows an extra shadow above the top bar light mode should look the same as before, dark mode should have no extra shadow (and no dark job log background should be seen behind the rounded corner when scrolling down)
Screenshot_2024-04-02_at_19.42.06 Screen_Recording_2024-04-19_at_18.29.10 Screen_Recording_2024-04-19_at_18.28.28

How to set up and validate locally

  1. switch to dark mode
  2. navigate to a job log
  3. zoom in and check the top border of the job log's top bar
  4. make sure that the dark background of the job log doesn't poke out behind the rounded corners once you scroll down
Edited by Miranda Fluharty

Merge request reports