From efa31433441828b3208fda09fbe3563a85d01f91 Mon Sep 17 00:00:00 2001
From: MrAlders0n <MrAlders0n@smal.ca>
Date: Wed, 29 Jul 2026 23:08:52 -0400
Subject: [PATCH] Rename map live toggle to Live Map and raise its contrast

---
 src/features/map/PacketFlowButton.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/features/map/PacketFlowButton.tsx b/src/features/map/PacketFlowButton.tsx
index 61862cd..d1fe3e3 100644
--- a/src/features/map/PacketFlowButton.tsx
+++ b/src/features/map/PacketFlowButton.tsx
@@ -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>
   );
 }