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
+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>
);
})}