From 4efed95bd46303f791ef2d901f20e2018c5b82cb Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 1 Mar 2023 19:03:33 +0000
Subject: [PATCH] Bug 33095: Text is white on white when hovering over
 pay/writeoff buttons in paycollect

The "Make a payment" page uses unusual navigation for the switch between
the "Pay" and "Write off" views: Bootstrap nav pills. The style on these
is a little muddled because a mix of Bootstrap and custom CSS is at
work.

This patch adds some CSS specific to nav pills and removes some
ambiguous CSS. Two links in the template get a dummy "#" href attribute
to make them work better with default styles.

To test, apply the patch and rebuild the staff interface CSS.

 - Locate a patron who has outstanding charges (lost item charge,
   account renewal fee, overdue fine, etc.).
 - From the patron checkout or detail page, click the "Accounting" tab
   in the left hand sidebar.
 - Click the "Pay" button on one of the oustanding charges.
 - On the "Pay an individual fine" page, confirm that there is a button
   and a link at the top of tab panel: "Pay" and "Write off." The
   "Pay" button should green with white text, the "Write off" button
   should be white with green text.
 - Click the "Write off" button and the styles of the links should be
   reversed.
 - Confirm that the CSS changes do not affect the appearance of the main
   navigation bar at the top of the page.

Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 98dd32e82631d8623b0947a23e11b4c22b10b822)
Signed-off-by: Jacob O'Mara <jacob.omara@ptfs-europe.com>
---
 .../intranet-tmpl/prog/css/src/_header.scss   |  7 +++--
 .../prog/css/src/staff-global.scss            | 27 ++++++++++++++-----
 .../prog/en/modules/members/paycollect.tt     |  4 +--
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index a11a5a64a9..ddd73e375e 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
@@ -8,8 +8,11 @@ a.navbar-toggle {
         color: #FFFFFF;
         text-shadow: unset;
 
-        &:hover, &:active {
-            border-bottom: 1px #FFFFFF;
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: transparent;
+            text-decoration: underline 2px;
         }
     }
 
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 97af88deca..bf477d1f1e 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -2962,14 +2962,29 @@ nav {
     border: 0;
 }
 
-.nav > li > a:hover,
-.nav > li > a:focus {
-    background-color: transparent;
-    padding: .4em 15px;
-    color: #fff;
-    text-decoration: underline 2px;
+.nav-pills {
+    li {
+        a {
+            background-color: transparent;
+        }
+        &.active {
+            a {
+                &:link,
+                &:visited {
+                    background-color: $background-color-primary;
+                }
+
+                &:active,
+                &:hover,
+                &:focus {
+                    background-color: $background-color-secondary;
+                }
+            }
+        }
+    }
 }
 
+
 .pagination {
     margin: .5em 0;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt
index c5bc2ed26b..250f8d8f63 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/paycollect.tt
@@ -131,7 +131,7 @@
     [% ELSE %]
 
     <ul class="nav nav-pills">
-        <li role="presentation" class="active"><a>Pay</a></li>
+        <li role="presentation" class="active"><a href="#">Pay</a></li>
         <li role="presentation"><a href="/cgi-bin/koha/members/paycollect.pl?writeoff_individual=1&borrowernumber=[% patron.borrowernumber | uri %]&debit_type_code=[% debit_type_code | uri %]&amount=[% amount | uri %]&amountoutstanding=[% amountoutstanding | uri %]&description=[% individual_description | uri %]&itemnumber=[% itemnumber | uri %]&accountlines_id=[% accountlines_id | uri %]&payment_note=[% payment_note | uri %]">Write off</a></li>
     </ul>
 
@@ -228,7 +228,7 @@
 [% ELSIF ( writeoff_individual ) %]
     <ul class="nav nav-pills">
         <li role="presentation"><a href="/cgi-bin/koha/members/paycollect.pl?pay_individual=1&borrowernumber=[% patron.borrowernumber | uri %]&debit_type_code=[% debit_type_code | uri %]&amount=[% amount | uri %]&amountoutstanding=[% amountoutstanding | uri %]&description=[% individual_description | uri %]&itemnumber=[% itemnumber | uri %]&accountlines_id=[% accountlines_id | uri %]&payment_note=[% payment_note | uri %]">Pay</a></li>
-        <li role="presentation" class="active"><a>Write off</a></li>
+        <li role="presentation" class="active"><a href="#">Write off</a></li>
     </ul>
 
     <form name="woindivfine" id="woindivfine" action="/cgi-bin/koha/members/pay.pl" method="post" >
-- 
2.39.5