Skip to content

Unify dividing line color in commit info-well

Miranda Fluharty requested to merge mfluharty-even-out-commit-refs-lines into master

What does this MR do and why?

Unify dividing line color in commit info-well

The lines that divide the sections of the info-well that holds the details about a commit did not match each other.
This makes them all 1px solid $well-inner-border

Why do it this way?

You may ask:

Why not just apply .well-segment to the divs inside the .info-well so that they would have the same border as the other .well-segments?

We could

  • add well-segment to this div, and
  • remove the classes that mimic it from this div

... then we'd have a matching border, but only one row for both branches and tags:

Screenshot_2024-01-11_at_19.01.30

So we'd need two well-segments, but then we'd need a container div around them because every component must have a single root element (which is not true in Vue 3 but we haven't made it to Vue 3 yet), but then the styling that applies the bottom border to every well-segment except for the last one in the group breaks because the well-segments are in two nested groups:

Screenshot_2024-01-11_at_19.11.35


Why not adjust the gl-border-* class to match the existing border?

The bottom border of the well-segment is defined as $well-inner-border: #eef0f2 in variables.scss for light mode and overridden as $gray-200 in _dark.scss for dark mode.

We could use gl-border-gray-200 instead of gl-border-gray-50 to fix this in dark mode, but that would break it in light mode because #eef0f2 is not equivalent to $gray-200 in light mode:

dark light
Screenshot_2024-01-11_at_19.21.20 Screenshot_2024-01-11_at_19.23.00

Why replace gl-border-b with gl-border-b-solid gl-border-b-1?

gl-border-b also sets a border color, which turns out to be #dcdcde in light mode and #434248 in dark mode, neither of which are what we want. If we separately set the bottom border style to solid with gl-border-b-solid and the border width to 1 with gl-border-b-1, then it will keep the border-color we set in the stylesheet to match the other border colors.

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

Scenario Before After
dark mode some lines are #535158 ($well-inner-border), others are #333238 (gl-border-gray-50) all lines should be #535158 ($well-inner-border)
dark mode, just branches Screenshot_2024-01-11_at_18.20.33 Screenshot_2024-01-11_at_18.20.13
dark mode, branches and tags Screenshot_2024-01-11_at_18.20.29 Screenshot_2024-01-11_at_18.20.09
light mode some lines are #eef0f2 ($well-inner-border), others are #ececef (gl-border-gray-50) all lines should be #eef0f2 ($well-inner-border)
light mode, just branches Screenshot_2024-01-11_at_18.21.02 Screenshot_2024-01-11_at_18.20.00
light mode, branches and tags Screenshot_2024-01-11_at_18.20.59 Screenshot_2024-01-11_at_18.19.44

How to set up and validate locally

  1. git checkout master
  2. make a commit and navigate to it in the UI
  3. observe the difference in dividing lines in the info box - the line below the commit's parent is more prominent than the line below the commit's related branches - the difference is more noticeable in dark mode
  4. git checkout mfluharty-even-out-commit-refs-lines
  5. the lines dividing each section of the commit information should be consistent
Edited by Miranda Fluharty

Merge request reports