Add warning for missing Google PageSpeed API key

src/Components/Alert/index.jsx

@@ -26,18 +26,32 @@ const icons = {
  * @param {boolean} [props.isToast] - Indicates if the alert is used as a toast notification.
  * @param {boolean} [props.hasIcon] - Whether to display an icon in the alert.
  * @param {function} props.onClick - Toast dismiss function.
+ * @param {string} [props.customBgColor] - Custom background color for the alert.
+ * @param {string} [props.customTextColor] - Custom text color for the alert.
+ * @param {string} [props.customBorderColor] - Custom border color for the alert.
  * @returns {JSX.Element}
  */
 
-const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
+const Alert = ({ 
+	variant, 
+	title, 
+	body, 
+	isToast, 
+	hasIcon = true, 
+	onClick,
+	customBgColor,
+	customTextColor,
+	customBorderColor 
+}) => {
 	const theme = useTheme();
 	/* TODO 
 	Do we need other variants for alert?
 	*/
 
-	const text = theme.palette.secondary.contrastText;
-	const border = theme.palette.alert.contrastText;
-	const bg = theme.palette.alert.main;
+	// Use custom colors if provided, otherwise use theme colors
+	const text = customTextColor || theme.palette.secondary.contrastText;
+	const border = customBorderColor || theme.palette.alert.contrastText;
+	const bg = customBgColor || theme.palette.alert.main;
 	const icon = icons[variant];
 
 	return (
@@ -114,6 +128,9 @@ Alert.propTypes = {
 	body: PropTypes.string,
 	isToast: PropTypes.bool,
 	hasIcon: PropTypes.bool,
+	customBgColor: PropTypes.string,
+	customTextColor: PropTypes.string,
+	customBorderColor: PropTypes.string,
 	onClick: function (props, propName, componentName) {
 		if (props.isToast && !props[propName]) {
 			return new Error(

src/Components/Fallback/index.jsx

@@ -1,12 +1,14 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography, Link } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import { paletteColors } from "../../Utils/Theme/constants";
+import Alert from "../Alert";
 import "./index.css";
 
 /**
@@ -25,6 +27,29 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 	const navigate = useNavigate();
 	const mode = useSelector((state) => state.ui.mode);
 
+	// Custom warning message with clickable link
+	const renderWarningMessage = () => {
+		return (
+			<>
+				Warning: You haven't added a Google PageSpeed API key. Without it, the PageSpeed monitor won't function. {" "}
+				<Link 
+					href="https://docs.checkmate.so/users-guide/quickstart#env-vars-server"
+					sx={{ 
+						textDecoration: "underline",
+						color: "inherit",
+						fontWeight: "inherit",
+						"&:hover": {
+							textDecoration: "underline",
+						}
+					}}
+				>
+					Click here to learn
+				</Link>
+				{" "}how to add your API key.
+			</>
+		);
+	};
+
 	return (
 		<Box
 			position="relative"
@@ -80,14 +105,42 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 				</Stack>
 				{/* TODO - display a different fallback if user is not an admin*/}
 				{isAdmin && (
-					<Button
-						variant="contained"
-						color="accent"
-						sx={{ alignSelf: "center" }}
-						onClick={() => navigate(link)}
-					>
-						Let's create your first {title}
-					</Button>
+					<>
+						<Button
+							variant="contained"
+							color="accent"
+							sx={{ alignSelf: "center" }}
+							onClick={() => navigate(link)}
+						>
+							Let's create your first {title}
+						</Button>
+						
+						{/* Warning box for PageSpeed monitor */}
+						{title === "pagespeed monitor" && (
+							<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
+								<style>
+									{`
+										/* Only apply custom icon color in light mode */
+										${mode === 'light' ? `
+											.pagespeed-warning .alert.row-stack > .MuiBox-root > svg {
+												color: ${paletteColors.orange600} !important;
+											}
+										` : ''}
+									`}
+								</style>
+								<div className="pagespeed-warning">
+									<Alert
+										variant="warning"
+										hasIcon={true}
+										body={renderWarningMessage()}
+										customTextColor={mode === 'light' ? paletteColors.orange600 : undefined}
+										customBgColor={mode === 'light' ? paletteColors.yellow50 : undefined}
+										customBorderColor={mode === 'light' ? paletteColors.yellow300 : undefined}
+									/>
+								</div>
+							</Box>
+						)}
+					</>
 				)}
 			</Stack>
 		</Box>

src/Utils/Theme/constants.js

@@ -63,6 +63,8 @@ const paletteColors = {
 	orange500: "#E88C30",
 	orange600: "#DC6803",
 	orange800: "#624711",
+	yellow50: "#FFFCF5",
+	yellow300: "#FEC84B",
 };
 
 const semanticColors = {
@@ -248,6 +250,20 @@ const newSemanticColors = {
 			dark: newColors.red600,
 		},
 	},
+	pageSpeedWarning: {
+		main: {
+			light: newColors.yellow50,
+			dark: newColors.yellow300,
+		},
+		contrastText: {
+			light: newColors.offBlack,
+			dark: newColors.offWhite,
+		},
+		lowContrast: {
+			light: newColors.yellow300,
+			dark: newColors.yellow50,
+		},
+	},
 	/* These are temporary, just for everything not to break */
 	gradient: {
 		color1: {
@@ -308,4 +324,4 @@ const newSemanticColors = {
 	},
 };
 
-export { typographyLevels, semanticColors as colors, newSemanticColors };
+export { typographyLevels, semanticColors as colors, newSemanticColors, paletteColors };