Skip to content
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

Make Dialogs (Modals) Styles Consistent #4963

Open
cjeria opened this issue Aug 7, 2018 · 0 comments
Open

Make Dialogs (Modals) Styles Consistent #4963

cjeria opened this issue Aug 7, 2018 · 0 comments
Labels
area-UI Relating to the user interface. type-enhancement

Comments

@cjeria
Copy link
Contributor

cjeria commented Aug 7, 2018

There are some inconsistencies wrt modal styles in the new UI.

Only modals should get an "X"

Dialogs come in two main types. First type are attention seeking modal dialogs which force a user to interact with them before continuing. Second type is non-modal dialog which allow users to click or tap outside of them to dismiss them. There's a third type, which I'm calling Form Modal Dialog which should use the same general design styles as the first two, but may have more customization wrt text alignements, main section elements (form inputs) and varied sizes based on content. I'll provide links to details specs.

Dialog Styleguide

image

Remove x from all screens that are not modals

image
image

Modals to update

Remove token confirmation modal - Needs rounded corners, reduce width to match the above templates.
image

Add "x" to this modal
image

Form Modal Dialog (third type of modal)

These are the third type I'm calling Form Modal Dialog which should use the same general design styles as the first two, but may have more customization wrt text alignements, main section elements (form inputs) and varied sizes based on content. I'll provide links to details specs.

Custom gas modal

image

Account Details

image

Deposit

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-UI Relating to the user interface. type-enhancement
Projects
None yet
Development

No branches or pull requests

3 participants