Bug 32145 - Cancel hold modal confirm/submit button has a white background and text can't be read
Summary: Cancel hold modal confirm/submit button has a white background and text can't...
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low normal (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-11-09 12:29 UTC by David Nind
Modified: 2023-06-08 22:28 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:
22.11.00


Attachments
Screenshot - cancel hold modal window (button backgroudn white) (14.72 KB, image/png)
2022-11-09 12:29 UTC, David Nind
Details
Bug 32145: Fix style of buttons with class .btn-danger (2.17 KB, patch)
2022-11-10 12:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32145: Fix style of buttons with class .btn-danger (2.23 KB, patch)
2022-11-10 15:22 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 David Nind 2022-11-09 12:29:26 UTC
Created attachment 143497 [details]
Screenshot - cancel hold modal window (button backgroudn white)

Confirm/submit buttons for when cancelling a hold:
- a white background
- when hovered over, the button text is white, background is grey, border is red

This makes it hard to read in both states.

See screenshot attached.

To replicate:
1. Place a hold on a record.
2. From the holds section, select the hold and click the delete icon.
3. Note that the "Confirm cancellation" button:
   . has a white background
   . when hovered over, the button text is white, background is grey, border is red
Comment 1 Katrin Fischer 2022-11-10 09:31:24 UTC
Confirmed on master as of this morning.
Comment 2 Owen Leonard 2022-11-10 12:31:57 UTC
Created attachment 143644 [details] [review]
Bug 32145: Fix style of buttons with class .btn-danger

This patch adds style to the staff client's global SCSS which adds
correct styling to buttons classed with .btn-danger.

This isn't the correct way to fix this, but it's the fast way.
Rebuilding Bootstrap with custom colors is the correct way, but
Bootstrap 3.x doesn't use SCSS. I consider this is a FIXME for an
upgrade of Bootstrap in the staff interface.

To test, apply the patch and rebuild the staff interface CSS. Test
instances where the .btn-danger class is used. Two examples:

Holds:

- Locate a bibliographic records with holds and view the holds.
- Click the "trash" icon to delete one of the holds.
- In the confirmation modal, check that the "Confirm cancellation"
  button looks correct in its default, hover, and active ("clicked")
  state.

Cataloging:

- Open a new blank record in the basic MARC editor.
- Click "Save" without filling any mandatory fields.
- You should see a warning about the empty fields.
- Scroll down until the warning is offscreen. An "Errors" button should
  appear in the toolbar.
Comment 3 Katrin Fischer 2022-11-10 15:22:21 UTC
Created attachment 143673 [details] [review]
Bug 32145: Fix style of buttons with class .btn-danger

This patch adds style to the staff client's global SCSS which adds
correct styling to buttons classed with .btn-danger.

This isn't the correct way to fix this, but it's the fast way.
Rebuilding Bootstrap with custom colors is the correct way, but
Bootstrap 3.x doesn't use SCSS. I consider this is a FIXME for an
upgrade of Bootstrap in the staff interface.

To test, apply the patch and rebuild the staff interface CSS. Test
instances where the .btn-danger class is used. Two examples:

Holds:

- Locate a bibliographic records with holds and view the holds.
- Click the "trash" icon to delete one of the holds.
- In the confirmation modal, check that the "Confirm cancellation"
  button looks correct in its default, hover, and active ("clicked")
  state.

Cataloging:

- Open a new blank record in the basic MARC editor.
- Click "Save" without filling any mandatory fields.
- You should see a warning about the empty fields.
- Scroll down until the warning is offscreen. An "Errors" button should
  appear in the toolbar.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 4 Katrin Fischer 2022-11-10 15:48:22 UTC
Going straight to PQA here.
Comment 5 Tomás Cohen Arazi 2022-11-10 17:51:50 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!