Unify dividing line color in commit info-well
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 thediv
s inside the.info-well
so that they would have the same border as the other.well-segment
s?
We could
... then we'd have a matching border, but only one row for both branches and tags:
So we'd need two well-segment
s, 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-segment
s are in two nested groups:
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 |
---|---|
![]() |
![]() |
Why replace
gl-border-b
withgl-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
How to set up and validate locally
git checkout master
- make a commit and navigate to it in the UI
- 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
git checkout mfluharty-even-out-commit-refs-lines
- the lines dividing each section of the commit information should be consistent