UI: Improve theme support. (#1079)

This commit is contained in:
adeilt 2024-02-15 20:51:07 -08:00 committed by GitHub
parent 22aec2a8b9
commit 93b9a10e41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
23 changed files with 142 additions and 12 deletions

@ -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,
},
}),
);

@ -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",

@ -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 ? (

@ -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 {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -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,
},

@ -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 }}>

@ -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 {