feat(design): redesign of projects search bar

[vfried]

This PR addresses ONLY the search bar

Before:

After:

Collapsed Before:

Collapsed After:

/deploy

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-1281.dev.renku.ch

[ciyer]

This looks good! I see that you have deviated from the design document in a few places, and I think most make sense, but I wanted clarify a few things illustrated by this image here:

• What font weight should we use for "Renku Projects"? Here it is regular/400, the designer specified medium/500, but I think demi-bold/600 also looks good.
• Should we say "Filter by..." or "Search..." I lean to "Search" because it may be less technically correct, but I think it is simpler to understand
• I think we should try to emulate the look of the "Order by: " selection that comes from the designer.
• If you mouse over the interactive widgets of the search bar like the search input field, the search domain dropdown or the order by dropdown, they become larger (I think padding or something increases), disturbing the layout

[ciyer]

This should just be Calcutta, sans-serif. That makes it possible for css to select different weights: normal/400, medium (I think 500), bold/700, etc.

[vfried]

Hey, you are right about this, i tried this but for some reason it didn't work, but it works now so i changed this to

$font-family-base: 'Calcutta', sans-serif;

• Filter vs Search should be search
• Renku Projects font weight... in my opinion there is not much difference, i would like to make it the same for all text in that H* so that it's consistent. For now i left things to what bootstrap sets and i like it.
• Order by changed to look like luca designed.

[vfried]

I'm not very experienced with fonts, i will leave them like this for now and we could overwrite bootstraps values when we know what we want, maybe you could do it if you know better. Otherwise, i will give it a try.

Something else to consider is that Luca sent us the fonts for Regular and Medium but there are actually versions of the fonts for more weights the problem is we only have them in woff (i think) and we would need to have them also in eot, ttf and svc... this can be done with online converters if we would want to have the font in all the weights, I'm just not sure how bootstrap will use them... i tried to read about this but couldn't find anything in the documentation about it.

[ciyer]

This looks very good. The design is starting to come together! 🚀

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.