UI: Improve theme support. (#1079)

2024-12-22 14:12:27 +01:00 · 2024-02-15 20:51:07 -08:00 · 2024-02-15 20:51:07 -08:00 · 93b9a10e41
commit 93b9a10e41
parent 22aec2a8b9
23 changed files with 142 additions and 12 deletions
--- a/src/BitNode/ui/BitverseRoot.tsx
+++ b/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,
    },
  }),
 );
--- a/src/Locations/ui/City.tsx
+++ b/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",
--- a/src/Locations/ui/TravelAgencyRoot.tsx
+++ b/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 ? (
--- a/src/Themes/Themes.ts
+++ b/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 {
--- a/src/Themes/data/dark-blue/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/dark-plus/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/default-lite/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/default/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/discord-like/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/dracula/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/iron-man/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/light/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/mayukai-dark/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/monokai-ish/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/muted-gold-blue/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/one-dark/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/purple/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/smooth-green/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/warmer/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/data/zerenity/index.ts
+++ b/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",
  },
 };
--- a/src/Themes/ui/Theme.tsx
+++ b/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,
          },
--- a/src/Themes/ui/ThemeEditorModal.tsx
+++ b/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 }}>
--- a/src/ui/React/WorldMap.tsx
+++ b/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 {