Card subscriptions and billing page design

[tanmoyAtb]

closes #1885

---

Submission checklist:

Layout

• Change looks good in the desktop web ui
• Change looks good in the mobile web ui

Theme

• Components / elements inspected in light mode
• Components / elements inspected in dark mode

[render]

Your Render PR Server URL is https://files-ui-stage-pr-1906.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7so1fnho1kg646ol2j0.

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-1906.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7so1gnho1kg646ol34g.

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-1906.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-c7so1hfho1kg646ol3h0.

[asnaith]

Functionally everything is working well but we are displaying a "0" in the label when there is no next payment date

Also, now that the change plan / update card buttons have been converted to links there's a difference in colour to other links displayed on the page. The news ones are blue whereas the others are white (or black in light mode).

Lastly, the responsive layout scales down to mobile really nicely but in my opinion, can look a bit odd on a large resolution. Especially the storage space element. This is more of a design thing though so perhaps best to defer to whatever @serenaho deems is best.

[serenaho]

Thanks @asnaith for the review!

Also, now that the change plan / update card buttons have been converted to links there's a difference in colour to other links displayed on the page. The news ones are blue whereas the others are white (or black in light mode).

In regards to the link colors, I intentionally made the invoicing section a different colour as "Change Plan" and "Add Card" are two CTAs that are more active action items versus something more passive like viewing past invoices. The other key difference was that the View Invoices link led to a new page but I can see how this might be seen as inconsistent. I could definitely drop this in the Slack and see what opinions might be!

Lastly, the responsive layout scales down to mobile really nicely but in my opinion, can look a bit odd on a large resolution. Especially the storage space element.

For this, I can imagine that a good fix would be to keep it consistent with how we currently keep the inner content length maxed out at a certain size no matter how big the container gets like in the Security tab:

[serenaho]

One other small thing is that the No Invoice Found message is currently in the middle of the page which is a bit inconsistent with the rest (not sure if it's just temporarily there!). If we could left-align it in smaller text just like the current "No card" text that would work great.

[serenaho]

Okay I took a look and this is the original design I had on Figma. For some reason earlier it didn’t register in my mind that the View PDF link was also originally blue but here’s my rationale for this version:

• The ‘All invoices’ link is a color that’s not as eye-catching because it’s a more passive type of CTA compared to the other ones
• It’s also the only one that opens to a new page
• The download pdf button remains blue since it’s a more active action

[tanmoyAtb]

Thanks for all the feedbacks guys.

I've made the following updates.

• Handled the 0 in place of next payment
• Payment link colors according to suggestions from @serenaho
• No invoice found line alignment
• Max width for wider screens.

[asnaith]

The latest changes are looking great 🚀

[serenaho]

Looks awesome, thanks Tanmoy & Thibaut!

[Tbaut]

What do you think about making the max width even smaller, like 750px. On a big screen the distance between the "next payment" and the actual date is too large IMHO

Would look like this, which is still too far for me, but a little better. I'll bring that to our design meeting and we can create another issue to fix this better.

Otherwise looks great, thank you so much

[tanmoyAtb]

What do you think about making the max width even smaller, like 750px. On a big screen the distance between the "next payment" and the actual date is too large IMHO

Would look like this, which is still too far for me, but a little better. I'll bring that to our design meeting and we can create another issue to fix this better.

Otherwise looks great, thank you so much

Fully agreed. If this comes up in the design meeting, consider all the 3 tabs and lets come up with a consistent design for all the settings.

[Tbaut]

ok let's tackle this later, it's simple enough