fix(ecommerce): quita el doble ring de foco del buscador
El Input base (components/ui/input.tsx) trae focus:border-cyan-500 y focus:ring-4 focus:ring-cyan-300/30 hardcodeados. La correccion anterior del buscador solo anulaba focus-visible:ring-0, una variante distinta a :focus -- el ring cian del componente base seguia disparandose al hacer click, superpuesto al ring amarillo del wrapper nuevo (dos anillos visibles a la vez, reportado por el usuario en produccion tras el deploy de v1.0.190). focus:border-0 focus:ring-0 anula correctamente ambas utilidades del Input base via tailwind-merge (mismo variant+propiedad).
This commit is contained in:
1 parent
260c7076e2
commit
d536b0bb8b
1 file changed
+1
-1
@@ -55,7 +55,7 @@ export function PredictiveSearch() {
|
|||||||
return (
|
return (
|
||||||
<form onSubmit={submit} className="relative w-full">
|
<form onSubmit={submit} className="relative w-full">
|
||||||
<div className="flex items-center rounded-full border-2 border-slate-200 bg-white pl-5 pr-1.5 shadow-sm transition focus-within:border-ari-marino focus-within:ring-4 focus-within:ring-ari-coral-claro/30">
|
<div className="flex items-center rounded-full border-2 border-slate-200 bg-white pl-5 pr-1.5 shadow-sm transition focus-within:border-ari-marino focus-within:ring-4 focus-within:ring-ari-coral-claro/30">
|
||||||
<Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[48px] border-0 bg-transparent p-0 shadow-none focus-visible:ring-0" />
|
<Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Busca juguetes, mochilas, personajes…" className="h-[48px] border-0 bg-transparent p-0 shadow-none focus:border-0 focus:ring-0" />
|
||||||
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
|
||||||
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">
|
||||||
<Search className="size-4.5" />
|
<Search className="size-4.5" />
|
||||||
|
|||||||
Reference in new issue
Block a user