From 86e01748ef241d2c4fc5a4cd3b7d4001e651715a Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 30 Mar 2026 17:30:58 -0500
Subject: [PATCH] Fix legend readability with explicit text color

---
 assets/js/propagation_map_hook.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js
index 7aada7b9..19a93e8b 100644
--- a/assets/js/propagation_map_hook.js
+++ b/assets/js/propagation_map_hook.js
@@ -31,17 +31,19 @@ export const PropagationMap = {
 
     const legend = L.control({ position: "bottomright" })
     legend.onAdd = () => {
-      const div = L.DomUtil.create("div", "leaflet-legend")
-      div.innerHTML = `
-        <div style="background:white;padding:8px 12px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.3);font-size:12px;line-height:1.8;">
-          <strong>Propagation</strong><br>
-          <span style="background:#00ffa3;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Excellent (80-100)<br>
-          <span style="background:#7dffd4;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Good (65-79)<br>
-          <span style="background:#ffe566;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Marginal (50-64)<br>
-          <span style="background:#ff9044;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Poor (33-49)<br>
-          <span style="background:#ff4f4f;width:12px;height:12px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:4px;"></span> Negligible (0-32)
-        </div>
-      `
+      const div = L.DomUtil.create("div")
+      div.style.cssText = "background:#fff;color:#333;padding:10px 14px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:13px;line-height:2;"
+      const rows = [
+        ["#00ffa3", "Excellent (80-100)"],
+        ["#7dffd4", "Good (65-79)"],
+        ["#ffe566", "Marginal (50-64)"],
+        ["#ff9044", "Poor (33-49)"],
+        ["#ff4f4f", "Negligible (0-32)"]
+      ]
+      div.innerHTML = "<strong style='color:#333;'>Propagation</strong><br>" +
+        rows.map(([c, label]) =>
+          `<span style="background:${c};width:14px;height:14px;display:inline-block;border-radius:50%;vertical-align:middle;margin-right:6px;border:1px solid rgba(0,0,0,0.15);"></span><span style="color:#333;">${label}</span>`
+        ).join("<br>")
       return div
     }
     legend.addTo(this.map)