From 951ad25ac8e7abe7b5f0c4e6f3fe61bb4053fcf3 Mon Sep 17 00:00:00 2001
From: Paul Derscheid <paul.derscheid@lmscloud.de>
Date: Tue, 17 Sep 2024 10:59:26 +0000
Subject: [PATCH] Bug 37812: Improve consistency of modal styling in Dialog.vue

- Use modal-header for content, modal-footer for acknowledgement in alert type modal.
- Conditionally render modal-body if message or inputs available.
- Use modal footer for interactions and hide top border if body wasn't rendered.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
---
 .../prog/js/vue/components/Dialog.vue         | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
index 385ad39379..7978d96d27 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
@@ -4,8 +4,10 @@
     <div class="modal" role="dialog" v-if="warning">
         <div class="modal-dialog">
             <div class="modal-content modal-lg">
-                <div class="modal-body alert-warning">
-                    <h1 v-html="warning"></h1>
+                <div class="modal-header">
+                    <h1 class="modal-title" v-html="warning"></h1>
+                </div>
+                <div class="modal-footer border-top-0">
                     <button
                         id="close_modal"
                         class="btn btn-default deny cancel"
@@ -26,7 +28,10 @@
                 <div class="modal-header alert-warning">
                     <h1 v-html="confirmation.title"></h1>
                 </div>
-                <div class="modal-body">
+                <div
+                    class="modal-body"
+                    v-if="confirmation.message || confirmation.inputs"
+                >
                     <p v-html="confirmation.message"></p>
                     <div class="inputs" v-if="confirmation.inputs">
                         <form ref="confirmationform">
@@ -62,6 +67,15 @@
                             </div>
                         </form>
                     </div>
+                </div>
+                <div
+                    class="modal-footer"
+                    :class="{
+                        'border-top-0': !(
+                            confirmation.message || confirmation.inputs
+                        ),
+                    }"
+                >
                     <button
                         v-if="accept_callback"
                         id="accept_modal"
@@ -85,7 +99,6 @@
             </div>
         </div>
     </div>
-    <!-- Must be styled differently -->
 
     <div class="modal_centered" v-if="is_submitting">
         <div class="spinner alert alert-warning">