• 
      

    Fine-tune our styling, polishing presentation and reducing visual noise.

    Review Request #13197 — Created Aug. 9, 2023 and submitted — Latest diff uploaded

    Information

    Review Board
    release-6.x

    Reviewers

    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.


    Commits

    Files