admtracksteel/tracksteel_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compactar botoes voltar e completo para ampliar visibilidade da OF

Browse Source
This commit is contained in:
Marcos Reifonas
2026-09-22 01:28:07 +00:00
parent 6eb04ac79e
commit 78f14672f8
1 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/smart/components/SmartHeader.tsx
+17 -18
View File
@@ -47,9 +47,9 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
return ( return (
<header className="sticky top-0 z-50 w-full bg-slate-900 border-b border-slate-800 text-white shadow-md"> <header className="sticky top-0 z-50 w-full bg-slate-900 border-b border-slate-800 text-white shadow-md">
<div className="max-w-4xl mx-auto px-3 py-2.5 flex items-center justify-between gap-2"> <div className="max-w-4xl mx-auto px-2.5 sm:px-3 py-2 flex items-center justify-between gap-1.5 sm:gap-2">
{/* Lado Esquerdo: Botão Voltar ou Logo/Status */} {/* Lado Esquerdo: Botão Voltar ou Logo/Status */}
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1">
{mostrarVoltar && onVoltar ? ( {mostrarVoltar && onVoltar ? (
<Button <Button
variant="ghost" variant="ghost"
@@ -58,9 +58,9 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
smartAudio.playClick(); smartAudio.playClick();
onVoltar(); onVoltar();
}} }}
className="h-11 px-3 bg-slate-800/80 hover:bg-slate-700 text-slate-100 rounded-xl border border-slate-700 active:scale-95 text-sm font-bold flex items-center gap-1.5" className="h-10 px-2 sm:px-2.5 bg-slate-800/90 hover:bg-slate-700 text-slate-100 rounded-xl border border-slate-700 active:scale-95 text-xs sm:text-sm font-bold flex items-center gap-1 shrink-0"
> >
<ArrowLeft className="h-5 w-5 text-amber-400" /> <ArrowLeft className="h-4 w-4 text-amber-400 shrink-0" />
<span>Voltar</span> <span>Voltar</span>
</Button> </Button>
) : ( ) : (
@@ -69,12 +69,12 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span> <span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
</span> </span>
<div className="leading-tight"> <div className="leading-tight min-w-0 flex-1">
<h1 className="text-base font-black tracking-wider text-amber-400 uppercase"> <h1 className="text-sm sm:text-base font-black tracking-wider text-amber-400 uppercase truncate">
{titulo} {titulo}
</h1> </h1>
{subtitulo && ( {subtitulo && (
<p className="text-[11px] text-slate-300 font-medium truncate max-w-[180px] sm:max-w-xs"> <p className="text-[11px] sm:text-xs text-slate-300 font-medium truncate">
{subtitulo} {subtitulo}
</p> </p>
)} )}
@@ -83,12 +83,12 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
)} )}
{mostrarVoltar && ( {mostrarVoltar && (
<div className="leading-tight truncate"> <div className="leading-tight min-w-0 flex-1">
<h1 className="text-sm sm:text-base font-black text-slate-100 uppercase truncate"> <h1 className="text-xs sm:text-sm font-black text-slate-100 uppercase truncate">
{titulo} {titulo}
</h1> </h1>
{subtitulo && ( {subtitulo && (
<p className="text-[11px] text-amber-400 font-semibold truncate"> <p className="text-[11px] sm:text-xs text-amber-400 font-extrabold tracking-wide truncate">
{subtitulo} {subtitulo}
</p> </p>
)} )}
@@ -97,19 +97,19 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
</div> </div>
{/* Lado Direito: Ações de Controle e Comutação */} {/* Lado Direito: Ações de Controle e Comutação */}
<div className="flex items-center gap-1.5 shrink-0"> <div className="flex items-center gap-1 sm:gap-1.5 shrink-0">
{/* Controle de Som / Áudio */} {/* Controle de Som / Áudio */}
<button <button
type="button" type="button"
onClick={handleToggleSound} onClick={handleToggleSound}
className={`h-10 w-10 rounded-xl flex items-center justify-center border transition-all active:scale-90 ${ className={`h-10 w-8 sm:w-9 rounded-xl flex items-center justify-center border transition-all active:scale-90 ${
soundOn soundOn
? 'bg-emerald-950/60 border-emerald-600/50 text-emerald-400' ? 'bg-emerald-950/60 border-emerald-600/50 text-emerald-400'
: 'bg-slate-800/80 border-slate-700 text-slate-400' : 'bg-slate-800/80 border-slate-700 text-slate-400'
}`} }`}
title={soundOn ? 'Som ativo (BIP habilitado)' : 'Mudo'} title={soundOn ? 'Som ativo (BIP habilitado)' : 'Mudo'}
> >
{soundOn ? <Volume2 className="h-5 w-5" /> : <VolumeX className="h-5 w-5" />} {soundOn ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
</button> </button>
{/* BOTÃO CRUCIAL DE COMUTAÇÃO: VOLTAR AO MODO COMPLETO */} {/* BOTÃO CRUCIAL DE COMUTAÇÃO: VOLTAR AO MODO COMPLETO */}
@@ -117,19 +117,18 @@ export const SmartHeader: React.FC<SmartHeaderProps> = ({
type="button" type="button"
variant="outline" variant="outline"
onClick={handleVoltarAoModoCompleto} onClick={handleVoltarAoModoCompleto}
className="h-10 px-3 gap-1.5 bg-blue-600 hover:bg-blue-500 text-white border-blue-500 hover:border-blue-400 font-bold text-xs sm:text-sm rounded-xl shadow-sm active:scale-95 transition-all" className="h-10 px-2 sm:px-2.5 gap-1 bg-blue-600 hover:bg-blue-500 text-white border-blue-500 hover:border-blue-400 font-bold text-xs rounded-xl shadow-sm active:scale-95 transition-all shrink-0"
title="Sair do Modo Smart e abrir o sistema completo (Dashboard / 3D / Cadastros)" title="Sair do Modo Smart e abrir o sistema completo (Dashboard / 3D / Cadastros)"
> >
<Building2 className="h-4 w-4" /> <Building2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 shrink-0" />
<span className="hidden xs:inline">Modo Completo</span> <span>Completo</span>
<span className="xs:hidden">Completo</span>
</Button> </Button>
{/* Botão de Logout */} {/* Botão de Logout */}
<button <button
type="button" type="button"
onClick={handleLogout} onClick={handleLogout}
className="h-10 w-10 rounded-xl flex items-center justify-center bg-slate-800 hover:bg-red-900/60 border border-slate-700 hover:border-red-600/50 text-slate-400 hover:text-red-300 transition-colors active:scale-90" className="h-10 w-8 sm:w-9 rounded-xl flex items-center justify-center bg-slate-800 hover:bg-red-900/60 border border-slate-700 hover:border-red-600/50 text-slate-400 hover:text-red-300 transition-colors active:scale-90 shrink-0"
title={`Sair do sistema (${user?.email || 'Operador'})`} title={`Sair do sistema (${user?.email || 'Operador'})`}
> >
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />