Fine-tune our styling, polishing presentation and reducing visual noise.
Review Request #13197 — Created Aug. 10, 2023 and submitted — Latest diff uploaded
Review Board's had the same general look for a long time now, and some
of it hasn't aged particularly well. There's a harshness to many of our
content panes and other parts of the UI, with borders that stand out too
much, colors that are too strong, and UI elements that aren't emphasized
well enough.While we're not about to unveil a major redesign of Review Board, this
change does clean up much of our common presentation in the following
ways:
-
Borders are now more subtle throughout the UI, helping to blend in
better with nearby backgrounds while still providing a visual
separation. This includes content box borders, field borders in the
review request, banner borders, and various separators. -
Shadows are now placed below content, rather than toward the
bottom-right, helping keep a more symmetrical feel to content boxes. -
Status update icons are now larger, with both success and failure
icons being enclosed in a filled circle to make them stand out better.
Colors have been tweaked to fit the general aesthetic. -
Status update section headers are also less harsh, andno longer
rely on the diff color constants. -
Diffs in the diff viewer now have more separation (2x the page
padding). This provides a better visual separation between diffs. -
Colors within diffs have been made softer, more pastel, with blue
section headers instead of brown. This creates an almost "Easter"
feel, which is more pleasant to look at. In particular, insert/delete
lines are also far easier on the eyes, especially when looking at
large blocks of code. -
Headers in diffs showing the nearest function/class to expand to
are now just a little bigger, helping it stand out as a proper header. -
In replace lines, the replaced content is now more of a gold, rather
than a mustard. -
Diff text now has a very slightly larger font size, which is easier on
the eyes on today's modern displays. It's still smaller than GitHub's
text, with a good balance of readability and being able to fit plenty
of content on the screen. -
Comment bubbles are now pill-shaped, rather than slightly-rounded
rectangles. This looks nice and stands out better. Colors have also
been made less harsh.
One thing to note in this change is that there's a lot more hard-coded
colors, rather than reliance on the #rb-ns-ui.colors()
constants. This
is intentional. Many of these parts of the UI never mapped to those
color constants to begin with. We'll also be introducing more general
concepts of palettes and mode-specific styless
(light/dark/high-constrast) in Review Board 7. All color usage we have
today is going to be redone as part of that, and as such, it's not worth
altering the base color palettes to try to match these changes today.
Tested the dashboard, review requests (with all possible types of content),
diffs, My Account page, and the administration pages on Chrome and Firefox,
verifying that presentation looked correct.