input / search input styling updates

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5386

Description (What does it do?)

This PR makes changes to our Input element to match some updates from Figma. We now have 4 sizes of Input:

• small
• medium
• large
• hero

The general style of the Input control was updated to match the changes to the search input, and SearchInput was moved into ol-components. The SearchInput component implements Input at the hero size on the home page and the large size on the search page and channel pages.

Screenshots (if appropriate):

How can this be tested?

• Spin up mit-learn on this branch
• Make sure you have some data populated in your database and a search index generated
• Visit http://localhost:8062/search/
• Verify that the search box behaves as expected and is properly sized
• Visit http://localhost:8062/topics/ and choose a topic by clicking on it
• On the topic page, verify that the search box behaves as expected and is properly sized
• Visit the storybook page for the Input element and verify that everything looks right and matches Figma: https://storybook.learn.c4103.com/?path=/story/smoot-design-input--adornments

[ChristopherChudzicki]

This looks good. I did make a suggestion that I think we should do to keep the size styles more maintainable going forward. Let me know what you think.

[ChristopherChudzicki]

Removing the button padding certainly simplifies stuff 👍 Width is better.

I do worry that we will have a hard time keeping the mobile styles in sync. E.g., if someone updates the medium style, will they also remember to update large + breakpoint small?

I do think it would be better to put all the size-related styles into a sizeStyles, and re-use that at the smaller breakpoint (like what we do for buttons).

I think this does it: cg/search-box-updates-2...cg/search-box-updates-2-cc-suggestion#diff-11bf431b91ecb2c9d080ba7edb0f8f9518c9bed7b5fe9cf6154ecb1a835d5ac5L125

Note: In that diff, I made responsive optional and defaults to undefined ~ false. We could default it to "true" (which this PR effectively does) but I think we should consult Steve about that.

[ChristopherChudzicki]

👍 👍