diff --git a/frontend/src/components/WorldMap.tsx b/frontend/src/components/WorldMap.tsx
index bc22430..21541f3 100644
--- a/frontend/src/components/WorldMap.tsx
+++ b/frontend/src/components/WorldMap.tsx
@@ -150,16 +150,18 @@ function GeoLayer({
}
return (
-
+ {
if (cc) handleClick(cc);
@@ -194,46 +196,43 @@ function GeoLayer({
onMouseLeave={(): void => {
setTooltip(null);
}}
- >
- 0
- ? tokens.colorNeutralBackground3
- : fillColor,
- stroke: tokens.colorNeutralStroke1,
- strokeWidth: 1,
- outline: "none",
- },
- pressed: {
- fill: cc ? tokens.colorBrandBackgroundPressed : fillColor,
- stroke: tokens.colorBrandStroke1,
- strokeWidth: 1,
- outline: "none",
- },
- }}
- />
- {count > 0 && cx !== undefined && cy !== undefined && isFinite(cx) && isFinite(cy) && (
-
- {count}
-
- )}
-
+ style={{
+ default: {
+ fill: isSelected ? tokens.colorBrandBackground : fillColor,
+ stroke: tokens.colorNeutralStroke2,
+ strokeWidth: 0.75,
+ outline: "none",
+ },
+ hover: {
+ fill: isSelected
+ ? tokens.colorBrandBackgroundHover
+ : cc && count > 0
+ ? tokens.colorNeutralBackground3
+ : fillColor,
+ stroke: tokens.colorNeutralStroke1,
+ strokeWidth: 1,
+ outline: "none",
+ },
+ pressed: {
+ fill: cc ? tokens.colorBrandBackgroundPressed : fillColor,
+ stroke: tokens.colorBrandStroke1,
+ strokeWidth: 1,
+ outline: "none",
+ },
+ }}
+ />
+ {count > 0 && cx !== undefined && cy !== undefined && isFinite(cx) && isFinite(cy) && (
+
+ {count}
+
+ )}
+
);
},
)}