From ab92871651febaa10ecb9bdd5c6d1e6c168e4ebf Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 18 Oct 2022 18:39:21 +0000
Subject: [PATCH] Bug 31753: Dialog boxes inside of modals don't seem wide
 enough

This patch makes some tweaks to the style of Bootstrap modals in the
staff interface, including making a correction to the style of .dialog
<div>s within modals.

The patch makes a correction to the modal markup generated by the guided
reports template for SQL previews so that the modal footer displays
correctly.

The patch also removes CSS which makes links inside headings the same
color as the heading text. The effect of this was to make links
invisible in the headings of hold confirmation modals.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Test the hold confirmation modal in check-in:
  - Place a hold on an available title.
  - Check in an item from that record and confirm that the modal
    looks correct. The "Check in message" box should take up the whole
    width of the modal, and the links in the modal header should be the
    standard green.
- Test the SQL preview modal in reports:
  - Go to Reports -> Use saved.
  - Click the actions menu associated with one of your saved reports and
    choose "Preview SQL." The modal should look correct.
- Other modals which might be tested: MARC previews from the
  bibliographic detail page, the cataloging search page, the Z39.50
  search page, etc.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/css/src/_variables.scss              |  1 +
 .../prog/css/src/staff-global.scss            | 44 ++++++++++---------
 .../modules/reports/guided_reports_start.tt   |  1 +
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
index 42b53140f8..cfae4151c3 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss
@@ -1,6 +1,7 @@
 $green-text-color: #006100;
 $background-color-primary: #408540;
 $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9);
+$background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 30 );
 
 // Copied from Bootstrap 5 without system-ui because of
 // https://infinnie.github.io/blog/2017/systemui.html
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index b9f4ec04ff..68a21d581f 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -593,10 +593,6 @@ h4,
 h5,
 h6 {
     margin: .5em 0;
-
-    a, a:link, a:visited {
-        color: #000;
-    }
 }
 
 hr {
@@ -1627,7 +1623,6 @@ i {
     margin: 1em auto;
     padding: .5em;
     text-align: center;
-    display: table;
     width: 65%;
     max-width: 600px;
 
@@ -3393,28 +3388,33 @@ label {
     }
 }
 
-.modal-header {
-    .closebtn {
-        margin-top: 4px;
-    }
-}
-
 .closebtn {
     color: #000;
-    filter: alpha(opacity = 20);
+    cursor: pointer;
     float: right;
     font-size: 21px;
     font-weight: bold;
     line-height: 1;
-    opacity: .2;
+    margin-top: 4px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 );
 
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 );
+    }
+
+    &:active {
+        box-shadow: none;
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 );
+    }
+}
+
+.modal-header {
+    border-bottom: 1px solid $background-color-secondary;
+
+    h3 {
         color: #000;
-        cursor: pointer;
-        filter: alpha(opacity = 50);
-        opacity: .5;
-        text-decoration: none;
     }
 }
 
@@ -3432,13 +3432,17 @@ label {
 }
 
 .modal-content {
-    background-color: rgb(211, 223, 204);
+    background-color: $background-color-modal;
 
     fieldset {
         box-shadow: none;
     }
 }
 
+.modal-footer {
+    border-top: 1px solid $background-color-secondary;
+}
+
 .btn-group {
     label,
     select {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
index 650313c2f1..b5face558b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reports/guided_reports_start.tt
@@ -2320,6 +2320,7 @@
                             <h4 class="modal-title">' + title + '</h4>\
                         </div>\
                         <div class="modal-body"><textarea id="code' + reportid + '">' + message + '</textarea>\
+                        </div>\
                         <div class="modal-footer">\
                             <a id="preview-modal-editreport" class="btn btn-default" href="/cgi-bin/koha/reports/guided_reports.pl?reports=' + reportid + '&amp;phase=Edit%20SQL"><i class="fa fa-pencil"></i> ' + _("Edit") + '</a>\
                             <a id="preview-modal-duplicate" class="btn btn-default" href="/cgi-bin/koha/reports/guided_reports.pl?phase=Create report from existing&amp;report_id=' + reportid + '"><i class="fa fa-copy"></i> ' + _("Duplicate") + '</a>\
-- 
2.39.5