Improve desktop branding and NSIS assets

This commit is contained in:
Esdras Renan 2025-10-18 23:31:10 -03:00
parent 9439890488
commit 78030dbcdb
5 changed files with 253 additions and 12 deletions

View file

@ -751,7 +751,7 @@ function App() {
<DeactivationScreen companyName={companyName} />
) : (
<div className="w-full max-w-[720px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
<div className="mb-4 flex justify-center">
<div className="mb-6 flex flex-col items-center gap-4 text-center">
<img
src={logoSrc}
alt="Logotipo Raven"
@ -764,18 +764,20 @@ function App() {
setLogoSrc(`${appUrl}/raven.png`)
}}
/>
</div>
<div className="mb-2 flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<span className="flex size-8 items-center justify-center rounded-lg bg-neutral-900 text-white"><GalleryVerticalEnd className="size-4" /></span>
<div className="flex flex-col leading-tight">
<span className="text-base font-semibold text-neutral-900">Raven</span>
<span className="text-xs font-medium text-neutral-500">Portal do Cliente</span>
<div className="flex flex-col items-center gap-2">
<span className="text-xs uppercase tracking-[0.18em] text-neutral-500">Portal do Cliente</span>
<div className="flex items-center gap-3">
<span className="flex size-10 items-center justify-center rounded-xl bg-neutral-900 text-white shadow-sm">
<GalleryVerticalEnd className="size-5" />
</span>
<span className="text-2xl font-semibold text-neutral-900">Raven</span>
</div>
</div>
<StatusBadge status={status} />
<div className="flex flex-wrap items-center justify-center gap-3">
<h1 className="text-lg font-semibold text-slate-800">Agente Desktop</h1>
<StatusBadge status={status} />
</div>
</div>
<h1 className="text-base font-semibold text-slate-800">Agente Desktop</h1>
{error ? <p className="mt-3 rounded-md bg-rose-50 p-2 text-sm text-rose-700">{error}</p> : null}
{!token ? (
<div className="mt-4 space-y-3">
@ -971,14 +973,19 @@ function App() {
)
}
function StatusBadge({ status }: { status: string | null }) {
function StatusBadge({ status, className }: { status: string | null; className?: string }) {
const s = (status ?? "").toLowerCase()
const label = s === "online" ? "Online" : s === "offline" ? "Offline" : s === "maintenance" ? "Manutenção" : "Sem status"
const dot = s === "online" ? "bg-emerald-500" : s === "offline" ? "bg-rose-500" : s === "maintenance" ? "bg-amber-500" : "bg-slate-400"
const ring = s === "online" ? "bg-emerald-400/30" : s === "offline" ? "bg-rose-400/30" : s === "maintenance" ? "bg-amber-400/30" : "bg-slate-300/30"
const isOnline = s === "online"
return (
<span className="inline-flex h-8 items-center gap-4 rounded-full border border-slate-200 px-3 text-sm font-semibold">
<span
className={cn(
"inline-flex h-8 items-center gap-3 rounded-full border border-slate-200 bg-white/80 px-3 text-sm font-medium text-neutral-600 shadow-sm",
className
)}
>
<span className="relative inline-flex items-center">
<span className={cn("size-2 rounded-full", dot)} />
{isOnline ? <span className={cn("absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping [animation-duration:2s]", ring)} /> : null}