Switch to a new dropdown arrow icon and away from using Unicode arrows.

Review Request #9315 — Created Oct. 23, 2017 and submitted — Latest diff uploaded


Review Board


The Unicode dropdown arrow that we've been using throughout the UI (such
as for navigation, actions, and the Publish Review button) doesn't
render the same way on all operating systems or browsers. On Windows,
it renders as a really tiny arrow, which isn't ideal. Worse, in Firefox
on Windows and Linux, it Firefox on Windows and Linux, it ends up
reserving too much vertical space (despite the arrow's size), throwing
off the height of the line/container. This impacted the Publish Review
button in particular.

This change replaces our usage of the Unicode arrow with a custom icon
from our spritesheet. The new icon is uniform across all platforms, is
of a decent (but not too large) size, and fits in well everywhere it's
placed. It's also partially-transparent, keeping it from appearing too
dark against backgrounds.

This looks better all throughout, but also fixes the discrepency between
the "Publish Review" part of the button and the dropdown arrow part.
(Note that the button is not fully fixed in this change, though --
that's being addressed in a separate review.)

Tested on Windows and Mac in Chrome, Firefox, Safari, IE, and Edge.
Verified that the icon looked correct in each case and that it fixed
these size consistency issues in the Publish Review button.