Bug 32044 - Yellow buttons are styled differently in different spots
Summary: Yellow buttons are styled differently in different spots
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: 30952
Blocks: 32148
  Show dependency treegraph
 
Reported: 2022-10-30 09:40 UTC by Katrin Fischer
Modified: 2023-12-28 20:44 UTC (History)
3 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
Bug 32044: Improve consistency in primary submit buttons (9.21 KB, patch)
2022-11-01 10:34 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32044: Improve consistency in primary submit buttons (9.41 KB, patch)
2022-11-01 11:59 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32044: Improve consistency in primary submit buttons (9.47 KB, patch)
2022-11-01 14:59 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 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 2022-11-02 22:28:18 UTC
Pushed to master for 22.11.

Nice work everyone, thanks!