chore(ui-docs): change order to Button..Modal

front/ui-docs/components/ui/modal.md

@@ -33,22 +33,22 @@ const isOpen6 = ref(false)
 <Layout flex>
 
 ```vue-html
-<Modal v-model="isOpen" title="My modal">
-  Modal content
-</Modal>
-
 <Button @click="isOpen = true">
   Open modal
 </Button>
+
+<Modal v-model="isOpen" title="My modal">
+  Modal content
+</Modal>
 ```
 
 <div class="preview">
-<Modal v-model="isOpen" title="My modal">
-  Modal content
-</Modal>
 <Button @click="isOpen = true">
   Open modal
 </Button>
+<Modal v-model="isOpen" title="My modal">
+  Modal content
+</Modal>
 </div>
 
 </Layout>
@@ -62,6 +62,10 @@ Make sure to add `autofocus` to the preferred button.
 <Layout flex>
 
 ```vue-html
+<Button @click="isOpen = true">
+  Open modal
+</Button>
+
 <Modal v-model="isOpen" title="My modal">
   Modal content
 
@@ -75,13 +79,12 @@ Make sure to add `autofocus` to the preferred button.
     </Button>
   </template>
 </Modal>
-
-<Button @click="isOpen = true">
-  Open modal
-</Button>
 ```
 
 <div class="preview">
+<Button @click="isOpen2 = true">
+  Open modal
+</Button>
 <Modal v-model="isOpen2" title="My modal">
   Modal content
   <template #actions>
@@ -93,9 +96,6 @@ Make sure to add `autofocus` to the preferred button.
     </Button>
   </template>
 </Modal>
-<Button @click="isOpen2 = true">
-  Open modal
-</Button>
 </div>
 
 </Layout>
@@ -107,18 +107,23 @@ Note that confirmation dialogs interrupt the user's workflow. Consider adding a
 ::: tip Read more about designing user experiences around dangerous actions:
 
 - [How to use visual signals and spacing to differentiate between benign and dangerous options](https://www.nngroup.com/articles/proximity-consequential-options/)
-> If you need to implement dangerous actions, make sure to place them apart from other actions to prevent accidental clicks. Add contextual hints and information so that the user understands the consequences of the action.
+
+  > If you need to implement dangerous actions, make sure to place them apart from other actions to prevent accidental clicks. Add contextual hints and information so that the user understands the consequences of the action.
 
 - [How to design a confirmation dialog](https://www.nngroup.com/articles/confirmation-dialog/)
-> 1. Let the user confirm potentially destructive actions
+  > 1. Let the user confirm potentially destructive actions
-> 2. Do not use confirmation dialogs for routine tasks
+  > 2. Do not use confirmation dialogs for routine tasks
-> 3. Be specific about the action and its potential consequences
+  > 3. Be specific about the action and its potential consequences
-> 4. Label the response buttons with their result: "Delete my account" instead of "Yes"
+  > 4. Label the response buttons with their result: "Delete my account" instead of "Yes"
-> 5. Make sure to give the user all information they need to decide
+  > 5. Make sure to give the user all information they need to decide
 
 :::
 
 ```vue-html
+<Button @click="isOpen = true" color="destructive">
+  Delete my account ...
+</Button>
+
 <Modal v-model="isOpen" title="Delete account?">
   <template #alert>
     <Alert color="red">
@@ -138,11 +143,11 @@ You will not be able to restore your account.
     </Button>
   </template>
 </Modal>
-<Button @click="isOpen = true" color="destructive">
-  Delete my account ...
-</Button>
 ```
 
+<Button @click="isOpen6 = true" color="destructive">
+Delete my account ...
+</Button>
 <Modal v-model="isOpen6" title="Delete account?">
   <template #alert>
     <Alert color="red">
@@ -153,18 +158,15 @@ You will not be able to restore your account.
 Do you want to delete your account forever?
 
 You will not be able to restore your account.
-  <template #actions>
+<template #actions>
-    <Button autofocus @click="isOpen6 = false" color="secondary">
+<Button autofocus @click="isOpen6 = false" color="secondary">
-      Keep my account
+Keep my account
-    </Button>
-    <Button color="destructive" @click="isOpen6 = false">
-      I understand. Delete my account now!
-    </Button>
-  </template>
-</Modal>
-<Button @click="isOpen6 = true" color="destructive">
-  Delete my account ...
 </Button>
+<Button color="destructive" @click="isOpen6 = false">
+I understand. Delete my account now!
+</Button>
+</template>
+</Modal>
 
 ## Nested modals
 
@@ -173,6 +175,10 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
 <Layout flex>
 
 ```vue-html
+<Button @click="isOpen = true">
+  Open modal
+</Button>
+
 <Modal v-model="isOpen" title="My modal">
   <Modal v-model="isOpenNested" title="My modal">
     Nested modal content
@@ -182,13 +188,12 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
     Open nested modal
   </Button>
 </Modal>
-
-<Button @click="isOpen = true">
-  Open modal
-</Button>
 ```
 
 <div class="preview">
+<Button @click="isOpen4 = true">
+  Open modal
+</Button>
 <Modal v-model="isOpen4" title="My modal">
   <Modal v-model="isOpen5" title="My modal">
     Nested modal content
@@ -197,9 +202,6 @@ You can nest modals to allow users to isOpen a modal from inside another modal.
     Open nested modal
   </Button>
 </Modal>
-<Button @click="isOpen4 = true">
-  Open modal
-</Button>
 </div>
 
 </Layout>
@@ -211,6 +213,10 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
 <Layout flex>
 
 ```vue-html
+<Button @click="isOpen = true">
+  Open modal
+</Button>
+
 <Modal v-model="isOpen" title="My modal">
   Modal content
 
@@ -224,13 +230,12 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
     </fw-alert>
   </template>
 </Modal>
-
-<Button @click="isOpen = true">
-  Open modal
-</Button>
 ```
 
 <div class="preview">
+<Button @click="isOpen3 = true">
+  Open modal
+</Button>
 <Modal v-model="isOpen3" title="My modal">
   Modal content
   <template #alert v-if="alertOpen">
@@ -250,9 +255,6 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
     </Button>
   </template>
 </Modal>
-<Button @click="isOpen3 = true">
-  Open modal
-</Button>
 </div>
 
 </Layout>