Merge pull request #3132 from bluewave-labs/fix/theme-simplification-and-bug-fixes

Simplify theme and fix Redux state bugs

Author: ajhollid

client/src/Components/LanguageSelector.jsx

@@ -16,7 +16,7 @@ const langMap = {
 const LanguageSelector = () => {
 	const { i18n } = useTranslation();
 	const theme = useTheme();
-	const { language } = useSelector((state) => state.ui);
+	const { language = "en" } = useSelector((state) => state.ui);
 	const dispatch = useDispatch();
 	const handleChange = (event) => {
 		const newLang = event.target.value;

client/src/Components/v1/I18nLoader/index.jsx

@@ -2,7 +2,7 @@ import i18n from "../../../Utils/i18n.js";
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
 const I18nLoader = () => {
-	const language = useSelector((state) => state.ui.language);
+	const language = useSelector((state) => state.ui.language ?? "en");
 
 	useEffect(() => {
 		if (language && i18n.language !== language) {

client/src/Components/v1/Sidebar/index.jsx

@@ -84,7 +84,7 @@ const Sidebar = () => {
 	const { t } = useTranslation();
 	const navigate = useNavigate();
 	// Redux state
-	const collapsed = useSelector((state) => state.ui.sidebar.collapsed);
+	const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false);
 
 	const menu = getMenu(t);
 	const otherMenuItems = getOtherMenuItems(t);

client/src/Features/UI/uiSlice.js

@@ -58,6 +58,9 @@ const uiSlice = createSlice({
 			state.showURL = action.payload;
 		},
 		setGreeting(state, action) {
+			if (!state.greeting) {
+				state.greeting = { index: 0, lastUpdate: null };
+			}
 			state.greeting.index = action.payload.index;
 			state.greeting.lastUpdate = action.payload.lastUpdate;
 		},

client/src/Pages/PageSpeed/Monitors/Components/MonitorGrid/index.jsx

@@ -1,8 +1,9 @@
-import { Grid, Grid2 } from "@mui/material";
+import { Grid } from "@mui/material";
 import Card from "../Card/index.jsx";
 
-const MonitorGrid = ({ shouldRender, monitors }) => {
-	console.log(monitors);
+const MonitorGrid = ({ monitors, shouldRender = true }) => {
+	if (!shouldRender) return null;
+
 	return (
 		<Grid
 			container
@@ -11,7 +12,7 @@ const MonitorGrid = ({ shouldRender, monitors }) => {
 			{monitors?.map((monitor) => (
 				<Card
 					monitor={monitor}
-					key={monitor._id}
+					key={monitor._id || monitor.id}
 				/>
 			))}
 		</Grid>

client/src/Pages/Settings/index.jsx

@@ -33,7 +33,7 @@ const BREADCRUMBS = [{ name: `Settings`, path: "/settings" }];
 
 const Settings = () => {
 	// Redux state
-	const { mode, language, timezone, showURL } = useSelector((state) => state.ui);
+	const { mode, language = "en", timezone, showURL } = useSelector((state) => state.ui);
 
 	// Local state
 	const [settingsData, setSettingsData] = useState({});

client/src/Utils/Theme/constants.js

@@ -1,4 +1,4 @@
-import { lighten, darken } from "@mui/material/styles"; // CAIO_REVIEW
+import { lighten } from "@mui/material/styles"; // CAIO_REVIEW
 
 const typographyBase = 13;
 
@@ -133,12 +133,6 @@ const newSemanticColors = {
 			light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
 			dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
 		},
-		darker: {
-			// CAIO_REVIEW
-			light: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
-			dark: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
-		},
-
 		contrastText: {
 			light: newColors.offWhite,
 			dark: newColors.offWhite,
@@ -165,14 +159,6 @@ const newSemanticColors = {
 			light: newColors.blueGray500,
 			dark: newColors.gray500,
 		},
-		contrastBorder: {
-			light: newColors.gray500,
-			dark: newColors.blueGray600,
-		},
-		contrastBorderDisabled: {
-			light: newColors.gray100,
-			dark: newColors.blueGray800,
-		},
 		lowContrast: {
 			light: newColors.gray250,
 			dark: newColors.blueGray600,
@@ -207,18 +193,6 @@ const newSemanticColors = {
 			light: newColors.blueGray800,
 			dark: newColors.gray100,
 		},
-		background: {
-			light: newColors.gray50,
-			dark: newColors.offBlack,
-		},
-		border: {
-			light: newColors.gray500,
-			dark: newColors.blueGray600,
-		},
-		cardShadow: {
-			light: "0 0 0 1px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.08)",
-			dark: "0 2px 10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04)",
-		},
 	},
 	success: {
 		main: {
@@ -234,20 +208,6 @@ const newSemanticColors = {
 			dark: newColors.green200,
 		},
 	},
-	successSecondary: {
-		main: {
-			light: undefined,
-			dark: "#073C2D",
-		},
-		contrastText: {
-			light: undefined,
-			dark: "#34D399",
-		},
-		lowContrast: {
-			light: undefined,
-			dark: "#094434",
-		},
-	},
 	warning: {
 		main: {
 			light: newColors.orange700,
@@ -316,30 +276,6 @@ const newSemanticColors = {
 		},
 	},
 
-	map: {
-		main: {
-			light: newColors.offWhite,
-			dark: undefined,
-		},
-		lowContrast: {
-			light: newColors.gray200,
-			dark: undefined,
-		},
-		highContrast: {
-			light: newColors.gray500,
-			dark: undefined,
-		},
-	},
-	chatbot: {
-		background: {
-			light: newColors.gray200,
-			dark: "#112B2B",
-		},
-		textAccent: {
-			light: "#C084FC",
-			dark: "#C084FC",
-		},
-	},
 	alert: {
 		main: {
 			light: newColors.gray200,

client/src/Utils/Theme/globalTheme.js

@@ -64,7 +64,7 @@ const baseTheme = (palette) => ({
 								letterSpacing: "0.5px",
 								textShadow: "0 0 1px rgba(0, 0, 0, 0.15)",
 								"&:hover": {
-									backgroundColor: darken(theme.palette.accent.darker, 0.05),
+									backgroundColor: darken(theme.palette.accent.main, 0.25),
 									boxShadow: `0 2px 6px rgba(0, 0, 0, 0.1)`,
 									transition: "all 0.2s ease-in-out",
 								},
@@ -74,7 +74,7 @@ const baseTheme = (palette) => ({
 							props: (props) => props.color === "accent",
 							style: {
 								"&:hover": {
-									backgroundColor: theme.palette.accent.darker,
+									backgroundColor: darken(theme.palette.accent.main, 0.2),
 								},
 							},
 						},

client/src/Utils/greeting.jsx

@@ -136,8 +136,8 @@ const Greeting = ({ type = "" }) => {
 	const dispatch = useDispatch();
 	const { t } = useTranslation();
 	const { firstName } = useSelector((state) => state.auth.user);
-	const index = useSelector((state) => state.ui.greeting.index);
-	const lastUpdate = useSelector((state) => state.ui.greeting.lastUpdate);
+	const index = useSelector((state) => state.ui.greeting?.index ?? 0);
+	const lastUpdate = useSelector((state) => state.ui.greeting?.lastUpdate ?? null);
 
 	const now = new Date();
 	const hour = now.getHours();