legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-15 17:12:59 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

better button

Browse Source
This commit is contained in:
legop3
2026-01-28 14:22:29 -05:00
parent d87ec55802
commit ccf0eeb1aa
5 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-CTaVJhzk.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-RTgSmBnh.js → server/public/assets/index-DoJLt5SV.js
+1 -1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-McaB0rzU.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-RTgSmBnh.js"></script> <script type="module" crossorigin src="/assets/index-DoJLt5SV.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CTaVJhzk.css"> <link rel="stylesheet" crossorigin href="/assets/index-McaB0rzU.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/NightVisionControl.jsx
+16 -13
View File
@@ -25,7 +25,7 @@ export default function NightVisionControl({
const displayOn = hasState ? optimistic : false; const displayOn = hasState ? optimistic : false;
const statusLabel = hasState ? (displayOn ? 'On' : 'Off') : '—'; const statusLabel = hasState ? (displayOn ? 'On' : 'Off') : '—';
const statusClasses = displayOn const statusClasses = displayOn
? 'bg-emerald-600 text-emerald-50' ? 'bg-emerald-500 text-emerald-950'
: 'bg-slate-700 text-slate-200'; : 'bg-slate-700 text-slate-200';
const handleToggle = () => { const handleToggle = () => {
@@ -35,17 +35,17 @@ export default function NightVisionControl({
onToggle?.(next); onToggle?.(next);
}; };
const buttonClasses = useMemo( 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';
'flex w-full items-center justify-between rounded bg-zinc-950 px-1 py-0.5 text-xs text-slate-300', const active =
'transition hover:bg-zinc-900 disabled:opacity-50', 'border-emerald-400/80 bg-emerald-600/30 text-emerald-50 shadow-[0_0_12px_rgba(16,185,129,0.45)]';
className, const inactive =
] 'border-amber-300/80 bg-amber-500/30 text-amber-50 shadow-[0_0_10px_rgba(251,191,36,0.35)]';
.filter(Boolean) return [base, displayOn ? active : inactive, 'transition hover:brightness-110 disabled:opacity-50', className]
.join(' '), .filter(Boolean)
[className], .join(' ');
); }, [className, displayOn]);
return ( return (
<button <button
@@ -55,7 +55,10 @@ export default function NightVisionControl({
aria-pressed={displayOn} aria-pressed={displayOn}
className={buttonClasses} className={buttonClasses}
> >
<span className="text-slate-400">Night Vision</span> <span className="flex items-center gap-1">
<span className="inline-flex h-2 w-2 rounded-full bg-current opacity-90" />
<span>Night Vision</span>
</span>
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<span className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${statusClasses}`}> <span className={`rounded px-1 py-0.5 text-[0.65rem] font-semibold ${statusClasses}`}>
{statusLabel} {statusLabel}