From b9696a91eff91c48a5b381e737f6cecdf2476121 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 3 Mar 2025 14:07:39 +0500
Subject: [PATCH] theme: fix button hover colors

---
 apps/web/src/components/route-container/index.tsx |  2 --
 packages/theme/src/theme/variants/button.ts       | 15 +++++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/route-container/index.tsx b/apps/web/src/components/route-container/index.tsx
index e3eb009a5..932b37010 100644
--- a/apps/web/src/components/route-container/index.tsx
+++ b/apps/web/src/components/route-container/index.tsx
@@ -94,14 +94,12 @@ function Header(props: RouteContainerProps) {
         data-test-id="search-input"
         id="search"
         name="search"
-        variant="clean"
         type="text"
         sx={{
           bg: "background",
           m: 0,
           mr: 0,
 
-          border: "1px solid var(--border)",
           borderRadius: "large",
           gap: 0
         }}
diff --git a/packages/theme/src/theme/variants/button.ts b/packages/theme/src/theme/variants/button.ts
index db2ff7ccd..b26f0f568 100644
--- a/packages/theme/src/theme/variants/button.ts
+++ b/packages/theme/src/theme/variants/button.ts
@@ -51,12 +51,12 @@ export const createButtonVariant = (
   transition: "transform 50ms ease-out",
   ":hover:not(:disabled):not(:active)": {
     bg: background,
-    filter: "brightness(90%)",
+    // filter: "brightness(90%)",
     ...states?.hover
   },
   ":active:not(:disabled)": {
     bg: background,
-    filter: "brightness(85%)",
+    // filter: "brightness(85%)",
     transform: "scale(0.98) !important",
     ...states?.hover,
     ...states?.active
@@ -70,11 +70,18 @@ export const createButtonVariant = (
   }
 });
 
-const primary = createButtonVariant();
+const primary = createButtonVariant("transparent", "paragraph", {
+  hover: { bg: "hover" },
+  active: { bg: "hover" }
+});
 
 const secondary: ThemeUIStyleObject = createButtonVariant(
   "background-secondary",
-  "paragraph"
+  "paragraph",
+  {
+    hover: { bg: "hover-secondary" },
+    active: { bg: "hover-secondary" }
+  }
 );
 
 const accent = createButtonVariant("accent", "accentForeground", {