RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(selects): standardizes blue hover on filters (admin/patients/doctors/appointments)

Browse Source
This commit is contained in:
M-Gabrielly 2025-11-13 20:53:42 -03:00
parent db1774beda
commit 44f546a65e
4 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
susconecta/app/(main-routes)/consultas/page.tsx
View File

@ -519,7 +519,7 @@ export default function ConsultasPage() {
{/* Linha 2: Selects responsivos */} {/* Linha 2: Selects responsivos */}
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
<Select onValueChange={(v) => { setSelectedStatus(String(v)); }}> <Select onValueChange={(v) => { setSelectedStatus(String(v)); }}>
<SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm select-hover-blue"> <SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm">
<SelectValue placeholder="Status" /> <SelectValue placeholder="Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -693,7 +693,7 @@ export default function ConsultasPage() {
<select <select
value={itemsPerPage} value={itemsPerPage}
onChange={(e) => setItemsPerPage(Number(e.target.value))} onChange={(e) => setItemsPerPage(Number(e.target.value))}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value={10}>10</option> <option value={10}>10</option>
<option value={15}>15</option> <option value={15}>15</option>

10
susconecta/app/(main-routes)/doutores/page.tsx
View File

@ -534,7 +534,7 @@ export default function DoutoresPage() {
aria-label="Ordenar por" aria-label="Ordenar por"
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)} onChange={(e) => setSortBy(e.target.value as any)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="name_asc">Nome A–Z</option> <option value="name_asc">Nome A–Z</option>
<option value="name_desc">Nome Z–A</option> <option value="name_desc">Nome Z–A</option>
@ -546,7 +546,7 @@ export default function DoutoresPage() {
aria-label="Filtrar por especialidade" aria-label="Filtrar por especialidade"
value={specialtyFilter} value={specialtyFilter}
onChange={(e) => setSpecialtyFilter(e.target.value)} onChange={(e) => setSpecialtyFilter(e.target.value)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="">Todas espec.</option> <option value="">Todas espec.</option>
{specialtyOptions.map((sp) => ( {specialtyOptions.map((sp) => (
@ -558,7 +558,7 @@ export default function DoutoresPage() {
aria-label="Filtrar por estado" aria-label="Filtrar por estado"
value={stateFilter} value={stateFilter}
onChange={(e) => { setStateFilter(e.target.value); setCityFilter(""); }} onChange={(e) => { setStateFilter(e.target.value); setCityFilter(""); }}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="">Todos UF</option> <option value="">Todos UF</option>
{stateOptions.map((uf) => ( {stateOptions.map((uf) => (
@ -570,7 +570,7 @@ export default function DoutoresPage() {
aria-label="Filtrar por cidade" aria-label="Filtrar por cidade"
value={cityFilter} value={cityFilter}
onChange={(e) => setCityFilter(e.target.value)} onChange={(e) => setCityFilter(e.target.value)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="">Todas cidades</option> <option value="">Todas cidades</option>
{cityOptions.map((c) => ( {cityOptions.map((c) => (
@ -764,7 +764,7 @@ export default function DoutoresPage() {
<select <select
value={itemsPerPage} value={itemsPerPage}
onChange={(e) => setItemsPerPage(Number(e.target.value))} onChange={(e) => setItemsPerPage(Number(e.target.value))}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value={10}>10</option> <option value={10}>10</option>
<option value={15}>15</option> <option value={15}>15</option>

8
susconecta/app/(main-routes)/pacientes/page.tsx
View File

@ -297,7 +297,7 @@ export default function PacientesPage() {
aria-label="Ordenar por" aria-label="Ordenar por"
value={sortBy} value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)} onChange={(e) => setSortBy(e.target.value as any)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="name_asc">A–Z</option> <option value="name_asc">A–Z</option>
<option value="name_desc">Z–A</option> <option value="name_desc">Z–A</option>
@ -313,7 +313,7 @@ export default function PacientesPage() {
setStateFilter(e.target.value); setStateFilter(e.target.value);
setCityFilter(""); setCityFilter("");
}} }}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="">Estado</option> <option value="">Estado</option>
{stateOptions.map((uf) => ( {stateOptions.map((uf) => (
@ -326,7 +326,7 @@ export default function PacientesPage() {
aria-label="Filtrar por cidade" aria-label="Filtrar por cidade"
value={cityFilter} value={cityFilter}
onChange={(e) => setCityFilter(e.target.value)} onChange={(e) => setCityFilter(e.target.value)}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value="">Cidade</option> <option value="">Cidade</option>
{cityOptions.map((c) => ( {cityOptions.map((c) => (
@ -470,7 +470,7 @@ export default function PacientesPage() {
<select <select
value={itemsPerPage} value={itemsPerPage}
onChange={(e) => setItemsPerPage(Number(e.target.value))} onChange={(e) => setItemsPerPage(Number(e.target.value))}
className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary select-hover-blue cursor-pointer" className="h-8 sm:h-9 rounded-md border border-input bg-background px-2 sm:px-3 py-1 text-xs sm:text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-primary hover:border-primary transition-colors cursor-pointer"
> >
<option value={10}>10</option> <option value={10}>10</option>
<option value={15}>15</option> <option value={15}>15</option>

3
susconecta/app/globals.css
View File

@ -177,8 +177,9 @@ button[aria-label="Close"],
@apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200; @apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200;
} }
/* Hover padronizado para selects de filtro */ /* Hover padronizado para selects de filtro - apenas ao passar o mouse */
.select-hover-blue { .select-hover-blue {
background-color: transparent;
@apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200; @apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200;
} }