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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-xHvQnnSt.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B8P3snof.css">
<script type="module" crossorigin src="/assets/index-48ExBr_c.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-KwHCNT0n.css">
</head>
<body>
<div id="root"></div>
+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>
);
}