Fine-tune our styling, polishing presentation and reducing visual noise.
Review Request #13197 — Created Aug. 9, 2023 and submitted
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.
Summary | ID |
---|---|
6ddf7975e08a4beb27a16bf2019d4e00df1b8c61 |
Description | From | Last Updated |
---|---|---|
I don't love the beige/yellow here, it looks too similar to the yellow that appears in diffs. I prefer the … |
maubin | |
Since we're touching these, can we get these moved over to colors.less with named definitions? Same for the other explicit … |
david | |
Looks like there's an extra blank line here? |
david |
- Change Summary:
-
- Reverted diff file headers back to a grey, but made it slightly darker to better stand out from the background.
- Increased the font size slightly of diff class/function headers.
- Removed a double border when the whitespace-only file indicator is shown before a diff header.
- Description:
-
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) and their headers are now using review request box colors.
This provides a better visual separation between diffs.
~ -
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.
~ -
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.
~ -
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. Thisis 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. -
- Commits:
-
Summary ID 555db8c0611b1695923f38ec22e1c61e001668b0 140c694258c62f231048ce192b7057ee303259d9 - Diff:
-
Revision 2 (+332 -206)
- Added Files:
Checks run (2 succeeded)
- Change Summary:
-
Fixed font consistency issues in the diff header between Chrome and Firefox.
- Commits:
-
Summary ID 140c694258c62f231048ce192b7057ee303259d9 fb10dbf5c0824e5291df4ec379ae45adf3560401 - Diff:
-
Revision 3 (+334 -208)
Checks run (2 succeeded)
- Change Summary:
-
- Updated to use more of the color constants.
- Removed an unwanted blank line.
- Commits:
-
Summary ID fb10dbf5c0824e5291df4ec379ae45adf3560401 debeb82471064d1df7a684c0d576283d47fbb99c - Diff:
-
Revision 4 (+352 -240)
Checks run (2 succeeded)
- Change Summary:
-
Removed an unwanted blank line.
- Commits:
-
Summary ID debeb82471064d1df7a684c0d576283d47fbb99c 6ddf7975e08a4beb27a16bf2019d4e00df1b8c61 - Diff:
-
Revision 5 (+352 -242)