MetaMask / MetaMask/metamask-extension
Make Dialogs (Modals) Styles Consistent
Nobody has claimed this yet.
- 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

Remove x from all screens that are not modals


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

Add "x" to this modal

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

Account Details

Deposit

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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