Bug 32044

Summary: Yellow buttons are styled differently in different spots
Product: Koha Reporter: Katrin Fischer <katrin.fischer>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: normal    
Priority: P5 - low CC: gmcharlt, lucas, oleonard
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: Small patch Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
22.11.00
Circulation function:
Bug Depends on: 30952    
Bug Blocks: 32148    
Attachments: Bug 32044: Improve consistency in primary submit buttons
Bug 32044: Improve consistency in primary submit buttons
Bug 32044: Improve consistency in primary submit buttons

Description Katrin Fischer 2022-10-30 09:40:24 UTC
Sometimes there is an orange border line around the buttons and other times there is none. (personal preference: no border).

1) Log out of the staff client: the login page has a yellow button without borders.

2) Look at the checkout button in a patron account: orangey border.
Comment 1 Katrin Fischer 2022-10-30 09:41:17 UTC
My feeling is that we now use a more flat, line-less design, so the buttons should be like that as well.
Comment 3 Katrin Fischer 2022-10-30 10:44:24 UTC
Found another 'no border' inside staff client: Edit subfields when editing a MARC framework.
Comment 4 Owen Leonard 2022-11-01 10:34:03 UTC Comment hidden (obsolete)
Comment 5 Katrin Fischer 2022-11-01 11:26:53 UTC
When testing this already looked pretty good, but I noticed a small inconsistency. When the login button is clicked, it turns white with grey/black borders. The other buttons show the orange border when clicked.

The login button also appears to have more 'height' than other similar buttons.
Comment 6 Owen Leonard 2022-11-01 11:59:05 UTC
Created attachment 142862 [details] [review]
Bug 32044: Improve consistency in primary submit buttons

We currently have a mix of ways to style buttons, including some using
Bootstrap's btn-primary class and some with CSS targeting
input[type='submit']. This patch works to make these buttons more
consistent in their appearance and to improve the modularity of related
SCSS.

The patch also removes some unused CSS from login.css.

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

Test various page to see if main submit buttons look correct in their
default, hover, and active states:

- The login page
- Circulation -> Checkouts -> Check out button (btn-primary)
- Circulation -> Set library (input[type='submit'])
- Cataloging -> Basic MARC editor (split button)

Also check "default" buttons:

- Patrons -> Sidebar filter (input[type='button'])
- Circulation -> Checkouts -> Show checkouts (btn-default)
Comment 7 Owen Leonard 2022-11-01 12:02:14 UTC
(In reply to Katrin Fischer from comment #5)

> The login button also appears to have more 'height' than other similar
> buttons.

The login button has always been bigger than others. What changed is that I altered it so that the padding increased proportionally with the font size. It should be roughly the same font size but the padding-to-font ratio should better match other buttons.
Comment 8 Katrin Fischer 2022-11-01 14:59:08 UTC
Created attachment 142890 [details] [review]
Bug 32044: Improve consistency in primary submit buttons

We currently have a mix of ways to style buttons, including some using
Bootstrap's btn-primary class and some with CSS targeting
input[type='submit']. This patch works to make these buttons more
consistent in their appearance and to improve the modularity of related
SCSS.

The patch also removes some unused CSS from login.css.

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

Test various page to see if main submit buttons look correct in their
default, hover, and active states:

- The login page
- Circulation -> Checkouts -> Check out button (btn-primary)
- Circulation -> Set library (input[type='submit'])
- Cataloging -> Basic MARC editor (split button)

Also check "default" buttons:

- Patrons -> Sidebar filter (input[type='button'])
- Circulation -> Checkouts -> Show checkouts (btn-default)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 9 Katrin Fischer 2022-11-01 14:59:40 UTC
This is a CSS only change, taking the liberty to move straight to PQA.
Comment 10 Tomás Cohen Arazi (tcohen) 2022-11-02 22:28:18 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!