Improve Voting widget formatting

[rickstaa]

Is your feature request related to a problem?

After #441, the voting widget styling has already improved significantly. However, I think there’s still room for further refinement—particularly around the “Your vote” section text styling, spacing between elements, and overall button sizing.

Before PR #441:

After PR #441:

Describe the solution you'd like

@thebeyondr I think we could further improve the visual quality and usability of this widget by refining typography (font weight/size), adjusting padding and spacing between elements, and slightly resizing the buttons for better balance and hierarchy. Not to set on the exact implementation but compared to the other widgets it fells less streamlined.

Quick suggestion / mockup:

Other widget:

Describe alternatives you've considered

No response

Additional context

No response

[thebeyondr]

Updated:

[rickstaa]

Updated:

@thebeyondr This looks great, very clean. I do tend to prefer green for the “for” option, but I’d be open to hear your reasoning for choosing blue.

[thebeyondr]

Ah, my apologies. I meant to ask/write something on this! My thinking is that the green being used is the main branding color and associating it with "For" implies those votes are more aligned with the Livepeer ecosystem than "Against" votes are. I didn't really agree with this mental model so I was trying to separate them mentally in the UI.

I tried:

• blue / yellow
• blue / orange
• green / orange
• sat. green / desat. green
• light & dark blue
• light blue (sky) / light red (tomato)

If you'd like to see green re-integrated, I think we could also try:

"For": a more desaturated green than the livepeer brand green
"Against": tomato or we can figure out another color here
"Abstain": remains grey

or can revert no prob 🫡

[rickstaa]

Ah, my apologies. I meant to ask/write something on this! My thinking is that the green being used is the main branding color and associating it with "For" implies those votes are more aligned with the Livepeer ecosystem than "Against" votes are. I didn't really agree with this mental model so I was trying to separate them mentally in the UI.

I tried:

• blue / yellow
• blue / orange
• green / orange
• sat. green / desat. green
• light & dark blue
• light blue (sky) / light red (tomato)

If you'd like to see green re-integrated, I think we could also try:

"For": a more desaturated green than the livepeer brand green "Against": tomato or we can figure out another color here "Abstain": remains grey

or can revert no prob 🫡

Thanks for the detailed explanation, that makes a lot of sense and I do agree that it should not be the same solid Green as our other livepeer brand buttons. Maybe we could try a translucent green for “For” votes, since that’s what voters are used to and it still aligns with how other platforms signal votes in favor (e.g. https://snapshot.box/#/s:ens.eth/proposal/0x8d16992852893f05b23b0e26de27c9e6b2a8de1193c991e14f81ef13cd943517/votes). I’m open to experimenting further if that still doesn’t feel right.

[thebeyondr]

in #457