From 630fabc32897f6b4ef8b38168757293cee1eb2c8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 10 Nov 2023 19:38:19 -0300
Subject: [PATCH] style(StorePage): refactor button element to improve
 readability and maintainability fix(StorePage): fix className prop on Button
 component to correctly apply error styling fix(StorePage): fix className prop
 on IconComponent to correctly apply loading animation fix(StorePage): fix
 onClick event on IconComponent to correctly update searchText state

---
 src/frontend/src/pages/StorePage/index.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index aad9211db..7e0d19d1d 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -158,16 +158,17 @@ export default function StorePage(): JSX.Element {
                   }}
                   value={inputText}
                 />
-                <IconComponent
-                  name={loading ? "Loader2" : "Search"}
+                <button
+                  className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
                   onClick={() => {
                     setSearchText(inputText);
                   }}
-                  className={
-                    "absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground" +
-                    (loading ? " animate-spin" : "")
-                  }
-                />
+                >
+                  <IconComponent
+                    name={loading ? "Loader2" : "Search"}
+                    className={loading ? " animate-spin" : ""}
+                  />
+                </button>
               </div>
               <div className="ml-4 flex w-full gap-2 border-b border-border">
                 <button