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

This commit is contained in:
FaintSpeaker 2021-12-29 12:08:14 -05:00
parent 106b8e13a3
commit edfefcceda

@ -17,11 +17,27 @@ import { IRouter } from "../../ui/Router";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import { LocationType } from "../LocationTypeEnum"; import { LocationType } from "../LocationTypeEnum";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
type IProps = { type IProps = {
city: City; city: City;
}; };
const useStyles = makeStyles((theme: Theme) =>
createStyles({
location: {
color: theme.colors.white,
whiteSpace: "nowrap",
margin: "0px",
padding: "0px",
cursor: "pointer",
},
})
);
function toLocation(router: IRouter, location: Location): void { function toLocation(router: IRouter, location: Location): void {
if (location.name === LocationName.TravelAgency) { if (location.name === LocationName.TravelAgency) {
router.toTravel(); router.toTravel();
@ -35,6 +51,7 @@ function toLocation(router: IRouter, location: Location): void {
function LocationLetter(location: Location): React.ReactElement { function LocationLetter(location: Location): React.ReactElement {
location.types; location.types;
const router = use.Router(); const router = use.Router();
const classes = useStyles();
let L = "X"; let L = "X";
if (location.types.includes(LocationType.Company)) L = "C"; if (location.types.includes(LocationType.Company)) L = "C";
if (location.types.includes(LocationType.Gym)) L = "G"; if (location.types.includes(LocationType.Gym)) L = "G";
@ -51,13 +68,7 @@ function LocationLetter(location: Location): React.ReactElement {
<span <span
aria-label={location.name} aria-label={location.name}
key={location.name} key={location.name}
style={{ className={classes.location}
color: "white",
whiteSpace: "nowrap",
margin: "0px",
padding: "0px",
cursor: "pointer",
}}
onClick={() => toLocation(router, location)} onClick={() => toLocation(router, location)}
> >
<b>{L}</b> <b>{L}</b>