ui: replace small corrupted refresh icon with prominent text/icon button saying Nova Análise next to Sair

This commit is contained in:
2026-06-23 17:03:09 +00:00
parent 0d90e3d5ae
commit 3a0771667c
2 changed files with 18 additions and 18 deletions
+17 -17
View File
@@ -57,10 +57,21 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
</div>
)}
{hasKey && (
<button
onClick={onReset}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 dark:text-slate-300 dark:hover:bg-slate-800 transition-all border border-transparent hover:border-blue-200 dark:hover:border-blue-900"
title="Iniciar nova análise de certificado"
>
<RefreshIcon className="w-4 h-4" />
<span>Nova Análise</span>
</button>
)}
{hasKey && (
<button
onClick={onClearKey}
className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:text-slate-400 dark:hover:bg-red-900/20 transition-all border border-transparent hover:border-red-200 dark:hover:border-red-900"
className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium text-slate-500 hover:text-red-500 hover:bg-red-50 dark:text-slate-400 dark:hover:bg-red-900/20 transition-all border border-transparent hover:border-red-200 dark:hover:border-red-900"
title="Alterar Chave de API"
>
<SignOutIcon className="w-4 h-4" />
@@ -68,28 +79,17 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
</button>
)}
<div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-800/50 p-1 rounded-full border border-slate-200 dark:border-slate-700">
<button
onClick={onReset}
className="p-2 rounded-full text-slate-500 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-700 hover:shadow-sm focus:outline-none transition-all"
aria-label="Carregar outro arquivo"
title="Novo Relatório"
>
<RefreshIcon className="w-5 h-5" />
</button>
<div className="w-px h-4 bg-slate-300 dark:bg-slate-700 mx-1"></div>
<div className="flex items-center bg-slate-100 dark:bg-slate-800/50 p-1 rounded-full border border-slate-200 dark:border-slate-700">
<button
onClick={toggleTheme}
className="p-2 rounded-full text-slate-500 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-700 hover:shadow-sm focus:outline-none transition-all relative overflow-hidden"
aria-label="Toggle theme"
className="p-1.5 rounded-full text-slate-500 dark:text-slate-400 hover:bg-white dark:hover:bg-slate-700 hover:shadow-sm focus:outline-none transition-all relative overflow-hidden"
aria-label="Alternar tema escuro/claro"
>
<div className="relative z-10">
{theme === 'light' ? (
<MoonIcon className="w-5 h-5" />
<MoonIcon className="w-4 h-4" />
) : (
<SunIcon className="w-5 h-5" />
<SunIcon className="w-4 h-4" />
)}
</div>
</button>