From 1dc64579bbf24569460ae2f7cf8c90963545eba9 Mon Sep 17 00:00:00 2001
From: 230417 <230417@epvc.pt>
Date: Mon, 4 May 2026 09:28:16 +0100
Subject: [PATCH] feat: redesign filter dropdown with custom label and hidden
 native select for improved UI consistency

---
 web/src/pages/Explore.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index a9a3558..a0c6dcc 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -88,8 +88,15 @@ export default function Explore() {
             <div className="h-10 w-px bg-slate-200 hidden md:block" />
 
             <div className="px-2 sm:px-4 py-2 w-full md:w-auto flex-shrink-0">
-              <div className="relative group w-full md:w-auto">
-                <ListFilter size={18} className="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none" />
+              <div className="relative group flex items-center h-10 sm:h-12 w-full md:w-auto rounded-xl sm:rounded-2xl bg-slate-100 hover:bg-slate-200/80 px-3 sm:px-4 transition-all focus-within:ring-2 focus-within:ring-indigo-500/30 shadow-sm cursor-pointer">
+                <ListFilter size={18} className="text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none shrink-0" />
+                
+                <span className="flex-1 text-center px-2 text-xs sm:text-sm font-bold text-slate-700 pointer-events-none whitespace-nowrap">
+                  {filter === 'top' ? 'Top Avaliadas' : sortBy === 'servicos' ? 'Mais Serviços' : 'Todas (Melhor avaliação)'}
+                </span>
+
+                <ChevronDown size={16} className="text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none shrink-0" />
+
                 <select
                   value={`${filter}-${sortBy}`}
                   onChange={(e) => {
@@ -97,14 +104,12 @@ export default function Explore() {
                     setFilter(newFilter as 'todas' | 'top');
                     setSortBy(newSort as 'avaliacao' | 'servicos');
                   }}
-                  style={{ WebkitAppearance: 'none', MozAppearance: 'none', backgroundImage: 'none' }}
-                  className="block h-10 sm:h-12 w-full md:w-auto appearance-none rounded-xl sm:rounded-2xl bg-slate-100 hover:bg-slate-200/80 border-none pl-10 sm:pl-11 pr-10 sm:pr-11 text-xs sm:text-sm font-bold text-slate-700 transition-all focus:ring-2 focus:ring-indigo-500/30 shadow-sm cursor-pointer m-0"
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                 >
                   <option value="todas-avaliacao">Todas (Melhor avaliação)</option>
                   <option value="top-avaliacao">Top Avaliadas</option>
                   <option value="todas-servicos">Mais Serviços</option>
                 </select>
-                <ChevronDown size={16} className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 text-slate-400 group-hover:text-indigo-500 transition-colors pointer-events-none" />
               </div>
             </div>
           </div>