fix(website): use consistent checkbox css in search filters#6495
fix(website): use consistent checkbox css in search filters#6495corneliusroemer wants to merge 1 commit into
Conversation
We used different css for segment filters and strictness checkbox. The checkbox was the only one to use DaisyUI CSS classes. Replacing with the standard pattern we use for checkboxes across search UI. Tested locally: no more jumping, consistent look. Resolves #6483
There was a problem hiding this comment.
Pull request overview
This PR updates the Search UI’s “strict” checkbox styling in the date range filter to match the Tailwind-based checkbox pattern used elsewhere, addressing the reported “jumping”/inconsistent appearance on page load (Issue #6483).
Changes:
- Replaced the DateRangeField strictness checkbox’s DaisyUI classes with the standard Tailwind checkbox classes used in other SearchPage components.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <span className='text-gray-400 text-sm mr-2'>strict</span> | ||
| <input | ||
| type='checkbox' | ||
| className='checkbox checkbox-sm text-3xl [--chkbg:white] [--chkfg:theme(colors.gray.700)] checked:border-gray-300' | ||
| className='h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 cursor-pointer' | ||
| checked={strictMode} |
|
I like avoiding the animation (and generally I think we should move away from daisy-ui, as we have been) but I actually quite like the existing style otherwise. I think this is a bit too prominent and a bit too similar to the triangles below. 
|
|
@theosanderson You'd like to keep the inconsistent styles - or you think the inconsistency is ok because it's different semantics? Or change all checkbox styles to be more similar to DaisyUI rather than Tailwind? This is current inconsistent state: 
Vs: 
|
|
I also think its nice to use the same checkbox style! I dont mind which one we choose though |
|
we have 
Similarly, for required segments it matches (black text, salient checkbox) - although this one doesn't matter so much because people won't tick it super often so it will mostly be seen in unchecked state. 
In the new version 
The checkbox, to me, is the most salient thing there - even though it's the least relevant thing for people to interact with (leaving it on strict is mostly what people will want) - so to me it's both wrong that it's so salient and also it doesn't match with the grey text. (so yeah, semantically different IMO) |
We used different css for segment filters and strictness checkbox.
The checkbox was the only one to use DaisyUI CSS classes. Replacing with the standard pattern we use for checkboxes across search UI.
Tested locally: no more jumping, consistent look.
Resolves #6483
Screenshots
Before:
After:
🚀 Preview: https://unify-checkbox-css.loculus.org