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

Update theme engine to cover some themeless elements

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>