From c06a1a42ddca1ad608b81732cd50201f7951a990 Mon Sep 17 00:00:00 2001
From: Dhruuuv <dhruv.kumar2782@gmail.com>
Date: Sun, 19 Jul 2026 21:14:07 +0530
Subject: [PATCH 1/4] Update search bar close icons to custom gray styling

---
 frontend/src/App.css                              | 15 +++++++++++++++
 .../src/components/Navigation/Navbar/Navbar.tsx   |  6 +++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 609c22cfc..7362a70b1 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -212,3 +212,18 @@
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
 }
+
+/* Custom search input cancel button */
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 14px;
+  width: 14px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>");
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+input[type="search"]::-webkit-search-cancel-button:hover {
+  opacity: 1;
+}
diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index 53a39f9a0..624c1318b 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -1,6 +1,6 @@
 import { Input } from '@/components/ui/input';
 import { ThemeSelector } from '@/components/ThemeToggle';
-import { Search, Heart, ArrowRight } from 'lucide-react';
+import { Search, Heart, ArrowRight, X } from 'lucide-react';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectAvatar, selectName } from '@/features/onboardingSelectors';
 import { clearSearch } from '@/features/searchSlice';
@@ -134,11 +134,11 @@ export function Navbar() {
               {isSearchActive && (
                 <button
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1 -right-1 flex h-3 w-3 items-center justify-center rounded-full bg-red-600 text-[10px] leading-none text-white"
+                  className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-400 text-white hover:bg-neutral-500 transition-colors"
                   title="Close"
                   aria-label="Close"
                 >
-                  ✕
+                  <X className="h-3 w-3" />
                 </button>
               )}
             </div>

From afcecaa05db02591bfc671781db6b1de087c3513 Mon Sep 17 00:00:00 2001
From: Dhruuuv <dhruv.kumar2782@gmail.com>
Date: Sun, 19 Jul 2026 22:36:44 +0530
Subject: [PATCH 2/4] added navbar fix 'X' for fedora

---
 .../components/Navigation/Navbar/Navbar.tsx   | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index 624c1318b..fc6cf8091 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -145,18 +145,30 @@ export function Navbar() {
           )}
 
           {/* Input */}
-          <Input
-            type="search"
-            placeholder="Add to your search"
-            className="mr-2 flex-1 border-0 bg-neutral-200"
-            onFocus={() => setIsExpanded(true)}
-            onClick={() => setIsExpanded(true)}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') handleSearchSubmit();
-            }}
-          />
+          <div className="relative flex-1 mr-2 flex items-center">
+            <Input
+              type="text"
+              placeholder="Add to your search"
+              className="w-full border-0 bg-neutral-200 pr-8"
+              onFocus={() => setIsExpanded(true)}
+              onClick={() => setIsExpanded(true)}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSearchSubmit();
+              }}
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-400 text-white hover:bg-neutral-500 transition-colors"
+                title="Clear text"
+                aria-label="Clear text"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
 
           {/* FaceSearch Dialog */}
           <FaceSearchDialog />

From 11d4381615706fef8fdbb0eb813726c0345325f1 Mon Sep 17 00:00:00 2001
From: Dhruuuv <dhruv.kumar2782@gmail.com>
Date: Mon, 20 Jul 2026 23:49:35 +0530
Subject: [PATCH 3/4] minor 'X' ui change

---
 frontend/src/components/Navigation/Navbar/Navbar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index fc6cf8091..8b680dcd0 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -134,11 +134,11 @@ export function Navbar() {
               {isSearchActive && (
                 <button
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-400 text-white hover:bg-neutral-500 transition-colors"
+                  className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
                   title="Close"
                   aria-label="Close"
                 >
-                  <X className="h-3 w-3" />
+                  <X className="h-3.5 w-3.5" />
                 </button>
               )}
             </div>
@@ -161,11 +161,11 @@ export function Navbar() {
             {searchQuery && (
               <button
                 onClick={() => setSearchQuery('')}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-400 text-white hover:bg-neutral-500 transition-colors"
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
                 title="Clear text"
                 aria-label="Clear text"
               >
-                <X className="h-3 w-3" />
+                <X className="h-3.5 w-3.5" />
               </button>
             )}
           </div>

From be4a4c54e0bffba7aec37266ea58edde94717d9a Mon Sep 17 00:00:00 2001
From: Dhruuuv <dhruv.kumar2782@gmail.com>
Date: Tue, 21 Jul 2026 19:46:11 +0530
Subject: [PATCH 4/4] Added coderabbiit fix

---
 frontend/src/App.css                                 | 12 ++----------
 frontend/src/components/Navigation/Navbar/Navbar.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7362a70b1..c402b8407 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -213,17 +213,9 @@
   user-select: none; /* Standard */
 }
 
-/* Custom search input cancel button */
+/* Hide native search cancel button */
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   appearance: none;
-  height: 14px;
-  width: 14px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>");
-  cursor: pointer;
-  opacity: 0.8;
-}
-
-input[type="search"]::-webkit-search-cancel-button:hover {
-  opacity: 1;
+  display: none;
 }
diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index 8b680dcd0..d351f8017 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -133,8 +133,9 @@ export function Navbar() {
               />
               {isSearchActive && (
                 <button
+                  type="button"
                   onClick={() => dispatch(clearSearch())}
-                  className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                  className="text-muted-foreground hover:text-foreground absolute -top-1.5 -right-1.5 flex h-4 w-4 cursor-pointer items-center justify-center transition-colors"
                   title="Close"
                   aria-label="Close"
                 >
@@ -145,9 +146,9 @@ export function Navbar() {
           )}
 
           {/* Input */}
-          <div className="relative flex-1 mr-2 flex items-center">
+          <div className="relative mr-2 flex flex-1 items-center">
             <Input
-              type="text"
+              type="search"
               placeholder="Add to your search"
               className="w-full border-0 bg-neutral-200 pr-8"
               onFocus={() => setIsExpanded(true)}
@@ -160,8 +161,9 @@ export function Navbar() {
             />
             {searchQuery && (
               <button
+                type="button"
                 onClick={() => setSearchQuery('')}
-                className="absolute right-2.5 top-1/2 -translate-y-1/2 flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-2.5 flex h-4 w-4 -translate-y-1/2 cursor-pointer items-center justify-center transition-colors"
                 title="Clear text"
                 aria-label="Clear text"
               >