even more betterer button

This commit is contained in:
legop3
2026-01-28 14:28:52 -05:00
parent 77b5484381
commit 690f38972f
5 changed files with 8 additions and 11 deletions
+4 -7
View File
@@ -37,7 +37,7 @@ export default function NightVisionControl({
const buttonClasses = useMemo(() => {
const base =
'group flex w-full items-center justify-between rounded border-2 px-1 py-0.75 text-xs font-semibold';
'group flex w-full items-center justify-between rounded-xl border-2 px-1 py-0.75 text-xs font-semibold';
const active = 'border-emerald-300/70 bg-emerald-800 text-emerald-50 hover:bg-emerald-700';
const inactive = 'border-amber-300/70 bg-amber-900 text-amber-50 hover:bg-amber-800';
return [base, displayOn ? active : inactive, 'transition disabled:opacity-50', className]
@@ -54,19 +54,16 @@ export default function NightVisionControl({
className={buttonClasses}
>
<span className="flex items-center gap-0.5">
<span className="inline-flex h-1.5 w-1.5 rounded-full bg-current opacity-90" />
<span>Night Vision</span>
</span>
<span className="flex items-center gap-1">
<span className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${statusClasses}`}>
{statusLabel}
</span>
{keyLabel ? (
<span className="rounded bg-slate-800 px-1 py-0.5 text-[0.6rem] font-semibold text-slate-200">
{keyLabel}
</span>
) : null}
</span>
<span className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${statusClasses}`}>
{statusLabel}
</span>
</button>
);
}