Update copy/styling for usage limit banners and modals #4601
Conversation
There was a problem hiding this comment.
Looks great! Only two small things. I noticed looking at this figma design UI alignment of the icon is suppose to be upper left now instead of center for the red box on the modal.
Also smart to add the hover effects but I think its too hard to see it on the 'Upgrade now' button. Maybe we make that one darker on hover?
There was a problem hiding this comment.
Hover looks much better! The UI on the modal is still off, the links in the paragraph should be underlined and darker blue instead of the lighter blue it is now. Looks like it should be the same link styling as the banners. Also please shouldn't be part of that link. Figma screenshot below.
show limit amount even if 0
make 'monthly'/'yearly' text in limit banners translatable
|
@srartese Nice catch! I've updated those links and added some more changes to get closer to the Figma. |
Checklist
Description
Changed the text and styling of usage limit notifications for public servers.
Screenshots
Notes
Fixed an issue that was causing the usage page to not load when Stripe isn't enabled.
Added missing usage banners/modal to custom project view.
Added usage banners to Usage page.
If a user has some limits that are exceeded and some that are in the warning range, only show banners for exceeded limits.
Modals are only shown if the user is over the submission or storage limits.
I extracted the usage limits banners/modal into a reusable component,
LimitNotifications.I also added transitions to the Button common component - opacity, background color, and text color. I was tempted to do
transition: all 0.2s, but that might be a bit too far :)