[Storage] Restricted mode banner and flow

[Tbaut]

closes #2020

---

Submission checklist:

Layout

• Change looks good in the desktop web ui

[render]

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

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

[render]

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

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

[render]

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

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

[tanmoyAtb]

Looks great :)

[asnaith]

With the modification of the code, I was able to see the banner and the disabled bucket and pin buttons 👍

The hover color of the button is the same as the banner background.

As I am forcing restricted mode through code and not the api response I am unable to test the full functionality and see if the banner disappears and the buttons are re-enabled when a user re-adds a card/upgrades their subscription.

I'm wondering if there is any additional info displayed to the user on the settings page, informing them of the specific action they need to take? I don't see additional elements on the settings page and expected something to further explain the reason for the restriction / required action but perhaps because I'm using the code mod to test and not genuine api responses for a restricted user etc.

[FSM1]

With the modification of the code, I was able to see the banner and the disabled bucket and pin buttons 👍

The hover color of the button is the same as the banner background.

As I am forcing restricted mode through code and not the api response I am unable to test the full functionality and see if the banner disappears and the buttons are re-enabled when a user re-adds a card/upgrades their subscription.

I'm wondering if there is any additional info displayed to the user on the settings page, informing them of the specific action they need to take? I don't see additional elements on the settings page and expected something to further explain the reason for the restriction / required action but perhaps because I'm using the code mod to test and not genuine api responses for a restricted user etc.

There is currently no additional info displayed. The user would see an unpaid invoice on the settings/billing and I feel that this should be enough for now.

[Tbaut]

@asnaith re the hover background, the fact that the text remains white, and therefor visible makes me this that it isn't really a problem 🤷 Let me know your thoughts.

Agreed with Mike that the unpaid invoice (in red) that is visible when you've something to pay, should be enough.

[asnaith]

@asnaith re the hover background, the fact that the text remains white, and therefor visible makes me this that it isn't really a problem 🤷 Let me know your thoughts.

@Tbaut yeah it's extremely minor and agree it's not a problem at all as it stays visible and functions as intended. I was just pointing it out in case we wanted to add that extra layer of polish to the presentation (I assumed changing it would be as simple as just changing a color hex).