Merge pull request #825 from RyloRiz/dev

Created an 'x' button to clear search query

src/components/form/SearchBar.tsx

@@ -9,7 +9,7 @@ import { TextInputControl } from "../text-inputs/TextInputControl";
 export interface SearchBarProps {
   placeholder?: string;
   onChange: (value: string, force: boolean) => void;
-  onUnFocus: () => void;
+  onUnFocus: (newSearch?: string) => void;
   value: string;
 }
 
@@ -57,6 +57,20 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
             className="w-full flex-1 bg-transparent px-4 py-4 pl-12 text-search-text placeholder-search-placeholder focus:outline-none sm:py-4 sm:pr-2"
             placeholder={props.placeholder}
           />
+
+          {props.value.length > 0 && (
+            <div
+              onClick={() => {
+                props.onUnFocus("");
+                if (ref && typeof ref !== "function") {
+                  ref.current?.focus();
+                }
+              }}
+              className="cursor-pointer hover:text-white  absolute bottom-0 right-2 top-0 flex justify-center my-auto h-10 w-10 items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition-[transform,background-color] duration-200"
+            >
+              <Icon icon={Icons.X} className="transition-colors duration-200" />
+            </div>
+          )}
         </Flare.Child>
       </Flare.Base>
     );

src/hooks/useSearchQuery.ts

@@ -33,8 +33,8 @@ export function useSearchQuery(): [
     );
   };
 
-  const onUnFocus = () => {
-    updateParams(search, true);
+  const onUnFocus = (newSearch?: string) => {
+    updateParams(newSearch ?? search, true);
   };
 
   return [search, updateParams, onUnFocus];

themes/default.ts

@@ -160,6 +160,7 @@ export const defaultTheme = {
       // search bar
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100,

themes/list/blue.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/gray.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/red.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/teal.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100