Skip to content

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

  • If there are 3 action buttons, they are ordered from: Cance --> Retry Pipeline --> Stop Pipeline

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
Mobile

List and new copy

moved to separate issues, please see related issues below

Guidelines

  • background of title area (Stop pipeline #33?) should be white
  • Cancel button should be next to the Stop 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