Unify style of search buttons

[RayBB]

Following #8963 we want to evaluate unifying the styles of the search buttons with something like cta-btn cta-btn--small cta-btn--vanilla etc.

This will potentially also require changing the text input to match the height and look nice. Maybe like the button group from bootstrap here.

Describe the problem that you'd like solved

Proposal & Constraints

Additional context

Stakeholders

[0simoo]

I'd like to work on this!

[RayBB]

@0simoo I've assigned you. Feel free to create a proof of concept that you think looks nice and we can discuss further from there.

[0simoo]

Here are some proof of concepts. Let me know what you think!

[RayBB]

@0simoo I like both of them a lot actually. A small personal preference for the 2nd one but both would be a great improvement. Can you join today's community call to share these?

If not, I'll try to share and see what people say!

[0simoo]

I should be able to attend today's community call!

[jimchamp]

Thanks @0simoo! As discussed during today's community call:

• Everybody generally seems to prefer the combined search box and button
• Search button should have a slightly darker color in order to better indicate that it is indeed a button
  • @mekarpeles suggests trying the same color as the search facet selector (pictured below)

[0simoo]

Here's the updated search box!

I'm currently adding the new style rules directly to the element in the HTML, which might be bad practice. I've tried creating a new CSS class for the new changes, but I'm having some trouble getting it to work.

[jimchamp]

Any changes that you make to a less file will need to be transpiled into CSS. You should see your changes after running the following: docker compose exec web make css

More information about this can be found here.

[0simoo]

I've made a pull request with the new designs. Let me know what you think! @jimchamp

[mekarpeles]

After decision today during design call, we'd like to move forward with a very similar design, inspired by what we already use in the header:

Instead of having "Search" be a button to the right of the input, we'll have a magnifying glass be the button within the input area.

Finally, we'd like to re-use this paradigm / component as a template for:

• the Author page (https://openlibrary.org/authors/OL107911A/George_Bernard_Shaw)
• the My Books Reading Log page (https://openlibrary.org/people/mekBot/books/want-to-read)
• the Subject page (e.g. https://openlibrary.org/subjects/biology)

For now, we've decided that this template should be different that the one in the header navigation to keep things simple. cc: @0simoo

Also, just to be clear, we're not asking for all of these changes in 1 PR, for now, this PR can be closed when we have a template that achieves the design in this comment and it's being applied to the various search pages.

[0simoo]

So I should change the designs to the magnifying glass one? I think I'm bit confused about what you mean by the template should be different than the one in the header.

[RayBB]

@0simoo what he means is create: /openlibrary/templates/search/search_bar.html

In that file put (or whatever it is): <input type="text" class="search-input" name="q" size="100" value="$q"/><input type="submit" class="search-btn" value="$_('Search')"/>

In openlibrary/templates/search/authors.html (and all the other search pages) add: $:render_template("search/search_bar")

As for the other comment:

should be different than the one in the header

^ This just means don't try to reuse the search bar we currently have here https://github.com/internetarchive/openlibrary/blob/37db01e97fafaeec1f36951050b06f836442ca71/openlibrary/templates/lib/nav_head.html#L98-L111

[0simoo]

I've made a commit to the PR. Let me know if there's anything I misunderstood or should fix!