[cms] ui/ux improvements: invoice and DCC cards

[ta-lind]

Cards in current release are a bit too homogeneous, as all three (invoices, dcc's, proposals) are roughly the same looking basic cards. This improvement intends to provide both distinction as well provide a bit of summarized insights on each. (ie. adding subtotals, support/against votes, etc)


• invoices and dcc's have an added tag infront of the title. This is similar to RFP's component
• invoices added amount totals in dcr and usd
• invoices added a reference to proposal(s) billed (if any)
• dcc added "nominated by: username" for better reference on both user names
• dcc added support and against counter
• dcc added comments
• updated status icons colors
• arrow indicator on right side added for consistency; also working as a back button when opening a card
• note: prop cards still to be addressed

Figma: https://www.figma.com/file/RuzhkKo9fUjKQLqGbUPjHl/decred-piui-cms?node-id=276%3A346 Re: @MariaPleshkova

[xaur]

I don't think we will have views where Invoices and DCCs will be in the same list. That said, the colored tag before title doesn't hurt at all. It will help to understand on what view I am faster.

invoices added amount totals in dcr and usd

Mind that these are only visible to CMS admins and invoice author. Domain peers without special powers (like proposal owners) can only see hours. Even then, they only see hours billed against their domain and not all invoice's hours.

invoices added a reference to proposal(s) billed (if any)

This will be huge for reviewer's awareness. One thing to consider here is if an invoice bills against 3+ proposals. I did that, and it is great that our system allows to do different things against different budgets. But visualizing that might be tricky.

All other updates look great too.

[xaur]

One big feature I'm excited about is proposal owner approval (https://github.com/decred/politeia/issues/1225). It's not finished yet, but we can think how card UI could fit its status to help CMS admins and domain peers quickly see which invoices have approvals.

This has the same UX puzzle as showing referenced proposals: how to place approval status labels/icons when there are 3+ proposals.