betterer button

This commit is contained in:
legop3
2026-01-28 14:25:33 -05:00
parent ccf0eeb1aa
commit 77b5484381
5 changed files with 10 additions and 12 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-DoJLt5SV.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-McaB0rzU.css">
<script type="module" crossorigin src="/assets/index-xHvQnnSt.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B8P3snof.css">
</head>
<body>
<div id="root"></div>
+6 -8
View File
@@ -37,12 +37,10 @@ export default function NightVisionControl({
const buttonClasses = useMemo(() => {
const base =
'group flex w-full items-center justify-between rounded-md border px-1 py-0.75 text-xs font-semibold uppercase tracking-wide';
const active =
'border-emerald-400/80 bg-emerald-600/30 text-emerald-50 shadow-[0_0_12px_rgba(16,185,129,0.45)]';
const inactive =
'border-amber-300/80 bg-amber-500/30 text-amber-50 shadow-[0_0_10px_rgba(251,191,36,0.35)]';
return [base, displayOn ? active : inactive, 'transition hover:brightness-110 disabled:opacity-50', className]
'group flex w-full items-center justify-between rounded 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]
.filter(Boolean)
.join(' ');
}, [className, displayOn]);
@@ -55,8 +53,8 @@ export default function NightVisionControl({
aria-pressed={displayOn}
className={buttonClasses}
>
<span className="flex items-center gap-1">
<span className="inline-flex h-2 w-2 rounded-full bg-current opacity-90" />
<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">