Merge pull request #2229 from FaintSpeaker/update-theme-engine-missing-elements

Update theme engine to cover some themeless elements

src/Locations/ui/City.tsx

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

src/ui/React/Theme.tsx

@@ -21,6 +21,8 @@ declare module "@mui/material/styles" {
       successlight: React.CSSProperties["color"];
       success: React.CSSProperties["color"];
       successdark: React.CSSProperties["color"];
+      white: React.CSSProperties["color"];
+      black: React.CSSProperties["color"];
     };
   }
   interface ThemeOptions {
@@ -38,6 +40,8 @@ declare module "@mui/material/styles" {
       successlight: React.CSSProperties["color"];
       success: React.CSSProperties["color"];
       successdark: React.CSSProperties["color"];
+      white: React.CSSProperties["color"];
+      black: React.CSSProperties["color"];
     };
   }
 }
@@ -60,6 +64,8 @@ export function refreshTheme(): void {
       successlight: Settings.theme.successlight,
       success: Settings.theme.success,
       successdark: Settings.theme.successdark,
+      white: Settings.theme.white,
+      black: Settings.theme.black,
     },
     palette: {
       primary: {
@@ -87,6 +93,11 @@ export function refreshTheme(): void {
         main: Settings.theme.warning,
         dark: Settings.theme.warningdark,
       },
+      success: {
+        light: Settings.theme.successlight,
+        main: Settings.theme.success,
+        dark: Settings.theme.successdark,
+      },
       background: {
         default: Settings.theme.backgroundprimary,
         paper: Settings.theme.well,
@@ -320,7 +331,7 @@ export function refreshTheme(): void {
             border: "1px solid " + Settings.theme.well,
           },
           standardSuccess: {
-            color: Settings.theme.primarylight,
+            color: Settings.theme.successlight,
           },
           standardError: {
             color: Settings.theme.errorlight,
@@ -335,6 +346,8 @@ export function refreshTheme(): void {
       },
     },
   });
+
+  document.body.style.backgroundColor = theme.colors.black?.toString() ?? "black";
 }
 refreshTheme();
 

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>