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} + + )} + ); }, )}