mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-09 17:23:53 +01:00
UI: Improve theme support. (#1079)
This commit is contained in:
parent
22aec2a8b9
commit
93b9a10e41
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user