[manu-gurudath]

every day, there's a new confused user in #hcb asking a card-grant related question

here are the biggest changes this pr does:

• makes it super obvious that organizations control spending restrictions, not hcb
• clearly shows the steps on how to use a card grant in a step-by-step list view format
• rearranges buttons and contents on page to make card grant ui more intuitive

preview

---

cc @anishanne

[anishanne]

Can we add the name into the billing address/card details area? People ask us about that a lot.

[itmadden]

Thanks for this PR, plenty of much needed improvements. Here's a couple of UX thoughts:

For the header card:

Before	After

I like:

• The emphasis on the expiration date distinctly separate from the card details
• The progress bar providing a glanceable indication of how much has been spent

Could be improved:

• The contrast ratio could be improved especially with the badge, progress bar, and muted text. The old colorful status indicator and muted text were near the bottom with a lighter background.
• The "Manage grant" button looks a little lonely in the corner.

The card details section looks a little bare when you're an organizer but not an admin:

And for the controls, it feels a little weird to have buttons inside of clickable cards where both lack icons:

I also think in general the eyebrow headers are a little difficult to read. Maybe we could restyle them or consider swapping them out for something else.

I like this help section, but I haven't seen this style for "All articles" anywhere before and it looks a little out of place:

Maybe we could consider pulling from "See all" on the homepage? Just an idea.

Overall I really like the direction you're going. Feel free to push back on any of these UX critiques as well.

[garyhtou]

@itmadden , can you please do a 2nd pass here?