Phase 2 and Demo

packages/client/src/components/ConnectivityBanner.tsx

@@ -1,21 +1,26 @@
+/**
+ * Thin connectivity banner — used on pages outside the BidderLayout shell
+ * (auth pages, staff tools, display board).
+ *
+ * Hidden when fully connected.
+ */
 import { useConnectivityStore } from "../store/connectivity.js";
 
-const labels: Record<string, { text: string; className: string }> = {
-  connected: { text: "Connected", className: "bg-green-500" },
-  local: { text: "Local network – offline-capable", className: "bg-yellow-500" },
-  offline: { text: "Offline – bids will sync when reconnected", className: "bg-red-500" },
-};
+const CONFIGS = {
+  local:   { bg: "bg-gold-500",  text: "Local network — offline-capable" },
+  offline: { bg: "bg-red-500",   text: "Offline — bids will sync when reconnected" },
+} as const;
 
 export function ConnectivityBanner() {
   const status = useConnectivityStore((s) => s.status);
-
   if (status === "connected") return null;
 
-  const { text, className } = labels[status]!;
+  const cfg = CONFIGS[status as keyof typeof CONFIGS];
+  if (!cfg) return null;
 
   return (
-    <div className={`${className} text-white text-center text-sm py-1 px-4 font-medium`}>
-      {text}
+    <div className={`${cfg.bg} text-white text-center text-xs py-1.5 px-4 font-semibold tracking-wide`}>
+      {cfg.text}
     </div>
   );
 }