Issue: [4.1 Beta 3] CSS: Tab-less page action button icons are duplicated, tabbed watched icon positioning (suggestion: change to phrase)

In VW 4.1 Beta 3 and XF2.1, I'm experiencing a few styling-related quirks with the new tab-less page layout (implemented in report #1834). I'll include a couple of screenshots to assist with showing the issue.

1) Icons for selected buttons are duplicated in page action area, such as watch, list and main. Bookmark and the '...' menu trigger are not affected.


Attachment 1691

Looking at the CSS with the browser inspector, the FA icon is being declared once for the a.button element, and then again for the child element span.button-text. Examples:

and

and

My suggestion would be to remove the first, third and fifth code blocks above, leaving just the rules that where .button-text:before is part of the selector.

2) The following CSS specifying the FA5 font seems unnecessary in XF2.1 and causes the icons to slightly fall out of vertical alignment:
The button--icon class is all that is required and then XF2.1's core CSS handles the rest. With 1) and 2) applied this is how the tab-less page action buttons could look:


Attachment 1690

----

3) With older 'tabbed' page display, the new watched indicated icon gets positioned at the right edge of the entire tabs block. To be honest, as nice as the icon might be (if positioned correctly), I'd prefer it if the "Watch" text could be toggled. XenForo uses "Unwatch" (and clicking that link brings up an Unwatch overlay). Perhaps VW could toggle between "Watch" and "Watched"?

Currently:

Attachment 1689

Suggestion:

Attachment 1688

XF Thread (for reference):

Attachment 1687