Skip to content

UI: Confirmation Dialogs and Snackbar Notifs have an alarming red #1832

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.

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

Closed
Tracked by #1939
greyscaled opened this issue May 27, 2022 · 9 comments · Fixed by #1971
Closed
Tracked by #1939

UI: Confirmation Dialogs and Snackbar Notifs have an alarming red #1832

greyscaled opened this issue May 27, 2022 · 9 comments · Fixed by #1971
Assignees
Labels
site Area: frontend dashboard
Milestone

Comments

@greyscaled
Copy link
Contributor

greyscaled commented May 27, 2022

👥

suspend

  • The red is too red
  • The cancel action and main action are both too red especially against an already too red background
  • The button spacing and border feels tacky

very-red

consider spacing the buttons apart so users don't click the wrong one, e.g:
Screen Shot 2022-05-27 at 12 44 54 PM

@presleyp
Copy link
Contributor

I also think the border color clashes with the red - probably a dark mode oversight

@greyscaled greyscaled changed the title Confirmation Dialogs and Snackbar Notifs have an alarming red UI: Confirmation Dialogs and Snackbar Notifs have an alarming red May 27, 2022
@greyscaled
Copy link
Contributor Author

Please add your planning poker estimate with ZenHub @Kira-Pilot

@greyscaled
Copy link
Contributor Author

As mentioned in Slack, the alternative to the space-between is making wide buttons

@AbhineetJain
Copy link
Contributor

@vapurrmaid I am planning to pick this up. Do we have the requirements finalized for this, or should I just try to make it nicer?

@BrunoQuaresma
Copy link
Collaborator

@AbhineetJain I have some ideas, I will add a Figma mock here in a few minutes.

@AbhineetJain
Copy link
Contributor

Thank you, @BrunoQuaresma! 🙌

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jun 1, 2022

I think we could do:
Screen Shot 2022-06-01 at 12 37 19

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

Confirmation:

  • We can keep the same size of things
  • The background is theme.palette.background.paper
  • It has a border theme.palette.divider
  • The text is using the secondary color, theme.palette.text.secondary
  • The radius is 2px, theme.shape.radius I guess...
  • We can use the regular outlined button for secondary action as we have for the forms, and a red one for the main action. We can use the current red we are using.

Snackbar:

  • We can keep the same size of things
  • The background is theme.palette.background.paper
  • It has a border theme.palette.divider
  • The radius is 2px, theme.shape.radius I guess...
  • The text is using the secondary color, theme.palette.text.secondary
  • We can use on the left border the current red we have.

Please, let me know if you have any questions or need me to give you permission to Figma.

@BrunoQuaresma
Copy link
Collaborator

@AbhineetJain also feel free to suggest/implement any changes you think could make it better 😄

@AbhineetJain
Copy link
Contributor

@BrunoQuaresma These look great, thank you so much. Let me try implementing this and see if I can try a few other things around for design.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
site Area: frontend dashboard
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants