From b3c5465ac22aa6d7a1413cd2b2262d5b12fbb4a1 Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 12:00:02 -0500 Subject: [PATCH 1/7] Add the white property to the theme interfaces, so that it can be used in the project elsewhere. --- src/ui/React/Theme.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index cbbb1bb37..27b9bd214 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -21,6 +21,7 @@ declare module "@mui/material/styles" { successlight: React.CSSProperties["color"]; success: React.CSSProperties["color"]; successdark: React.CSSProperties["color"]; + white: React.CSSProperties["color"]; }; } interface ThemeOptions { @@ -38,6 +39,7 @@ declare module "@mui/material/styles" { successlight: React.CSSProperties["color"]; success: React.CSSProperties["color"]; successdark: React.CSSProperties["color"]; + white: React.CSSProperties["color"]; }; } } @@ -60,6 +62,7 @@ export function refreshTheme(): void { successlight: Settings.theme.successlight, success: Settings.theme.success, successdark: Settings.theme.successdark, + white: Settings.theme.white, }, palette: { primary: { From 106b8e13a30afc99a7865b551f1ca9d8bb0ec74b Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 12:00:49 -0500 Subject: [PATCH 2/7] Use the white property to replace the hard-coded "white" in the world map. --- src/ui/React/WorldMap.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/ui/React/WorldMap.tsx b/src/ui/React/WorldMap.tsx index 64e0afd29..62474f7e7 100644 --- a/src/ui/React/WorldMap.tsx +++ b/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 ( {props.city}}> props.onTravel(props.city)} - style={{ color: "white", lineHeight: "1em", whiteSpace: "pre", cursor: "pointer" }} + className={classes.travel} > {props.city[0]} From edfefcceda34c8889a0d6fe8b39298fe88be6e51 Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 12:08:14 -0500 Subject: [PATCH 3/7] Use the white property to replace the hard-coded "white" in the city map. --- src/Locations/ui/City.tsx | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/Locations/ui/City.tsx b/src/Locations/ui/City.tsx index 3bd246f17..d0e54a24b 100644 --- a/src/Locations/ui/City.tsx +++ b/src/Locations/ui/City.tsx @@ -17,11 +17,27 @@ import { IRouter } from "../../ui/Router"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { LocationType } from "../LocationTypeEnum"; +import { Theme } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; +import createStyles from "@mui/styles/createStyles"; type IProps = { city: City; }; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + location: { + color: theme.colors.white, + whiteSpace: "nowrap", + margin: "0px", + padding: "0px", + cursor: "pointer", + }, + }) +); + + function toLocation(router: IRouter, location: Location): void { if (location.name === LocationName.TravelAgency) { router.toTravel(); @@ -35,6 +51,7 @@ function toLocation(router: IRouter, location: Location): void { function LocationLetter(location: Location): React.ReactElement { location.types; const router = use.Router(); + const classes = useStyles(); let L = "X"; if (location.types.includes(LocationType.Company)) L = "C"; if (location.types.includes(LocationType.Gym)) L = "G"; @@ -51,13 +68,7 @@ function LocationLetter(location: Location): React.ReactElement { toLocation(router, location)} > {L} From ddbb37c2d16bc292ff1b284b474d553e10adc6fb Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 12:12:04 -0500 Subject: [PATCH 4/7] Add the black property to the theme interfaces, so that it can be used in the project elsewhere. --- src/ui/React/Theme.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index 27b9bd214..b02bac8c9 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -22,6 +22,7 @@ declare module "@mui/material/styles" { success: React.CSSProperties["color"]; successdark: React.CSSProperties["color"]; white: React.CSSProperties["color"]; + black: React.CSSProperties["color"]; }; } interface ThemeOptions { @@ -40,6 +41,7 @@ declare module "@mui/material/styles" { success: React.CSSProperties["color"]; successdark: React.CSSProperties["color"]; white: React.CSSProperties["color"]; + black: React.CSSProperties["color"]; }; } } @@ -63,6 +65,7 @@ export function refreshTheme(): void { success: Settings.theme.success, successdark: Settings.theme.successdark, white: Settings.theme.white, + black: Settings.theme.black, }, palette: { primary: { From c6191911735c687b3fba14c75b04228a8e621116 Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 12:26:40 -0500 Subject: [PATCH 5/7] When refreshing the theme, apply the black color to the body background color. --- src/ui/React/Theme.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index b02bac8c9..65c01f425 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -341,6 +341,8 @@ export function refreshTheme(): void { }, }, }); + + document.body.style.backgroundColor = theme.colors.black?.toString() ?? "black"; } refreshTheme(); From fbb2f4b9f367609bce9008dfc031c5ee9f695c2e Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 13:50:44 -0500 Subject: [PATCH 6/7] Add success to the palette that's being passed to create theme. Mui was using default colors without this inclusion, causing the success colors in it's snackbar to be the wrong colors. --- src/ui/React/Theme.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index 65c01f425..a11940c29 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -93,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, From c5284d3b02e783176ec240f1f02eafe3c2faf498 Mon Sep 17 00:00:00 2001 From: FaintSpeaker Date: Wed, 29 Dec 2021 13:51:18 -0500 Subject: [PATCH 7/7] Alter the standardSuccess alert to use the successlight color, to be consistent with all other toast notification behaviours. --- src/ui/React/Theme.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index a11940c29..f25c554b1 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -331,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,