ui: replace small corrupted refresh icon with prominent text/icon button saying Nova Análise next to Sair
This commit is contained in:
+17
-17
@@ -57,10 +57,21 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
|
|||||||
</div>
|
</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 && (
|
{hasKey && (
|
||||||
<button
|
<button
|
||||||
onClick={onClearKey}
|
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"
|
title="Alterar Chave de API"
|
||||||
>
|
>
|
||||||
<SignOutIcon className="w-4 h-4" />
|
<SignOutIcon className="w-4 h-4" />
|
||||||
@@ -68,28 +79,17 @@ export const Header: React.FC<HeaderProps> = ({ onReset, onClearKey, hasKey, pro
|
|||||||
</button>
|
</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">
|
<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={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>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={toggleTheme}
|
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"
|
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="Toggle theme"
|
aria-label="Alternar tema escuro/claro"
|
||||||
>
|
>
|
||||||
<div className="relative z-10">
|
<div className="relative z-10">
|
||||||
{theme === 'light' ? (
|
{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>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export const MoonIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
|||||||
|
|
||||||
export const RefreshIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
export const RefreshIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0011.664 0l3.181-3.183m-11.664 0l4.5-4.5a3.75 3.75 0 00-5.303 0l-4.5 4.5m11.664 0l-3.182 3.182a8.25 8.25 0 01-11.664 0l-3.182-3.182m11.664 0l-4.5-4.5a3.75 3.75 0 015.303 0l4.5 4.5" />
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user