@@ -254,6 +255,38 @@ Skeleton loading can replace any existing UI elements for the period in which th
---
## Dialog modals
Dialog modals are only used for having a conversation and confirmation with the user. The user is not able to access the features on the main page until closing the modal.
### Usage
* When the action is irreversible, dialog modals provide the details and confirm with the user before they take an advanced action.
* When the action will affect privacy or authorization, dialog modals provide advanced information and confirm with the user.
### Style
* Dialog modals contain the header, body, and actions.
***Header(1):** The header title is a question instead of a descriptive phrase.
***Body(2):** The content in body should never be ambiguous and unclear. It provides specific information.
***Actions(3):** Contains a affirmative action, a dismissive action, and an extra action. The order of actions from left to right: Dismissive action → Extra action → Affirmative action
* Confirmations regarding labels should keep labeling styling.
* References to commits, branches, and tags should be **monospaced**.
### Placement
* Dialog modals should always be the center of the screen horizontally and be positioned **72px** from the top.
| Dialog with 2 actions | Dialog with 3 actions | Special confirmation |
