MetaMask / MetaMask/metamask-extension

Make Dialogs (Modals) Styles Consistent

Open
#4,963 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-UI type-enhancement
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named; start by locating the dialog and modal components that render the screens shown in the issue. Done means modal and non-modal dialogs follow the stated close-control and sizing rules, while form dialogs retain appropriate customization across the listed examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.