dandri/beacon-web
1
0
Fork 0
mirror of https://github.com/MeshCore-Beacon/beacon-web.git synced 2026-09-13 00:45:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename map live toggle to Live Map and raise its contrast

Browse Source
This commit is contained in:
MrAlders0n
2026-07-29 23:08:52 -04:00
parent 6daf342cd2
commit efa3143344
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/map/PacketFlowButton.tsx
+8 -7
View File
@@ -3,20 +3,21 @@ interface PacketFlowButtonProps {
onToggle: () => void;
}
// Floating play/stop control for the live packet-flow animation. Off by default; when live it shows
// a pulsing dot and accent styling. Bottom-center, clear of the corner map controls.
// Floating play/stop control for the live packet-flow animation. Off by default; keeps an accent
// border either way so it reads as a control, not decoration. Bottom-center, clear of the corner
// map controls. Labelled "Live Map" to distinguish it from the header's LIVE websocket badge.
export function PacketFlowButton({ active, onToggle }: PacketFlowButtonProps) {
return (
<button
type="button"
onClick={onToggle}
aria-pressed={active}
aria-label={active ? "Stop live packet flow" : "Play live packet flow"}
title={active ? "Stop live packet flow" : "Play live packet flow"}
aria-label={active ? "Stop live map packet flow" : "Play live map packet flow"}
title={active ? "Stop live map packet flow" : "Play live map packet flow"}
className={`absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2 px-3 py-1.5 rounded-full border shadow-lg font-mono text-[11px] uppercase tracking-wider transition-colors cursor-pointer ${
active
? "bg-primary/15 border-primary-dim text-text-bright"
: "bg-bg-raised border-border text-text-dim hover:text-text-normal"
? "bg-primary/15 border-primary text-text-bright"
: "bg-bg-raised border-primary-dim text-text-normal hover:text-text-bright hover:border-primary"
}`}
>
{active ? (
@@ -29,7 +30,7 @@ export function PacketFlowButton({ active, onToggle }: PacketFlowButtonProps) {
<path d="M2 1.5v7l6-3.5z" />
</svg>
)}
Live
Live Map
</button>
);
}