From 106b8e13a30afc99a7865b551f1ca9d8bb0ec74b Mon Sep 17 00:00:00 2001
From: FaintSpeaker <joe@faintspeaker.com>
Date: Wed, 29 Dec 2021 12:00:49 -0500
Subject: [PATCH] Use the white property to replace the hard-coded "white" in
 the world map.

---
 src/ui/React/WorldMap.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/ui/React/WorldMap.tsx b/src/ui/React/WorldMap.tsx
index 64e0afd29..62474f7e7 100644
--- a/src/ui/React/WorldMap.tsx
+++ b/src/ui/React/WorldMap.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import { CityName } from "../../Locations/data/CityNames";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
+import { Theme } from "@mui/material/styles";
+import makeStyles from "@mui/styles/makeStyles";
+import createStyles from "@mui/styles/createStyles";
 
 interface ICityProps {
   currentCity: CityName;
@@ -9,13 +12,25 @@ interface ICityProps {
   onTravel: (city: CityName) => void;
 }
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+      travel: {
+        color: theme.colors.white,
+        lineHeight: "1em",
+        whiteSpace: "pre",
+        cursor: "pointer"
+      },
+    })
+);
+
 function City(props: ICityProps): React.ReactElement {
+  const classes = useStyles();
   if (props.city !== props.currentCity) {
     return (
       <Tooltip title={<Typography>{props.city}</Typography>}>
         <span
           onClick={() => props.onTravel(props.city)}
-          style={{ color: "white", lineHeight: "1em", whiteSpace: "pre", cursor: "pointer" }}
+          className={classes.travel}
         >
           {props.city[0]}
         </span>