PB04 Improvement of the scopes list view on the Budgets component landing page

[verarojman]

Implements AjuntamentdeBarcelona/decidim-barcelona#360

Task

• As a visitor, when I reach the Budgets component landing page, I see an improved view of the scopes list with description, budget available and an action button

Specs

• Title clickable
• Description shown
• Budget amount shown
• Correct text is rendered on buttons

📷 Screenshots

Pre-vote

Vote in progress

Voted

💖 Thank you!

[verarojman]

@carolromero @andreslucena @arnaumonty

Any comments on the screenshots? If it works for you, I'll go ahead and write the specs to finish this PR

[carolromero]

Hi @verarojman! Sorry for the delay! We' ve been testing this in the staging environment and we have some suggestions for minor details. Here they go:

• Remove the outline of the census district (I think that's already fixed right?).

• Adjust the font size of the budget title to 1.25 rem, for consistency with other titles, and remove the chevron icon from the title.
  

• Place the "voted" and "pending votes" icons in this position and with these styles
  

With these changes we can now move forward and close the PR!

[verarojman]

@carolromero great, I'll deploy it to staging for you to check the changes :)

[carolromero]

@verarojman this looks good! 😍
For unfinished budgets it might be better to use a single literal, such as "Finish" or "Complete", since on both desktop and mobile the current string breaks the UI a bit:

Thank you!

[verarojman]

To make the mobile version more readable, I would go for one of these options (I've deployed Option B to staging)

Option A

Option B