improvement: updated map chart hover color

MarcoEscaleira · Mar 20, 2024 · e55eab2 · e55eab2
1 parent ce83d39
commit e55eab2
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/pages/Game/MapChart.tsx b/src/pages/Game/MapChart.tsx
@@ -86,7 +86,7 @@ export const MapChart: FC = () => {
                           geography={geo}
                           data-tooltip-id="country-tooltip"
                           onClick={handleOnCountryClick}
-                          className={`${isCountrySelected ? "fill-blue-400" : countryColor} cursor-pointer outline-none hover:fill-blue-300`}
+                          className={`${isCountrySelected ? "fill-purple-300" : countryColor} cursor-pointer outline-none hover:fill-purple-200`}
                         />
                       </Tooltip>
                       <Marker key={`name-${geo.rsmKey}`} coordinates={provinceCenter} onClick={handleOnCountryClick}>
@@ -147,6 +147,14 @@ export const MapChart: FC = () => {
             </Typography>
           </div>
         </Tooltip>
+        <Tooltip content="Current selected country">
+          <div className="flex gap-2">
+            <span className="size-5 rounded-full bg-purple-300" />
+            <Typography variant="small" className="font-medium">
+              Selected
+            </Typography>
+          </div>
+        </Tooltip>
       </div>
     </div>
   );