fix: quorum text

[tiagoalvesdulce]

Closes #2687

Dependencies

Depends on decred/pi-ui#412

UI Changes Screenshot

Desktop

Mobile

[lukebp]

This is not showing the total eligible votes. This should say 2/5353 votes.

[tiagoalvesdulce]

Right, my bad.

I'm not feeling good about the UX in this PR tho. Here is a draw of our progress bar with the changes made by this PR:

While the progress bar max value is the number of votes to reach quorum, the text is displaying votes casted / eligible votes. Pretty confusing.

I suggest we go ahead and implement two bars, one for quorum and one for % of votes. Like @linnutee proposed here: #2704. We can get rid of the quorum bar once its reached and show a quorum reached text. What do you think @victorgcramos @lukebp @amass01 ?

[victorgcramos]

I like linutee's suggestion.

[victorgcramos]

See how it looks if we split the view and place the status bars side by side:

[lukebp]

I think you guys are making this way more complicated than it needs to be. The text from the orignal comment is simple and intuitive.

#2687 (comment)

A normal person is going to see 100/5000 as the number of votes that have been cast out of the total number of possible votes. The number of votes until quorum is reached is also displayed. This lines up with the status bar.

[lukebp]

tACK

[ta-lind]

I commented there in #2704 that adding that two separate bars makes only sense in a proposal specific view. That one has the real-estate to include all the details to make it clear enough. Otherwise much repetition in proposals list view, as that's much more packed already.

I'd go for a more reductive approach in the prop. list view. Though this is quite dated https://voting.decred.org/ I think solving it with either some icon block as part of the status group, rather than yes/no voting would be optimal. Previous screenshot from Luke is in a sense simple, but adds too much different type styles w/o alignment.

Couple quick drafts to test and validate https://www.figma.com/file/igi4pdXlHhTiGyDIF9A2IR/dcr---design-guidelines---id-and-visual-comms?node-id=2%3A7429 :