Enhance search field with iconography
The initial search field is just a basic input box. I'd like to make it a bit more user friendly by adding both a search icon indicator (left) and clear button (right). Here's a picture of what I have in mind:
The close button should only appear once text is entered into the search field. Clicking this icon will clear the field and close the search results.
In the mobile view, the search field should be hidden by default with only the search icon visible. When the search icon is touched, the search field should be revealed, overlaying the brand to give it enough room (and perhaps even the whole header).
In order to complete this issue, we'll need both a black and white search icon SVG added to the default UI. I've attached a prototype.