UI: Improve theme support. (#1079)

src/BitNode/ui/BitverseRoot.tsx

@@ -26,16 +26,16 @@ const useStyles = makeStyles(() =>
       },
     },
     level0: {
-      color: "red",
+      color: Settings.theme.bnlvl0,
     },
     level1: {
-      color: "yellow",
+      color: Settings.theme.bnlvl1,
     },
     level2: {
-      color: "#48d1cc",
+      color: Settings.theme.bnlvl2,
     },
     level3: {
-      color: "blue",
+      color: Settings.theme.bnlvl3,
     },
   }),
 );

src/Locations/ui/City.tsx

@@ -28,7 +28,7 @@ interface IProps {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     location: {
-      color: theme.colors.white,
+      color: theme.colors.maplocation,
       whiteSpace: "nowrap",
       margin: "0px",
       padding: "0px",

src/Locations/ui/TravelAgencyRoot.tsx

@@ -58,7 +58,7 @@ export function TravelAgencyRoot(): React.ReactElement {
       <Typography variant="h4">Travel Agency</Typography>
       <Box mx={2}>
         <Typography>
-          From here, you can travel to any other city! A ticket costs{" "}
+          From {Player.city}, you can travel to any other city! A ticket costs{" "}
           <Money money={CONSTANTS.TravelCost} forPurchase={true} />.
         </Typography>
         {Settings.DisableASCIIArt ? (

src/Themes/Themes.ts

@@ -35,6 +35,11 @@ export interface ITheme {
   backgroundprimary: string;
   backgroundsecondary: string;
   button: string;
+  maplocation: string;
+  bnlvl0: string;
+  bnlvl1: string;
+  bnlvl2: string;
+  bnlvl3: string;
 }
 
 export interface IPredefinedTheme {

src/Themes/data/dark-blue/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#091419",
     backgroundsecondary: "#000000",
     button: "#000000",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/dark-plus/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#1E1E1E",
     backgroundsecondary: "#252525",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/default-lite/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#0C0D0E",
     backgroundsecondary: "#121415",
     button: "#252829",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/default/index.ts

@@ -40,5 +40,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#000",
     backgroundsecondary: "#000",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/discord-like/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#2F3136",
     backgroundsecondary: "#35393E",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/dracula/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#282A36",
     backgroundsecondary: "#21222C",
     button: "#21222C",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/iron-man/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#2C0707",
     backgroundsecondary: "#551212",
     button: "#8A2121",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/light/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#F7F7F7",
     backgroundsecondary: "#f9f9f9",
     button: "#eaeaea",
+    maplocation: "#000000",
+    bnlvl0: "#D33425",
+    bnlvl1: "#B8B800",
+    bnlvl2: "#38B384",
+    bnlvl3: "#374BFF",
   },
 };

src/Themes/data/mayukai-dark/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#080C11",
     backgroundsecondary: "#03080F",
     button: "#00010A",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/monokai-ish/index.ts

@@ -40,5 +40,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#272822",
     backgroundsecondary: "#1B1C18",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/muted-gold-blue/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#0A0A0E",
     backgroundsecondary: "#0E0E10",
     button: "#222222",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/one-dark/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#282C34",
     backgroundsecondary: "#21252B",
     button: "#4B5263",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/purple/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#000",
     backgroundsecondary: "#000",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/smooth-green/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#1E1E1E",
     backgroundsecondary: "#252525",
     button: "#2F3C2B",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/warmer/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#000",
     backgroundsecondary: "#000",
     button: "#333",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/data/zerenity/index.ts

@@ -41,5 +41,10 @@ export const Theme: IPredefinedTheme = {
     backgroundprimary: "#191919",
     backgroundsecondary: "#111011",
     button: "#232337",
+    maplocation: "#ffffff",
+    bnlvl0: "#ffff00",
+    bnlvl1: "#ff0000",
+    bnlvl2: "#48d1cc",
+    bnlvl3: "#0000ff",
   },
 };

src/Themes/ui/Theme.tsx

@@ -23,6 +23,8 @@ declare module "@mui/material/styles" {
       successdark: React.CSSProperties["color"];
       white: React.CSSProperties["color"];
       black: React.CSSProperties["color"];
+      maplocation: React.CSSProperties["color"];
+      disabled: React.CSSProperties["color"];
     };
   }
   interface ThemeOptions {
@@ -42,6 +44,8 @@ declare module "@mui/material/styles" {
       successdark: React.CSSProperties["color"];
       white: React.CSSProperties["color"];
       black: React.CSSProperties["color"];
+      maplocation: React.CSSProperties["color"];
+      disabled: React.CSSProperties["color"];
     };
   }
 }
@@ -66,6 +70,8 @@ export function refreshTheme(): void {
       successdark: Settings.theme.successdark,
       white: Settings.theme.white,
       black: Settings.theme.black,
+      maplocation: Settings.theme.maplocation,
+      disabled: Settings.theme.disabled,
     },
     palette: {
       primary: {
@@ -132,7 +138,7 @@ export function refreshTheme(): void {
         styleOverrides: {
           root: {
             backgroundColor: Settings.theme.well,
-            borderBottomColor: "#fff",
+            borderBottomColor: Settings.theme.white,
           },
           underline: {
             "&:hover": {
@@ -226,7 +232,7 @@ export function refreshTheme(): void {
       MuiAccordionSummary: {
         styleOverrides: {
           root: {
-            backgroundColor: "#111",
+            backgroundColor: Settings.theme.backgroundprimary,
           },
         },
       },
@@ -249,7 +255,7 @@ export function refreshTheme(): void {
             color: Settings.theme.primary,
             backgroundColor: Settings.theme.well,
             borderRadius: 0,
-            border: "2px solid white",
+            border: "2px solid " + Settings.theme.white,
             maxWidth: "100vh",
           },
         },
@@ -370,7 +376,7 @@ export function refreshTheme(): void {
       MuiAlert: {
         styleOverrides: {
           root: {
-            backgroundColor: Settings.theme.black,
+            backgroundColor: Settings.theme.backgroundsecondary,
             borderRadius: 0,
             border: "1px solid " + Settings.theme.well,
           },

src/Themes/ui/ThemeEditorModal.tsx

@@ -339,6 +339,40 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
           color={customTheme.disabled}
           defaultColor={defaultTheme.disabled}
         />
+
+        <br />
+        <ColorEditor
+          name="maplocation"
+          onColorChange={onColorChange}
+          color={customTheme.maplocation}
+          defaultColor={defaultTheme.maplocation}
+        />
+
+        <br />
+        <ColorEditor
+          name="bnlvl0"
+          onColorChange={onColorChange}
+          color={customTheme.bnlvl0}
+          defaultColor={defaultTheme.bnlvl0}
+        />
+        <ColorEditor
+          name="bnlvl1"
+          onColorChange={onColorChange}
+          color={customTheme.bnlvl1}
+          defaultColor={defaultTheme.bnlvl1}
+        />
+        <ColorEditor
+          name="bnlvl2"
+          onColorChange={onColorChange}
+          color={customTheme.bnlvl2}
+          defaultColor={defaultTheme.bnlvl2}
+        />
+        <ColorEditor
+          name="bnlvl3"
+          onColorChange={onColorChange}
+          color={customTheme.bnlvl3}
+          defaultColor={defaultTheme.bnlvl3}
+        />
       </Paper>
 
       <Paper sx={{ px: 1, py: 1, my: 1 }}>

src/ui/React/WorldMap.tsx

@@ -14,11 +14,16 @@ interface ICityProps {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     travel: {
-      color: theme.colors.white,
+      color: theme.colors.maplocation,
       lineHeight: "1em",
       whiteSpace: "pre",
       cursor: "pointer",
     },
+    currentCity: {
+      color: theme.colors.disabled,
+      lineHeight: "1em",
+      whiteSpace: "pre",
+    },
   }),
 );
 
@@ -33,7 +38,7 @@ function City(props: ICityProps): React.ReactElement {
       </Tooltip>
     );
   }
-  return <span>{props.city[0]}</span>;
+  return <span className={classes.currentCity}>{props.city[0]}</span>;
 }
 
 interface IProps {