From f45070390e5c3d6f06d9598ee6fc2e163e272052 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 21:25:28 +0300
Subject: [PATCH] Additional visual cosmetics on confirm dialog demos

---
 doc/confirmdialog/HeadlessDoc.vue | 12 ++++++------
 doc/confirmdialog/TemplateDoc.vue | 21 ++++++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
index 6cb7d74af..8a8e5b70c 100644
--- a/doc/confirmdialog/HeadlessDoc.vue
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -11,8 +11,8 @@
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept"></Button>
-                    <Button label="Cancel" outlined @click="onReject"></Button>
+                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
@@ -38,8 +38,8 @@ export default {
             <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
             <p class="mb-0">{{ message.message }}</p>
             <div class="flex align-items-center gap-2 mt-4">
-                <Button label="Save" @click="onAccept"></Button>
-                <Button label="Cancel" outlined @click="onReject"></Button>
+                <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
             </div>
         </div>
     </template>
@@ -57,8 +57,8 @@ export default {
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept"></Button>
-                    <Button label="Cancel" outlined @click="onReject"></Button>
+                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index f852685c6..47fa1c7da 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -25,7 +25,7 @@ export default {
 <ConfirmDialog group="templating">
     <template #message="slotProps">
         <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-            <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
@@ -56,10 +56,11 @@ export default {
                 group: 'templating',
                 header: 'Confirmation',
                 message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                acceptClass: 'p-button-outlined',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -77,7 +78,7 @@ export default {
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -100,10 +101,11 @@ const showTemplate = () => {
         group: 'templating',
         header: 'Confirmation',
         message: 'Please confirm to proceed moving forward.',
-        icon: 'pi pi-question-circle',
+        icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
-        acceptClass: 'p-button-outlined',
+        rejectClass: 'p-button-sm',
+        acceptClass: 'p-button-outlined p-button-sm',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -123,10 +125,11 @@ const showTemplate = () => {
                 group: 'templating',
                 header: 'Confirmation',
                 message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                acceptClass: 'p-button-outlined',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },