From 1d3500082e9be50a124dec8879af336aa47a6733 Mon Sep 17 00:00:00 2001
From: Daniel Pupius <dan@pupi.us>
Date: Mon, 16 Mar 2026 00:09:31 +0000
Subject: [PATCH] Dark theme for MapLibre navigation controls, add to
 NetworkMap

Style .maplibregl-ctrl-group with dark semi-transparent background
and invert the SVG icons to match the dark map aesthetic. Add
NavigationControl to NetworkMap alongside NodeLocationMap.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/components/dashboard/NetworkMap.tsx |  1 +
 web/src/styles/index.css                    | 23 +++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/web/src/components/dashboard/NetworkMap.tsx b/web/src/components/dashboard/NetworkMap.tsx
index 21cb52b..ca33fc2 100644
--- a/web/src/components/dashboard/NetworkMap.tsx
+++ b/web/src/components/dashboard/NetworkMap.tsx
@@ -114,6 +114,7 @@ export const NetworkMap = React.forwardRef<{ resetAutoZoom: () => void }, Networ
       });
 
       map.addControl(new maplibregl.AttributionControl({ compact: true }));
+      map.addControl(new maplibregl.NavigationControl(), 'top-left');
 
       map.on("load", () => {
         map.addSource("links", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
index 8ac84a5..90e6f84 100644
--- a/web/src/styles/index.css
+++ b/web/src/styles/index.css
@@ -42,6 +42,29 @@
 .maplibregl-ctrl-attrib-inner a:hover {
   color: #fff !important;
 }
+/* MapLibre navigation controls — dark theme */
+.maplibregl-ctrl-group {
+  background: rgba(20, 20, 20, 0.75) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: blur(4px);
+}
+.maplibregl-ctrl-group button {
+  background-color: transparent !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+}
+.maplibregl-ctrl-group button:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+.maplibregl-ctrl-icon {
+  filter: invert(1) opacity(0.8);
+}
+.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
+  filter: invert(1) opacity(1);
+}
+
 /* Prevent auto-expand on wide maps */
 .maplibregl-ctrl-attrib.maplibregl-compact-show {
   display: flex !important;