feat: add standardized select hover styles with blue-500
This commit is contained in:
parent
f885ee485d
commit
db1774beda
@ -519,7 +519,7 @@ export default function ConsultasPage() {
|
||||
{/* Linha 2: Selects responsivos */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<Select onValueChange={(v) => { setSelectedStatus(String(v)); }}>
|
||||
<SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm">
|
||||
<SelectTrigger className="h-8 sm:h-9 text-xs sm:text-sm select-hover-blue">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -693,7 +693,7 @@ export default function ConsultasPage() {
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
|
||||
@ -534,7 +534,7 @@ export default function DoutoresPage() {
|
||||
aria-label="Ordenar por"
|
||||
value={sortBy}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="name_asc">Nome A–Z</option>
|
||||
<option value="name_desc">Nome Z–A</option>
|
||||
@ -546,7 +546,7 @@ export default function DoutoresPage() {
|
||||
aria-label="Filtrar por especialidade"
|
||||
value={specialtyFilter}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="">Todas espec.</option>
|
||||
{specialtyOptions.map((sp) => (
|
||||
@ -558,7 +558,7 @@ export default function DoutoresPage() {
|
||||
aria-label="Filtrar por estado"
|
||||
value={stateFilter}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="">Todos UF</option>
|
||||
{stateOptions.map((uf) => (
|
||||
@ -570,7 +570,7 @@ export default function DoutoresPage() {
|
||||
aria-label="Filtrar por cidade"
|
||||
value={cityFilter}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="">Todas cidades</option>
|
||||
{cityOptions.map((c) => (
|
||||
@ -764,7 +764,7 @@ export default function DoutoresPage() {
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
|
||||
@ -297,7 +297,7 @@ export default function PacientesPage() {
|
||||
aria-label="Ordenar por"
|
||||
value={sortBy}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="name_asc">A–Z</option>
|
||||
<option value="name_desc">Z–A</option>
|
||||
@ -313,7 +313,7 @@ export default function PacientesPage() {
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="">Estado</option>
|
||||
{stateOptions.map((uf) => (
|
||||
@ -326,7 +326,7 @@ export default function PacientesPage() {
|
||||
aria-label="Filtrar por cidade"
|
||||
value={cityFilter}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value="">Cidade</option>
|
||||
{cityOptions.map((c) => (
|
||||
@ -470,7 +470,7 @@ export default function PacientesPage() {
|
||||
<select
|
||||
value={itemsPerPage}
|
||||
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 hover:border-primary transition-colors 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 select-hover-blue cursor-pointer"
|
||||
>
|
||||
<option value={10}>10</option>
|
||||
<option value={15}>15</option>
|
||||
|
||||
@ -167,3 +167,18 @@ button[aria-label="Close"],
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Classe padronizada de hover azul - consistente em todos os modos (claro/escuro SO e app) */
|
||||
.hover-primary-blue {
|
||||
@apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-all duration-200;
|
||||
}
|
||||
|
||||
/* Hover simples para ícones e botões menores */
|
||||
.hover-primary-blue-soft {
|
||||
@apply hover:bg-blue-500/10 hover:text-blue-500 transition-colors duration-200;
|
||||
}
|
||||
|
||||
/* Hover padronizado para selects de filtro */
|
||||
.select-hover-blue {
|
||||
@apply hover:bg-blue-500 hover:text-white hover:border-blue-500 transition-colors duration-200;
|
||||
}
|
||||
|
||||
|
||||
@ -693,10 +693,10 @@ export default function PacientePage() {
|
||||
const [tipoConsulta, setTipoConsulta] = useState<'teleconsulta' | 'presencial'>('teleconsulta')
|
||||
const [especialidade, setEspecialidade] = useState('cardiologia')
|
||||
const [localizacao, setLocalizacao] = useState('')
|
||||
const hoverPrimaryClass = "transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97]"
|
||||
const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-[#2563eb]/60 active:scale-[0.97] bg-[#2563eb] text-white hover:bg-[#2563eb] hover:text-white"
|
||||
const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-[#2563eb] border border-[#2563eb]/30 hover:bg-slate-100 hover:text-[#2563eb] dark:bg-white/5 dark:text-white dark:hover:bg-white/10 dark:border-white/20"
|
||||
const hoverPrimaryIconClass = "rounded-xl bg-white text-[#1e293b] border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] transition duration-200 hover:bg-[#2563eb] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2563eb] dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none dark:hover:bg-[#2563eb] dark:hover:text-white"
|
||||
const hoverPrimaryClass = "hover-primary-blue focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97]"
|
||||
const activeToggleClass = "w-full transition duration-200 focus-visible:ring-2 focus-visible:ring-blue-500/60 active:scale-[0.97] bg-blue-500 text-white hover:bg-blue-500 hover:text-white"
|
||||
const inactiveToggleClass = "w-full transition duration-200 bg-slate-50 text-blue-500 border border-blue-500/30 hover:bg-blue-50 hover:text-blue-500 dark:bg-white/5 dark:text-white dark:hover:bg-blue-500/20 dark:border-white/20"
|
||||
const hoverPrimaryIconClass = "rounded-xl bg-white text-slate-900 border border-black/10 shadow-[0_2px_8px_rgba(0,0,0,0.03)] hover-primary-blue focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-slate-800 dark:text-slate-100 dark:border-white/10 dark:shadow-none"
|
||||
const today = new Date(); today.setHours(0, 0, 0, 0);
|
||||
const selectedDate = new Date(currentDate); selectedDate.setHours(0, 0, 0, 0);
|
||||
const isSelectedDateToday = selectedDate.getTime() === today.getTime()
|
||||
|
||||
@ -809,13 +809,13 @@ const ProfissionalPage = () => {
|
||||
</div>
|
||||
|
||||
{/* Navegação de Data - Responsiva */}
|
||||
<div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-blue-50 rounded-lg dark:bg-muted">
|
||||
<div className="flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6 p-2 sm:p-3 md:p-4 bg-muted rounded-lg">
|
||||
<div className="flex items-center gap-1.5 sm:gap-2 md:gap-4 flex-wrap">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigateDate('prev')}
|
||||
className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
|
||||
className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
@ -826,7 +826,7 @@ const ProfissionalPage = () => {
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigateDate('next')}
|
||||
className="p-1.5 sm:p-2 hover:bg-primary! hover:text-white! cursor-pointer transition-colors h-auto"
|
||||
className="p-1.5 sm:p-2 hover-primary-blue cursor-pointer h-auto"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
@ -1027,7 +1027,7 @@ const ProfissionalPage = () => {
|
||||
variant={selectedRange === 'todos' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedRange('todos')}
|
||||
className="hover:bg-primary! hover:text-white! transition-colors"
|
||||
className="hover-primary-blue"
|
||||
>
|
||||
Todos
|
||||
</Button>
|
||||
@ -1035,7 +1035,7 @@ const ProfissionalPage = () => {
|
||||
variant={selectedRange === 'semana' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedRange('semana')}
|
||||
className="hover:bg-primary! hover:text-white! transition-colors"
|
||||
className="hover-primary-blue"
|
||||
>
|
||||
Semana
|
||||
</Button>
|
||||
@ -1043,7 +1043,7 @@ const ProfissionalPage = () => {
|
||||
variant={selectedRange === 'mes' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSelectedRange('mes')}
|
||||
className="hover:bg-primary! hover:text-white! transition-colors"
|
||||
className="hover-primary-blue"
|
||||
>
|
||||
Mês
|
||||
</Button>
|
||||
@ -1204,7 +1204,7 @@ const ProfissionalPage = () => {
|
||||
<Button size="sm" onClick={doSearch} disabled={searching}>
|
||||
Buscar
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={handleClear} className="hover:bg-primary! hover:text-white! transition-colors">
|
||||
<Button size="sm" variant="ghost" onClick={handleClear} className="hover-primary-blue">
|
||||
Limpar
|
||||
</Button>
|
||||
</div>
|
||||
@ -1503,7 +1503,7 @@ const ProfissionalPage = () => {
|
||||
onClick={() => {
|
||||
router.push(`/laudos/${laudo.id}`);
|
||||
}}
|
||||
className="flex items-center gap-1 hover:bg-primary! hover:text-white! transition-colors"
|
||||
className="flex items-center gap-1 hover-primary-blue"
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
Ver Laudo
|
||||
@ -2308,16 +2308,16 @@ const ProfissionalPage = () => {
|
||||
title="Cor da fonte"
|
||||
/>
|
||||
{/* Alinhamento */}
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover:bg-primary/10 hover:text-primary"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-left')} title="Alinhar à esquerda" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-center')} title="Centralizar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="4" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="3" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-right')} title="Alinhar à direita" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="6" y="4" width="8" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('align-justify')} title="Justificar" className="px-1 hover-primary-blue-soft"><svg width="16" height="16" fill="none"><rect x="2" y="4" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor"/><rect x="2" y="10" width="12" height="2" rx="1" fill="currentColor"/></svg></Button>
|
||||
{/* Listas */}
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover:bg-primary/10 hover:text-primary">1.</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover:bg-primary/10 hover:text-primary">•</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('list-ol')} title="Lista numerada" className="px-1 hover-primary-blue-soft">1.</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('list-ul')} title="Lista com marcadores" className="px-1 hover-primary-blue-soft">•</Button>
|
||||
{/* Recuo */}
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover:bg-primary/10 hover:text-primary">→</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover:bg-primary/10 hover:text-primary">←</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('indent')} title="Aumentar recuo" className="px-1 hover-primary-blue-soft">→</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => formatText('outdent')} title="Diminuir recuo" className="px-1 hover-primary-blue-soft">←</Button>
|
||||
{/* Desfazer/Refazer */}
|
||||
<Button variant="outline" size="sm" onClick={handleUndo} title="Desfazer" className="px-1 hover:bg-primary/10 hover:text-primary">↺</Button>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
|
||||
@ -43,14 +43,14 @@ export function PagesHeader({ title = "", subtitle = "" }: { title?: string, sub
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="icon" className="hover:bg-primary! hover:text-white! transition-colors">
|
||||
<Button variant="ghost" size="icon" className="hover-primary-blue">
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<SimpleThemeToggle />
|
||||
<Button
|
||||
variant="outline"
|
||||
className="text-primary border-primary bg-transparent shadow-sm shadow-blue-500/10 border border-blue-200 hover:bg-blue-50 dark:shadow-none dark:border-primary dark:hover:bg-primary dark:hover:text-primary-foreground"
|
||||
className="text-blue-500 border-blue-500 bg-transparent shadow-sm shadow-blue-500/10 border hover-primary-blue"
|
||||
asChild
|
||||
></Button>
|
||||
{/* Avatar Dropdown Simples */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user