usage warning color

src/Components/Alert/index.jsx

@@ -26,9 +26,6 @@ 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}
  */
 
@@ -39,9 +36,6 @@ const Alert = ({
 	isToast, 
 	hasIcon = true, 
 	onClick,
-	customBgColor,
-	customTextColor,
-	customBorderColor 
 }) => {
 	const theme = useTheme();
 	/* TODO 
@@ -49,9 +43,9 @@ const Alert = ({
 	*/
 
 	// 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 text =  theme.palette.secondary.contrastText;
+	const border = theme.palette.alert.contrastText;
+	const bg = theme.palette.alert.main;
 	const icon = icons[variant];
 
 	return (
@@ -128,9 +122,6 @@ 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

@@ -7,7 +7,6 @@ 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";
 
@@ -118,26 +117,24 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 						{/* 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">
+								<Box sx={{
+									'& .alert.row-stack': {
+										backgroundColor: theme.palette.warning.main,
+										borderColor: theme.palette.warning.lowContrast,
+										'& .MuiTypography-root': {
+											color: theme.palette.warning.contrastText
+										},
+										'& .MuiBox-root > svg': {
+											color: theme.palette.warning.contrastText
+										}
+									}
+								}}>
 									<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>
 							</Box>
 						)}
 					</>

src/Utils/Theme/constants.js

@@ -63,8 +63,7 @@ const paletteColors = {
 	orange500: "#E88C30",
 	orange600: "#DC6803",
 	orange800: "#624711",
-	yellow50: "#FFFCF5",
-	yellow300: "#FEC84B",
+
 };
 
 const semanticColors = {
@@ -250,20 +249,7 @@ 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: {
@@ -324,4 +310,4 @@ const newSemanticColors = {
 	},
 };
 
-export { typographyLevels, semanticColors as colors, newSemanticColors, paletteColors };
+export { typographyLevels, semanticColors as colors, newSemanticColors };