Skip to content

Improve warning alert component design #7613

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
gtsiolis opened this issue Jan 14, 2022 · 3 comments
Closed

Improve warning alert component design #7613

gtsiolis opened this issue Jan 14, 2022 · 3 comments
Assignees
@gtsiolis
Labels
component: dashboard needs visual design team: webapp Issue belongs to the WebApp team user experience

Comments

@gtsiolis
Copy link
Contributor

gtsiolis commented Jan 14, 2022 •
edited
Loading

Problem to solve

🅰️ The first version of the warning alert component design was based on high saturated colors[1] and didn't adapt on dark theme colors (see screenshots below) as we did with labels in #4607.

Delete deletion modal on light theme ☀️ Delete deletion modal on dark theme 🌔
Screenshot 2022-01-14 at 6 02 14 PM (2) Screenshot 2022-01-14 at 6 02 04 PM (2)
Labels on light theme ☀️ Labels on dark theme ☀️
image image

🅱️ In the latest design specs using ther warning alert component, we've tried to improve the colors of the warning alert component, see example in #7295 (comment).

Proposed design for the warning alert component
148848588-dddd6c66-8e7f-4a48-a0c6-61e8055d8574

Proposal

Since this is using the AlertBox component, we could update this once and improve the UX of this component across the product.

Next steps could include improving the rest of alerts by clearly defining the available types (info, warning, error, etc) and documenting when to use which.
@gtsiolis gtsiolis mentioned this issue Jan 14, 2022
Merged
10 tasks
@jldec jldec moved this to Scheduled in 🍎 WebApp Team Jan 17, 2022
@jldec
Copy link
Contributor

jldec commented Jan 17, 2022

Assigned to @jankeromnes per #7295 (comment)

@gtsiolis gtsiolis moved this to Inbox in Gitpod Design Jan 20, 2022
@gtsiolis gtsiolis self-assigned this Jan 28, 2022
@gtsiolis gtsiolis removed this from Gitpod Design Feb 3, 2022
@gtsiolis gtsiolis mentioned this issue Feb 7, 2022
Merged
@jldec jldec removed the status in 🍎 WebApp Team Feb 10, 2022
@jldec
Copy link
Contributor

jldec commented Feb 10, 2022

Removing from groundwork for now.

@gtsiolis gtsiolis mentioned this issue Mar 24, 2022
Merged
4 tasks
@gtsiolis gtsiolis mentioned this issue Apr 5, 2022
Merged
@gtsiolis
Copy link
Contributor Author

Closing this as the first iteration of the new alert component was added in #8783. Thanks, @mustard-mh!

@gtsiolis gtsiolis moved this to Done in 🍎 WebApp Team Apr 19, 2022
@gtsiolis gtsiolis mentioned this issue May 6, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gtsiolis gtsiolis

Labels
component: dashboard needs visual design team: webapp Issue belongs to the WebApp team user experience
Projects
🍎 WebApp Team
Archived in project
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gtsiolis @jankeromnes @jldec