Custom palette for PageSpeed warning box

src/Components/Fallback/index.jsx

@@ -120,13 +120,13 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 							<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
 								<Box sx={{
 									'& .alert.row-stack': {
-										backgroundColor: theme.palette.warning.main,
-										borderColor: theme.palette.warning.lowContrast,
+										backgroundColor: theme.palette.pageSpeedWarning.main,
+										borderColor: theme.palette.pageSpeedWarning.lowContrast,
 										'& .MuiTypography-root': {
-											color: theme.palette.warning.contrastText
+											color: theme.palette.pageSpeedWarning.contrastText
 										},
 										'& .MuiBox-root > svg': {
-											color: theme.palette.warning.contrastText
+											color: theme.palette.pageSpeedWarning.contrastText
 										}
 									}
 								}}>

src/Utils/Theme/constants.js

@@ -235,6 +235,21 @@ const newSemanticColors = {
 			dark: newColors.orange600,
 		},
 	},
+	/* Custom palette for PageSpeed warning box */
+	pageSpeedWarning: {
+		main: {
+			light: paletteColors.orange50,
+			dark: paletteColors.orange800,
+		},
+		contrastText: {
+			light: paletteColors.orange600,
+			dark: paletteColors.orange100,
+		},
+		lowContrast: {
+			light: paletteColors.orange300,
+			dark: paletteColors.orange400,
+		},
+	},
 	error: {
 		main: {
 			light: newColors.red700,