Update some of the visuals for the dashboard.

Review Request #9076 — Created July 13, 2017 and submitted — Latest diff uploaded

Information

Review Board
release-3.0.x
5596f29...

Reviewers

A lot of the visuals in the dashboard have been around for a very, very
long time. In particular, the "new updates" and "Ship It" indicators
have been there since Review Board 1.0, and really aren't ideal
representations these days. The "New Updates" used a chat-like icon,
which was fine when it was originally made for indicating new reviews,
but it also indicates review request updates. The checkmarks for Ship It
(used on both the Ship It icons and the "My Comments" icons) don't
really scream "approval" so much as "thing done," which duplicates the
visual language used for fixed issues.

There were also a couple of other things I've been wanting to alter. The
counts on the sidebar were a reddish color, which some have taken as
"something wrong" or "something needing my immediate attention." The "!"
for issues was rendered as text, which differed between browsers/systems
a bit and wasn't the nicest-looking exclamation mark. The text on the
issue and Ship It indicators didn't align. The Ship It indicators also
used background images instead of gradients, which didn't look as nice
when loading the page.

This change fixes all these issues, improving the overall look of the
page and making it a bit more fresh-looking.

  • The colors on the sidebar now have a bluish color, blending in better
    with other aspects of the page.

  • The "New Updates" now uses a blue dot, which is a common visual for
    new things on phones and other webapps.

  • Instead of checkmarks for Ship It, we now have a "thumbs up" visual,
    better indicating approval.

  • The exclamation mark for issues is now an icon, carefully designed to
    stand out clearly on all displays.

  • The column header, column name, and alt text for the Ship It/Open
    Issue column no longer claims to just be about Ship Its, factoring
    issues into the naming and column icon.

  • The icon width/height for the Ship It and Open Issue indicators are
    now the same size, and the text all aligns.

Tested all changes on Retina and non-Retina displays.