From b97352ca4b8bdb6a5e77ad965ec42efc615d8f17 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 19:13:36 +0300
Subject: [PATCH] Dialog cosmetics

---
 public/themes/arya-blue/theme.css         |  8 ++--
 public/themes/arya-green/theme.css        |  8 ++--
 public/themes/arya-orange/theme.css       |  8 ++--
 public/themes/arya-purple/theme.css       |  8 ++--
 public/themes/saga-blue/theme.css         |  8 ++--
 public/themes/saga-green/theme.css        |  8 ++--
 public/themes/saga-orange/theme.css       |  8 ++--
 public/themes/vela-blue/theme.css         |  8 ++--
 public/themes/vela-green/theme.css        |  8 ++--
 public/themes/vela-orange/theme.css       |  8 ++--
 public/themes/vela-purple/theme.css       |  8 ++--
 src/views/datatable/DataTableCrudDemo.vue | 46 ++++++++++++++++-------
 src/views/dialog/DialogDemo.vue           |  4 ++
 13 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 69af51fda..de0138558 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #64B5F6;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 51dbf49fd..e6f66660f 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #81C784;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index eb6e0b189..75c488c54 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #FFD54F;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 23e81322a..d613b5c8b 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #BA68C8;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index fc483fb08..7cb8c4666 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #2196F3;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index f71a8f730..3b0e78064 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #4CAF50;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 1448d3f42..60a14d2ce 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #ffffff;
   color: #495057;
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #FFC107;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index b824b4713..e56ce612a 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #64B5F6;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index e3567eb87..8deefc56e 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #81C784;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 972d74ba1..54a9b5e41 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #FFD54F;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 1a2d195f9..7b0dc0355 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2785,7 +2785,7 @@
   border-bottom: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
@@ -2819,13 +2819,13 @@
 .p-dialog .p-dialog-content {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-dialog .p-dialog-footer {
   border-top: 0 none;
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
+  padding: 1.5rem;
   text-align: right;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -2847,7 +2847,7 @@
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
 }
 .p-overlaypanel .p-overlaypanel-content {
-  padding: 1rem;
+  padding: 0 1.5rem;
 }
 .p-overlaypanel .p-overlaypanel-close {
   background: #BA68C8;
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 57afadb59..cea987e63 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -119,7 +119,10 @@
             </Dialog>
 
             <Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
-                <p v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</p>
+                <div class="confirmation-content">
+                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> 
+                    <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
+                </div>
                 <template #footer>
                     <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/>
                     <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
@@ -127,7 +130,10 @@
             </Dialog>
 
             <Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
-                <p v-if="product">Are you sure you want to delete selected products?</p>
+                <div class="confirmation-content">
+                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /> 
+                    <span v-if="product">Are you sure you want to delete the selected products?</span>
+                </div>
                 <template #footer>
                     <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/>
                     <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
@@ -250,19 +256,25 @@
 &lt;/Dialog&gt;
 
 &lt;Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
-&lt;p v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/p&gt;
-&lt;template #footer&gt;
-    &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/&gt;
-    &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt;
-&lt;/template&gt;
-&lt;/Dialog&gt;
+    &lt;div class="confirmation-content"&gt;
+        &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt; 
+        &lt;span v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;template #footer&gt;
+        &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt;
+    &lt;/template&gt;
+    &lt;/Dialog&gt;
 
-&lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
-&lt;p v-if="product"&gt;Are you sure you want to delete selected products?&lt;/p&gt;
-&lt;template #footer&gt;
-    &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/&gt;
-    &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt;
-&lt;/template&gt;
+    &lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
+    &lt;div class="confirmation-content"&gt;
+        &lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt; 
+        &lt;span v-if="product"&gt;Are you sure you want to delete the selected products?&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;template #footer&gt;
+        &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt;
+    &lt;/template&gt;
 &lt;/Dialog&gt;
 </template>
 </CodeHighlight>
@@ -497,4 +509,10 @@ export default {
     margin: 0 auto 2rem auto;
     display: block;
 }
+
+.confirmation-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 6bbdfcf52..e7f955811 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -190,4 +190,8 @@ p {
     align-items: center;
     justify-content: center;
 }
+
+.p-dialog .p-button {
+    min-width: 6rem;
+}
 </style>