Collections page UI

[codemonkey800]

Closes #510

Demo

https://napari-hub-collections-page.vercel.app/collections

[liaprins-czi]

This is looking really great! There are just a couple of small things I noticed to change:

• the vertical spacing surrounding the "Collections" page title should be equal above it and below it; right now it looks like it is larger below (I think because of line-height of the texts maybe, it is creating a larger gap?)
• the vertical spacing between the bottom of the very last of the listed collections and the top of the footer should be 75px (for all pages except if there's pagination, it has it's own spacing)
• the line height of the text should be 1.5, so for the short description per collection with type size 14px, it should be 21px, but it's currently at 125% (~17.5px)

Thanks, and let me know if any questions!

[neuromusic]

breakpoints are off and resizing the window is laggy on narrower screens, but as long as we can address those issues before release, happy to see this merged :D

[codemonkey800]

This is looking really great! There are just a couple of small things I noticed to change:

• the vertical spacing surrounding the "Collections" page title should be equal above it and below it; right now it looks like it is larger below (I think because of line-height of the texts maybe, it is creating a larger gap?)
• the vertical spacing between the bottom of the very last of the listed collections and the top of the footer should be 75px (for all pages except if there's pagination, it has it's own spacing)
• the line height of the text should be 1.5, so for the short description per collection with type size 14px, it should be 21px, but it's currently at 125% (~17.5px)

Thanks, and let me know if any questions!

@liaprins-czi could you review again pls and check if above issues are fixed? thank you!!

[liaprins-czi]

Everything I noted originally (including breakpoint issue) is now fixed; looks good to me!

[richaagarwal]

How feasible would it be to move these into CSS rules in a separate file? e.g. having specific styling defined for a collection card, collection button, etc. Not sure if that is part of the "Extract this to design system" work or if there are other reasons not to do this, but might be worth considering to separate concerns & perhaps enable designers to more easily make updates.

[codemonkey800]

Ahh so for frontend we support both Tailwind and SCSS. Right now approach we're following is always use Tailwind and then SCSS if not possible. This helps us keep the resulting CSS bundle small and helps with building UIs fast

[codemonkey800]

However, we do have a growing need to share certain styles from a design system. We're working with the SDS (Science Design System) team right now to get that going but it's out of scope for this PR 🤣

[richaagarwal]

@codemonkey800 Sounds good! I'm not too familiar with Tailwind so would love an overview of how that works some time, but definitely not a blocker or pressing need.

[codemonkey800]

Sounds good, happy to give an overview of the frontend tech on the hub 😄