From 2a93804fbd8ea216f102c77ca98655a4d4f9e81d Mon Sep 17 00:00:00 2001
From: RyloRiz <91710711+RyloRiz@users.noreply.github.com>
Date: Sat, 27 Jan 2024 21:32:04 -0800
Subject: [PATCH] Restyled clear button & visibility

---
 src/components/form/SearchBar.tsx | 20 +++++++++++++++-----
 themes/default.ts                 |  1 +
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx
index bf994c7b..71834a8a 100644
--- a/src/components/form/SearchBar.tsx
+++ b/src/components/form/SearchBar.tsx
@@ -1,5 +1,5 @@
 import c from "classnames";
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 
 import { Flare } from "@/components/utils/Flare";
 
@@ -20,7 +20,8 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
 
     function setSearch(value: string) {
       props.onChange(value, false);
-      clearButtonRef.current!.hidden = value.length >= 0;
+      const opacity = value.length > 0 ? "1" : "0";
+      clearButtonRef.current!.style.opacity = opacity;
     }
 
     function refocusSearch() {
@@ -32,6 +33,12 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
       }
     }
 
+    useEffect(() => {
+      if (ref && typeof ref !== "function") {
+        setSearch(ref.current?.value || "");
+      }
+    });
+
     return (
       <Flare.Base
         className={c({
@@ -73,11 +80,14 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
             ref={clearButtonRef}
             onClick={() => {
               setSearch("");
-              setTimeout(() => refocusSearch(), 100);
+              setTimeout(() => refocusSearch(), 10);
             }}
-            className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon"
+            className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100"
           >
-            <Icon icon={Icons.X} />
+            <Icon
+              icon={Icons.X}
+              className="group-hover/clear:text-white transition duration-100"
+            />
           </div>
         </Flare.Child>
       </Flare.Base>
diff --git a/themes/default.ts b/themes/default.ts
index bd31b3ff..c4495a0e 100644
--- a/themes/default.ts
+++ b/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,