style: change map hover effect to orange outline instead of fill

2026-01-16 20:52:23 +01:00
parent 450036f137
commit d98a79d795
1 changed files with 9 additions and 1 deletions
--- a/components/dashboard/WorldMap.tsx
+++ b/components/dashboard/WorldMap.tsx
@@ -65,7 +65,15 @@ const WorldMap = ({ data }: WorldMapProps) => {
                      strokeWidth={0.5}
                      style={{
                        default: { outline: "none", transition: "all 250ms" },
-                        hover: { fill: "#FD5E0F", outline: "none", cursor: 'pointer' },
+                        hover: { 
+                          fill: count > 0 ? colorScale(count) : defaultFill,
+                          stroke: "#FD5E0F",
+                          strokeWidth: 2,
+                          outline: "none", 
+                          cursor: 'pointer',
+                          // Bring to front on hover so border isn't covered by neighbors
+                          zIndex: 100, 
+                        },
                        pressed: { outline: "none" },
                      }}
                      onMouseEnter={(evt) => {