Redesign the look and feel of the dashboard and other datagrids.

Review Request #7216 — Created April 17, 2015 and submitted — Latest diff uploaded

Information

Review Board
release-2.5.x
505e5fe...

Reviewers

Review Board is overdue for a visual refresh, and I'm starting out with
the dashboard and other datagrids.

The goal of this redesign is remove a lot of the lines and background
colors, tone down the background, add some breathing room to the items
in the dashboard, and to overall reduce the noise.

The sidebar is no longer its own boxy thing, but rather lives on the
background of the page (which itself is now slightly off-white). The
counts on the sidebar are back to being simple text, but with a dark red
instead of black/grey, keeping things simple but clear.

There's a relationship between the selected item in the sidebar and the
dashboard now. The highlight around the item appears as an extension of
the datagrid, without any breaks between them.

The datagrid title no longer has a box as well, but instead, it also
sits on the background.

The column headers are now a light blue (similar to the navbar), rather
than having a sort of chrome look. The borders between the header cells
have been removed.

The Edit Columns menus is now flush with the page, and can no longer
flow off the page. Like the sidebar and datagrid itself, it will display
a scrollbar when needed. The boxes around the checkmarks have also been
removed.

The paginator has been simplified, removing the boxes around each click
target. The links are all grey, and turn to black when hovering. The
selected page stands out in black, with a thin border below it, helping
to provide an extra visual.

The User page's tabs are now a clear part of the datagrid, blending in
with the header. This helps to provide a cleaner, more cohesive look.
The tab code has also been pulled out of the "dashboard"-specific CSS,
making it easier to use down the road with other plain datagrids.

Going forward, some work will be done to have each datagrid take up the
full height of the page, just like with the dashboard, helping to unify
the experience across all pages. Some cleanup will also be done to
remove a lot of the dashboard-specific styling, making that all a lot
more generic.

Tested each datagrid and all interactions on Chrome, Firefox, Safari,
and Internet Explorer on Retina and non-Retina displays.

This includes the Edit Columns menu, reording columns, resizing the
windows, changing filters/tabs/dashboard groups, etc.