Bug 32145

Summary: Cancel hold modal confirm/submit button has a white background and text can't be read
Product: Koha Reporter: David Nind <david>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: gmcharlt, oleonard
Version: Main   
Hardware: All   
OS: All   
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)
Bug 32145: Fix style of buttons with class .btn-danger
Bug 32145: Fix style of buttons with class .btn-danger

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!