Use the white property to replace the hard-coded "white" in the world map.

This commit is contained in:
FaintSpeaker 2021-12-29 12:00:49 -05:00
parent b3c5465ac2
commit 106b8e13a3

@ -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>