legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

colors!!!

Browse Source
This commit is contained in:
legop3
2026-05-21 03:02:29 -04:00
parent 331302da01
commit e9989da71a
21 changed files with 63 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ButtonBoxPanel/index.jsx
+1 -1
View File
@@ -127,7 +127,7 @@ export default function ButtonBoxPanel() {
}, [effectiveAlertVolume, socket]);
return (
<CardFrame title="Button Box" bodyClassName="space-y-0.5 text-base">
<CardFrame title="Button Box" accent="#eab308" bodyClassName="space-y-0.5 text-base">
<div className="grid grid-cols-4 gap-0.5">
{buttons.map((button) => {
const id = Number(button.id);
webui/src/components/CardFrame/index.jsx
+32
View File
@@ -2,10 +2,33 @@ function cx(...values) {
return values.filter(Boolean).join(' ');
}
function hexToRgb(hex) {
const raw = String(hex || '').trim();
const normalized = raw.startsWith('#') ? raw.slice(1) : raw;
if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(normalized)) return null;
const expanded =
normalized.length === 3
? normalized
.split('')
.map((ch) => ch + ch)
.join('')
: normalized;
return {
r: Number.parseInt(expanded.slice(0, 2), 16),
g: Number.parseInt(expanded.slice(2, 4), 16),
b: Number.parseInt(expanded.slice(4, 6), 16),
};
}
function rgba(rgb, alpha) {
return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
}
export default function CardFrame({
title = '',
meta = null,
actions = null,
accent = null,
hideHeader = false,
className = '',
headerClassName = '',
@@ -14,6 +37,13 @@ export default function CardFrame({
children,
}) {
const showHeader = !hideHeader && (title || meta != null || actions);
const accentRgb = hexToRgb(accent);
const cardStyle = accentRgb ? { borderColor: rgba(accentRgb, 0.65) } : undefined;
const headerStyle = accentRgb
? {
backgroundImage: `linear-gradient(90deg, rgba(23,23,23,0.96) 0%, rgba(38,38,38,0.94) 58%, ${rgba(accentRgb, 0.18)} 100%)`,
}
: undefined;
return (
<section
@@ -22,6 +52,7 @@ export default function CardFrame({
fillHeight && 'flex h-full min-h-0 flex-col',
className,
)}
style={cardStyle}
>
{showHeader ? (
<header
@@ -29,6 +60,7 @@ export default function CardFrame({
'flex items-center justify-between gap-0.5 border-b border-neutral-600/45 bg-gradient-to-r from-neutral-900 via-neutral-800 to-neutral-700 px-0.5 py-0.5',
headerClassName,
)}
style={headerStyle}
>
<div className="flex min-w-0 items-center gap-0.5">
{title ? <p className="m-0 text-[0.78rem] font-semibold leading-none text-neutral-100">{title}</p> : null}
webui/src/components/ChatPanel/index.jsx
+1
View File
@@ -109,6 +109,7 @@ export default function ChatPanel({
return (
<CardFrame
title={title}
accent="#22c55e"
hideHeader={!title}
fillHeight={fillHeight}
bodyClassName="space-y-0.5 text-base"
webui/src/components/HomeAssistantControls/index.jsx
+3 -3
View File
@@ -256,7 +256,7 @@ export default function HomeAssistantControls() {
if (!ha?.enabled) {
return (
<CardFrame title="Room Controls" bodyClassName="space-y-0.5 text-sm text-slate-400">
<CardFrame title="Room Controls" accent="#14b8a6" bodyClassName="space-y-0.5 text-sm text-slate-400">
<p className="text-slate-500">Not configured on the server.</p>
</CardFrame>
);
@@ -264,7 +264,7 @@ export default function HomeAssistantControls() {
if (entities.length === 0) {
return (
<CardFrame title="Room Controls" bodyClassName="space-y-0.5 text-sm text-slate-400">
<CardFrame title="Room Controls" accent="#14b8a6" bodyClassName="space-y-0.5 text-sm text-slate-400">
<p className="text-slate-500">No lights or switches configured.</p>
</CardFrame>
);
@@ -290,7 +290,7 @@ export default function HomeAssistantControls() {
);
return (
<CardFrame title="Room Controls" meta={entities.length} actions={actions} bodyClassName="space-y-0.5 text-base">
<CardFrame title="Room Controls" meta={entities.length} accent="#14b8a6" actions={actions} bodyClassName="space-y-0.5 text-base">
{controlsLocked ? (
<p className="rounded border border-amber-600/60 bg-amber-900/40 px-1 py-0.5 text-xs text-amber-100">
{lockState === 'off'
webui/src/components/LogPanel/index.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ export default function LogPanel() {
const logs = useSessionSelector((state) => state.logs);
const rendered = useMemo(() => logs.slice().reverse(), [logs]);
return (
<CardFrame title="Server logs" meta={logs.length} bodyClassName="space-y-0.5 text-base">
<CardFrame title="Server logs" meta={logs.length} accent="#f97316" bodyClassName="space-y-0.5 text-base">
<div className="surface h-64 overflow-y-auto font-mono text-xs">
{logs.length === 0 ? (
<p>No logs yet.</p>
webui/src/components/OverseerPreferencePanel/index.jsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function OverseerPreferencePanel() {
};
return (
<CardFrame title="Overseer vote" bodyClassName="space-y-0.5 text-center text-xs text-slate-200">
<CardFrame title="Overseer vote" accent="#10b981" bodyClassName="space-y-0.5 text-center text-xs text-slate-200">
<label
className={`flex items-center justify-center gap-1.5 rounded px-1 py-0.5 ${
enabled ? 'bg-emerald-600/80 text-emerald-50' : 'bg-slate-600/70 text-slate-100'
webui/src/components/RawUserPilePanel/index.jsx
+1
View File
@@ -61,6 +61,7 @@ export default function RawUserPilePanel({
<CardFrame
title={!hideHeader ? 'Users' : ''}
meta={!hideHeader ? sorted.length : null}
accent="#94a3b8"
hideHeader={hideHeader}
fillHeight={fillHeight}
className={className}
webui/src/components/ReplaySourcesPanel/index.jsx
+1 -1
View File
@@ -150,7 +150,7 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
const listWrapClass = fillHeight ? 'flex-1 min-h-0 overflow-y-auto' : '';
return (
<CardFrame title="Replay Sources" meta={sources.length} fillHeight={fillHeight} bodyClassName="space-y-0.5 text-sm">
<CardFrame title="Replay Sources" meta={sources.length} accent="#06b6d4" fillHeight={fillHeight} bodyClassName="space-y-0.5 text-sm">
<div className={`grid gap-0.5 md:grid-cols-2 ${listWrapClass}`}>
<GroupList title="Rovers" items={grouped.rovers} selected={selected} onToggle={toggleKey} />
<GroupList title="Room Cams" items={grouped.rooms} selected={selected} onToggle={toggleKey} />
webui/src/components/RightPaneTabs/index.jsx
+1 -1
View File
@@ -36,7 +36,7 @@ function TopDownMapPanel() {
const sensors = frame?.sensors || {};
return (
<CardFrame hideHeader>
<CardFrame hideHeader accent="#0067f7">
<div className="aspect-square w-full">
<TopDownMap sensors={sensors} />
</div>
webui/src/components/RoomCameraPanel/index.jsx
+1
View File
@@ -89,6 +89,7 @@ export default function RoomCameraPanel({
<CardFrame
title="Room cameras"
meta={cameras.length}
accent="#38bdf8"
actions={actions}
hideHeader={hideHeader}
bodyClassName="space-y-0.5 text-base"
webui/src/components/RoverQueuesPanel/index.jsx
+1 -1
View File
@@ -97,7 +97,7 @@ export default function RoverQueuesPanel({ title = 'Rovers' }) {
users.find((u) => u.socketId === socketId) || { socketId, nickname: null, role: null };
return (
<CardFrame title={title} bodyClassName="space-y-0.5 text-sm">
<CardFrame title={title} accent="#f59e0b" bodyClassName="space-y-0.5 text-sm">
{rosterItems.length === 0 ? (
<p className="text-sm text-slate-500">No rovers registered.</p>
) : (
webui/src/components/UserListPanel/index.jsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function NicknameEntryPanel({ compact = false }) {
export function LinkButtonsPanel() {
return (
<CardFrame title="Socials" fillHeight bodyClassName="flex flex-1 min-h-0 flex-col gap-0.5 text-base">
<CardFrame title="Socials" accent="#3030f5" fillHeight bodyClassName="flex flex-1 min-h-0 flex-col gap-0.5 text-base">
<SocialButtonsGrid className="flex-1 min-h-0" />
</CardFrame>
);
webui/src/components/vip/VipAudioUploadCard/VipAudioUploadCardContent.jsx
+1 -1
View File
@@ -530,7 +530,7 @@ export default function VipAudioUploadCard({
);
return (
<CardFrame title="Audio Controls">
<CardFrame title="Audio Controls" accent="#a78bfa">
<div className="grid gap-1">
<section className="surface">
<div className="flex items-center justify-center gap-0.5 py-0.25 text-xs text-slate-300">
webui/src/components/vip/VipIdentityCard.jsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function VipIdentityCard({ currentStoredKey, applyIdentityKey, on
const wrapClass = fullWidth ? 'w-full' : flowWrapClass;
return (
<CardFrame title="Identity key" className={wrapClass}>
<CardFrame title="Identity key" accent="#60a5fa" className={wrapClass}>
<div className={innerFlowClass}>
<p className="text-xs text-slate-500">Current: {maskKey(currentStoredKey) || 'not set yet'}</p>
<input
webui/src/components/vip/VipLiftCard.jsx
+1
View File
@@ -70,6 +70,7 @@ export default function VipLiftCard({ lift, onUp, onDown, fullWidth = false }) {
return (
<CardFrame
title="Lift Controls"
accent="#06b6d4"
className={`relative ${wrapClass}`}
bodyClassName="text-sm text-slate-200"
actions={
webui/src/components/vip/VipNeatoCard.jsx
+1
View File
@@ -101,6 +101,7 @@ export default function VipNeatoCard({
return (
<CardFrame
title="Neato Controls"
accent="#22c55e"
className={wrapClass}
bodyClassName="text-sm text-slate-200"
actions={
webui/src/components/vip/VipPrivateRoverAccessCard.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default function VipPrivateRoverAccessCard({
};
return (
<CardFrame title="Private rover access requests" className={wrapClass} bodyClassName="text-sm text-slate-300">
<CardFrame title="Private rover access requests" accent="#f43f5e" className={wrapClass} bodyClassName="text-sm text-slate-300">
<div className={innerFlowClass}>
{requestableRovers.length === 0 ? (
<p className="text-xs text-slate-500">No closed private rovers are available to request right now.</p>
webui/src/components/vip/VipProfileImageCard.jsx
+1 -1
View File
@@ -55,7 +55,7 @@ export default function VipProfileImageCard({ isVerified = false, fullWidth = fa
};
return (
<CardFrame title="Chat profile image URL" className={wrapClass} bodyClassName="text-sm text-slate-300">
<CardFrame title="Chat profile image URL" accent="#f59e0b" className={wrapClass} bodyClassName="text-sm text-slate-300">
<form className={innerFlowClass} onSubmit={handleSave}>
<p className="text-xs text-slate-500">
Verified users can set a custom avatar for chat and Discord bridge messages.
webui/src/components/vip/VipVerificationCard.jsx
+3 -3
View File
@@ -62,7 +62,7 @@ export default function VipVerificationCard({
if (pendingRequestId) {
return (
<CardFrame title="Verification" className={wrapClass} bodyClassName="text-sm text-slate-300">
<CardFrame title="Verification" accent="#eab308" className={wrapClass} bodyClassName="text-sm text-slate-300">
<div className={innerFlowClass}>Verification request pending: {pendingRequestId}</div>
</CardFrame>
);
@@ -70,7 +70,7 @@ export default function VipVerificationCard({
if (requestFlowStep === 0) {
return (
<CardFrame title="Verification" className={wrapClass}>
<CardFrame title="Verification" accent="#eab308" className={wrapClass}>
<div className={innerFlowClass}>
<button type="button" className="button-dark text-sm" onClick={beginRequestFlow} disabled={working}>
Request Verification
@@ -81,7 +81,7 @@ export default function VipVerificationCard({
}
return (
<CardFrame title="Request verification" className={wrapClass}>
<CardFrame title="Request verification" accent="#eab308" className={wrapClass}>
<form onSubmit={handleRequestSubmit}>
<div className={innerFlowClass}>
<p className="text-xs text-slate-500">