feat(frontend): add clear-field-icon to search field (#498)

* feat(frontend): add button to clear search field

Clear input field button was not visible on all devices, this replaces native ones with an svg

* refactor(search): use tailwind css for button and change svg

* refactor(search): larger click area on reset button

Co-authored-by: Jakob Ankarhem <jakob.ankarhem@jetshop.se>

src/assets/xcircle.svg

@@ -0,0 +1 @@
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

src/components/Layout/SearchInput/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import useSearchInput from '../../../hooks/useSearchInput';
 import { defineMessages, useIntl } from 'react-intl';
+import ClearButton from '../../../assets/xcircle.svg';
 
 const messages = defineMessages({
   searchPlaceholder: 'Search Movies & TV',
@@ -8,7 +9,7 @@ const messages = defineMessages({
 
 const SearchInput: React.FC = () => {
   const intl = useIntl();
-  const { searchValue, setSearchValue, setIsOpen } = useSearchInput();
+  const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
   return (
     <div className="flex-1 flex">
       <div className="w-full flex md:ml-0">
@@ -27,7 +28,8 @@ const SearchInput: React.FC = () => {
           </div>
           <input
             id="search_field"
-            className="block w-full h-full pl-8 pr-1 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
+            className="block w-full h-full pl-8 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
@@ -35,6 +37,14 @@ const SearchInput: React.FC = () => {
             onFocus={() => setIsOpen(true)}
             onBlur={() => setIsOpen(false)}
           />
+          {searchValue.length > 0 && (
+            <button
+              className="absolute inset-y-0 right-0 h-7 w-7 m-auto p-1 outline-none border-none focus:outline-none focus:border-none"
+              onClick={clear}
+            >
+              <ClearButton />
+            </button>
+          )}
         </div>
       </div>
     </div>

src/styles/globals.css

@@ -56,3 +56,7 @@ body {
 code {
   @apply px-2 py-1 bg-gray-800 rounded-md;
 }
+
+input[type='search']::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}