ui tweaks

This commit is contained in:
legop3
2026-04-18 19:16:46 -04:00
parent 3513a11068
commit e5e8e9ed0f
5 changed files with 10 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-B2Pp657C.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DVfgQd9L.css">
<script type="module" crossorigin src="/assets/index-Dpm2R3OA.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BTc7ve5w.css">
</head>
<body>
<div id="root"></div>
+6 -7
View File
@@ -122,12 +122,11 @@ export default function ButtonBoxPanel() {
}, [effectiveAlertVolume, socket]);
return (
<section className="panel-section space-y-0.5 text-base">
<header className="flex items-center justify-between gap-0.5 text-sm text-slate-400">
<section className="panel-section space-y-1 text-base">
<header className="text-center text-sm text-slate-300">
<p>Button Box</p>
<p className="text-xs text-slate-500">Live from session</p>
</header>
<div className="grid grid-cols-4 gap-0.5">
<div className="grid grid-cols-4 gap-1">
{buttons.map((button) => {
const id = Number(button.id);
const count = Number.isFinite(button.count) ? button.count : 0;
@@ -143,16 +142,16 @@ export default function ButtonBoxPanel() {
<article
key={id}
className={[
'rounded bg-zinc-950 p-0.5 shadow-inner shadow-black/40 transition-colors duration-200',
'rounded bg-slate-800/70 p-1 text-center shadow-sm ring-1 ring-white/10 transition-colors duration-200',
incActive ? 'bg-cyan-900/70 ring-1 ring-cyan-400/70' : '',
rewardActive ? 'bg-fuchsia-900/70 ring-1 ring-fuchsia-400/80' : '',
]
.filter(Boolean)
.join(' ')}
>
<p className="text-xs text-slate-400">Button {id}</p>
<p className="text-xs text-slate-300">Button {id}</p>
<p className="text-sm font-semibold text-white">{count} / {goal}</p>
<p className="truncate text-[0.7rem] text-slate-300">#{rewardNumber} {rewardName}</p>
<p className="truncate text-[0.7rem] text-slate-200">#{rewardNumber} {rewardName}</p>
</article>
);
})}