Update modals UI
Related to !9519 (merged).
New design
- Re-order the action buttons and align them to the right, to follow reading direction and OS's design best practices.
- Rephrase the modal title as a question, to which there are two answers: “Cancel” or “Delete(Remove)”
- Confirmations regarding labels should keep labeling styling. Ex: ~Discussion
- References to commits, branches, and tags should be monospaced
General confirmation dialog
![](/-/project/13083/uploads/3e68a02b05dcf8bc4cb0dc293c10b73d/groups.png)
- If there are 3 action buttons, they are ordered from:
Cance
-->Retry Pipeline
-->Stop Pipeline
![](/-/project/13083/uploads/5bfaee25d3fa5ce2570d15a07a4678f8/pipelines-02.png)
Special confirmation dialog: Deleting project / group / branch(that hasn't been merged)
- Add a “Cancel” button
- Remove danger color from the explanation text and rephrase it so it doesn't look like it's screaming at you
- Highlight key information in the explanatory text
- Add confirmation input with a label
![](/-/project/13083/uploads/7b1b7dec574e9f31c9558ab4b5b6038e/modal-02-with-long-text.png)
Mobile
![](/-/project/13083/uploads/ae2fbdce3ed5397df25194a5107d0e77/mobile.png)
List and new copy
moved to separate issues, please see related issues below
Guidelines
- background of title area (
Stop pipeline #33?
) should bewhite
-
Cancel
button should be next to theStop pipeline
button and right aligned - width of the modal should be
540px
- height of content area at least should be
134px
Edited by Andreas Kämmerle