From ba465ab2fbb8b6a5cf8b94efd0227a70020b7423 Mon Sep 17 00:00:00 2001 From: Samrat Biswas Date: Fri, 28 Nov 2025 02:34:52 +0600 Subject: [PATCH 1/3] Update SearchBar styles for improved visibility Signed-off-by: Samrat Biswas --- .../src/pages/Search/components/SearchBar.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss index f42a54e1..3dc901dd 100644 --- a/application/frontend/src/pages/Search/components/SearchBar.scss +++ b/application/frontend/src/pages/Search/components/SearchBar.scss @@ -1,10 +1,10 @@ .navbar__search { - display: none; + display: none; align-items: center; - @media (min-width: 1024px) { display: flex; } + .navbar__mobile-menu &, .mobile-search-container & { display: block !important; @@ -23,6 +23,8 @@ color: var(--muted-foreground); height: 1rem; width: 1rem; + display: block; + z-index: 2; } input { @@ -30,7 +32,7 @@ width: 16rem; background-color: rgba(var(--card-rgb), 0.5); backdrop-filter: blur(4px); - border: 1px solid rgba(var(--border-rgb), 0.5); + border: 1px solid #64748b; border-radius: var(--radius); color: var(--foreground); transition: all 0.2s ease; @@ -41,14 +43,14 @@ &:focus { outline: none; - border-color: transparent; - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; + border-color: #3b82f6; + box-shadow: 0 0 0 1px #ffffff, 0 0 0 1px #3b82f6; } } .search-error { margin-top: 0.25rem; font-size: 0.75rem; - color: #f87171; // red-400 + color: #f87171; } } From 666be591c533a54318dde26dd74b092ded97ca25 Mon Sep 17 00:00:00 2001 From: Samrat Biswas Date: Fri, 28 Nov 2025 02:43:17 +0600 Subject: [PATCH 2/3] Refactor SearchBar styles for better responsiveness Signed-off-by: Samrat Biswas --- .../src/pages/Search/components/SearchBar.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss index 3dc901dd..f42a54e1 100644 --- a/application/frontend/src/pages/Search/components/SearchBar.scss +++ b/application/frontend/src/pages/Search/components/SearchBar.scss @@ -1,10 +1,10 @@ .navbar__search { - display: none; + display: none; align-items: center; + @media (min-width: 1024px) { display: flex; } - .navbar__mobile-menu &, .mobile-search-container & { display: block !important; @@ -23,8 +23,6 @@ color: var(--muted-foreground); height: 1rem; width: 1rem; - display: block; - z-index: 2; } input { @@ -32,7 +30,7 @@ width: 16rem; background-color: rgba(var(--card-rgb), 0.5); backdrop-filter: blur(4px); - border: 1px solid #64748b; + border: 1px solid rgba(var(--border-rgb), 0.5); border-radius: var(--radius); color: var(--foreground); transition: all 0.2s ease; @@ -43,14 +41,14 @@ &:focus { outline: none; - border-color: #3b82f6; - box-shadow: 0 0 0 1px #ffffff, 0 0 0 1px #3b82f6; + border-color: transparent; + box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; } } .search-error { margin-top: 0.25rem; font-size: 0.75rem; - color: #f87171; + color: #f87171; // red-400 } } From d1aad8845b49d446761a8cabecf7b6276a878003 Mon Sep 17 00:00:00 2001 From: Samrat Biswas Date: Fri, 28 Nov 2025 02:48:20 +0600 Subject: [PATCH 3/3] Fix #643: Search icon and box now visible in navigation bar --- .../src/pages/Search/components/SearchBar.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss index f42a54e1..3dc901dd 100644 --- a/application/frontend/src/pages/Search/components/SearchBar.scss +++ b/application/frontend/src/pages/Search/components/SearchBar.scss @@ -1,10 +1,10 @@ .navbar__search { - display: none; + display: none; align-items: center; - @media (min-width: 1024px) { display: flex; } + .navbar__mobile-menu &, .mobile-search-container & { display: block !important; @@ -23,6 +23,8 @@ color: var(--muted-foreground); height: 1rem; width: 1rem; + display: block; + z-index: 2; } input { @@ -30,7 +32,7 @@ width: 16rem; background-color: rgba(var(--card-rgb), 0.5); backdrop-filter: blur(4px); - border: 1px solid rgba(var(--border-rgb), 0.5); + border: 1px solid #64748b; border-radius: var(--radius); color: var(--foreground); transition: all 0.2s ease; @@ -41,14 +43,14 @@ &:focus { outline: none; - border-color: transparent; - box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6; + border-color: #3b82f6; + box-shadow: 0 0 0 1px #ffffff, 0 0 0 1px #3b82f6; } } .search-error { margin-top: 0.25rem; font-size: 0.75rem; - color: #f87171; // red-400 + color: #f87171; } }