Bug 33095 - Text is white on white when hovering over pay/writeoff buttons in paycollect
Summary: Text is white on white when hovering over pay/writeoff buttons in paycollect
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-02-28 19:30 UTC by Caroline Cyr La Rose
Modified: 2023-12-28 20:42 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.04


Attachments
Bug 33095: Text is white on white when hovering over pay/writeoff buttons in paycollect (4.95 KB, patch)
2023-03-01 19:15 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 33095: Text is white on white when hovering over pay/writeoff buttons in paycollect (5.01 KB, patch)
2023-03-01 19:38 UTC, Caroline Cyr La Rose
Details | Diff | Splinter Review
Bug 33095: Text is white on white when hovering over pay/writeoff buttons in paycollect (5.07 KB, patch)
2023-03-04 12:47 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Caroline Cyr La Rose 2023-02-28 19:30:04 UTC
The members/paycollect page has buttons to switch between pay and writeoff when you are paying a charge. When you hover the mouse cursor over the inactive button, the text becomes white, on a white background.

To get there:
1. Add a charge to a patron's account and go to pay
   1.1. Go to Patrons
   1.2. Click "Search"
   1.3. Click on the name of any patron
   1.4. Click on the "Accounting" tab (on the left)
   1.5. Click on the "Create manual invoice" tab
   1.6. Enter an amount
   1.7. Click "Save and pay"
2. Hover on the "Writeoff" button at the top of the form
   --> Text "disappears"

Also, I noticed the text for the active button becomes underlined and the button changes size...

3. Hover on the "Pay" button at the top of the form
   --> "Pay" becomes underlined
   --> Yellow button gets smaller
Comment 1 Owen Leonard 2023-03-01 19:15:30 UTC
Created attachment 147577 [details] [review]
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.
Comment 2 Caroline Cyr La Rose 2023-03-01 19:38:16 UTC
Created attachment 147579 [details] [review]
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>
Comment 3 Katrin Fischer 2023-03-04 12:47:03 UTC
This is much much better than before, but I notice that here and in some other places we have yellow buttons with white font. The normal "main" button is yellow with black font, which I think has the better contrast.
Comment 4 Katrin Fischer 2023-03-04 12:47:30 UTC
Created attachment 147748 [details] [review]
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>
Comment 5 Tomás Cohen Arazi 2023-03-06 17:47:23 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 6 Jacob O'Mara 2023-03-07 18:28:15 UTC
Nice work, thanks everyone!

Pushed to 22.11.x for the next release.
Comment 7 Lucas Gass 2023-03-10 17:20:51 UTC
Can't recreate in 22.05, won't backport.