Skip to content

Design license banner #3211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Tracked by #480
presleyp opened this issue Jul 26, 2022 · 10 comments
Closed
Tracked by #480

Design license banner #3211

presleyp opened this issue Jul 26, 2022 · 10 comments
Assignees
@BrunoQuaresma
Labels
design needed Request for more beauty

Comments

@presleyp
Copy link
Contributor

presleyp commented Jul 26, 2022 •
edited
Loading

Problem

When an enterprise customer's license is in a grace period or exceeds their active user limit, there needs to be a banner on all pages alerting them to the non-compliance. It must be able to display an arbitrary number of warning strings, in case the customer is out of compliance on multiple fronts. It must not be dismissible, but it must not interfere with any functionality.

Definition of Done

A Figma mock-up showing the color, size, and placement of the banner.

Issues to keep in mind

What will happen if the banner gets longer due to additional warnings?
How much can we have the banner on the outside of all other content for ease of adding it to the component tree?

Prior art

To see the v1 license banner, set the System Banner here https://master.cdr.dev/admin?tab=appearance. The color is settable by the admin (not a requirement in v2 as far as I know) so the color below is not a meaningful design choice. Note that the banner stays at the top of the viewport as you scroll:

Screen Shot 2022-07-26 at 10 55 29 AM

Screen Shot 2022-07-26 at 10 55 39 AM
@presleyp presleyp added the design needed Request for more beauty label Jul 26, 2022
@presleyp presleyp mentioned this issue Jul 26, 2022
Closed
21 tasks
@BrunoQuaresma BrunoQuaresma self-assigned this Aug 15, 2022
@BrunoQuaresma
Copy link
Collaborator

My first suggestions
Multiple issues open
Multiple issues close
Single issue

I used "Magenta" because it is a "red-ish" color but not so red, so the user will not confuse this message as an error. We also could use a more "blue-ish" color but I also would like to get the user's attention and say "This is critical".

Thoughts?

@BrunoQuaresma
Copy link
Collaborator

Figma link: https://www.figma.com/file/YIGBkXUcnRGz2ZKNmLaJQf/Coder-v2-Design?node-id=674%3A587

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Aug 15, 2022 •
edited
Loading

I made a version which is softer, and I liked it more:

When have multiple issues and it is open:
Multiple issues open

When have multiple issues and it is closed:
Multiple issues close

When have single issue:
Single issue

@jsjoeio
Copy link
Contributor

jsjoeio commented Aug 15, 2022

I like the color! I prefer the second one since it's not as tall.

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Aug 15, 2022 •
edited
Loading

Same states using a gray color:

Single issue
Multiple issues open
Multiple issues close

@jsjoeio
Copy link
Contributor

jsjoeio commented Aug 15, 2022

I feel like we should have a standard warning/error/info color and use that consistently throughout app. Then we could use the info or warning with the banner

@Kira-Pilot
Copy link
Member

I really like the magenta. I like it a lot more than our red error state and I wish we could use it for errors or warnings as well.
If we didn't want the licensing banner to be considered an error, we could use the grey and then add an icon or something in the magenta. That would be attention-grabbing but less severe looking.

It might be nice to be able to dismiss this banner with a corner icon (an 'X') instead of via a text link.

Looking good!

@BrunoQuaresma
Copy link
Collaborator

Great feedback! @Kira-Pilot this banner specifically should not be dismissible.

It must not be dismissible, but it must not interfere with any functionality.

@presleyp
Copy link
Contributor Author

We're getting input that this should be coded as a warning and be an orangey color. Aside from that I think the design is great!

@ammario
Copy link
Member

ammario commented Aug 16, 2022

I guess magenta is too pretty for this purpose. Hopefully, we can find a use for it later.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@BrunoQuaresma BrunoQuaresma

Labels
design needed Request for more beauty
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@presleyp @BrunoQuaresma @jsjoeio @ammario @Kira-Pilot