improves in light mode

client/src/Components/Check/Check.jsx

@@ -51,10 +51,11 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 				sx={{
 					color:
 						variant === "info"
-							? theme.palette.primary.contrastTextTertiary
+							? theme.palette.primary.contrastTextSecondary
 							: colors[variant],
-					opacity: 0.8,
-				}}
+							opacity: 0.9,
+							fontWeight: 450,
+						}}
 			>
 				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
 				{text}

client/src/Components/ConfigBox/index.jsx

@@ -20,6 +20,11 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 		borderRightColor: theme.palette.primary.lowContrast,
 		paddingRight: theme.spacing(15),
 		paddingLeft: theme.spacing(15),
+		backgroundColor: theme.palette.container.background,
+		"& :is(h1, h2):first-of-type": {
+			fontWeight: 600,
+			marginBottom: theme.spacing(4),
+		},
 	},
 	"& > div:last-of-type": {
 		flex: 1,

client/src/Components/Fallback/FallbackBackground.jsx

@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
 import Box from "@mui/material/Box";
-import Skeleton from "../../assets/Images/create-placeholder.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
+import OutputAnimation from "../../assets/Animations/output.gif";
 import { useSelector } from "react-redux";
 const FallbackBackground = () => {
 	const theme = useTheme();
@@ -10,7 +10,18 @@ const FallbackBackground = () => {
 	return (
 		<>
 			{mode === "light" ? (
-				<Skeleton style={{ zIndex: 1 }} />
+				<Box
+					component="img"
+					src={OutputAnimation}
+					Background="transparent"
+					alt="Loading animation"
+					sx={{
+						zIndex: 1,
+						border: "none",
+						borderRadius: theme.spacing(8),
+						width: "100%",
+					}}
+				/>
 			) : (
 				<SkeletonDark style={{ zIndex: 1 }} />
 			)}

client/src/Components/Fallback/FallbackContainer.jsx

@@ -7,9 +7,9 @@ const FallbackContainer = ({ children, type }) => {
 	return (
 		<Box
 			border={1}
-			borderColor={theme.palette.primary.lowContrast}
+			borderColor={theme.palette.container.border}
 			borderRadius={theme.shape.borderRadius}
-			backgroundColor={theme.palette.primary.main}
+			backgroundColor={theme.palette.container.background}
 			overflow="hidden"
 			sx={{
 				display: "flex",

client/src/Components/Fallback/FallbackTitle.jsx

@@ -9,7 +9,7 @@ const FallbackTitle = ({ title }) => {
 			alignSelf="center"
 			component="h1"
 			marginY={theme.spacing(4)}
-			color={theme.palette.primary.contrastTextTertiary}
+			color={theme.palette.primary.contrastText}
 		>
 			{title}
 		</Typography>

client/src/Pages/Infrastructure/Create/index.jsx

@@ -265,7 +265,7 @@ const CreateInfrastructureMonitor = () => {
 					</Typography>
 				</Typography>
 				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
+					<Stack>
 						<Typography
 							component="h2"
 							variant="h2"
@@ -347,7 +347,12 @@ const CreateInfrastructureMonitor = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">{t("notificationConfig.title")}</Typography>
+						<Typography
+							component="h2"
+							variant="h2"
+						>
+							{t("notificationConfig.title")}
+						</Typography>
 						<Typography component="p">{t("notificationConfig.description")}</Typography>
 					</Box>
 					<NotificationsConfig

client/src/Pages/Notifications/create/index.jsx

@@ -170,7 +170,10 @@ const CreateNotifications = () => {
 			>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">
+						<Typography
+							component="h2"
+							variant="h2"
+						>
 							{t("createNotifications.nameSettings.title")}
 						</Typography>
 						<Typography component="p">
@@ -191,7 +194,10 @@ const CreateNotifications = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">
+						<Typography
+							component="h2"
+							variant="h2"
+						>
 							{t("createNotifications.typeSettings.title")}
 						</Typography>
 						<Typography component="p">
@@ -210,7 +216,12 @@ const CreateNotifications = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">{t(TITLE_MAP[type])}</Typography>
+						<Typography
+							component="h2"
+							variant="h2"
+						>
+							{t(TITLE_MAP[type])}
+						</Typography>
 						<Typography component="p">{t(DESCRIPTION_MAP[type])}</Typography>
 					</Box>
 					<Stack gap={theme.spacing(12)}>

client/src/Pages/Settings/SettingsURL.jsx

@@ -15,7 +15,12 @@ const SettingsURL = ({ HEADING_SX, handleChange, showURL = false }) => {
 	return (
 		<ConfigBox>
 			<Box>
-				<Typography component="h1">{t("settingsPage.urlSettings.title")}</Typography>
+				<Typography
+					component="h1"
+					variant="h2"
+				>
+					{t("settingsPage.urlSettings.title")}
+				</Typography>
 				<Typography sx={HEADING_SX}>
 					{t("settingsPage.urlSettings.description")}
 				</Typography>

client/src/Pages/Uptime/Create/index.jsx

@@ -357,7 +357,12 @@ const CreateMonitor = () => {
 				</ConfigBox>
 				<ConfigBox>
 					<Box>
-						<Typography component="h2">{t("notificationConfig.title")}</Typography>
+						<Typography
+							component="h2"
+							variant="h2"
+						>
+							{t("notificationConfig.title")}
+						</Typography>
 						<Typography component="p">{t("notificationConfig.description")}</Typography>
 					</Box>
 					<NotificationsConfig

client/src/Utils/Theme/constants.js

@@ -87,8 +87,10 @@ const newColors = {
 	offBlack: "#131315",
 	gray0: "#FDFDFD",
 	gray10: "#F4F4FF",
+	gray50: "#F9F9F9",
 	gray100: "#F3F3F3",
 	gray200: "#EFEFEF",
+	gray250: "#DADADA",
 	gray500: "#A2A3A3",
 	gray900: "#1c1c1c",
 	blueGray50: "#E8F0FE",
@@ -173,7 +175,7 @@ const newSemanticColors = {
 			dark: newColors.blueGray800,
 		},
 		lowContrast: {
-			light: newColors.gray200,
+			light: newColors.gray250,
 			dark: newColors.blueGray600,
 		},
 	},
@@ -337,6 +339,16 @@ const newSemanticColors = {
 			dark: newColors.blueGray900,
 		},
 	},
+	container: {
+		background: {
+			light: newColors.gray50,
+			dark: newColors.offBlack,
+		},
+		border: {
+			light: newColors.gray500,
+			dark: newColors.blueGray600,
+		},
+	},
 };
 
 export { typographyLevels, semanticColors as colors, newSemanticColors };

client/src/Utils/Theme/globalTheme.js

@@ -1,5 +1,6 @@
 import { typographyLevels } from "./constants";
 const fontFamilyPrimary = '"Inter" , sans-serif';
+import { darken } from "@mui/material/styles";
 // const fontFamilySecondary = '"Avenir", sans-serif';
 
 /* TODO take the color out from here */
@@ -55,6 +56,21 @@ const baseTheme = (palette) => ({
 			styleOverrides: {
 				root: ({ theme }) => ({
 					variants: [
+						{
+							props: (props) => props.variant === "contained" && props.color === "accent",
+							style: {
+								backgroundColor: theme.palette.accent.main,
+								color: theme.palette.primary.contrastTextSecondaryDarkBg,
+								fontWeight: 700,
+								letterSpacing: "0.5px",
+								textShadow: "0 0 1px rgba(0, 0, 0, 0.15)",
+								"&:hover": {
+									backgroundColor: darken(theme.palette.accent.darker, 0.05),
+									boxShadow: `0 2px 6px rgba(0, 0, 0, 0.1)`,
+									transition: "all 0.2s ease-in-out",
+								},
+							},
+						},
 						{
 							props: (props) => props.color === "accent",
 							style: {
@@ -566,7 +582,7 @@ const baseTheme = (palette) => ({
 				root: ({ theme }) => ({
 					ml: "auto",
 					"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-						borderColor: theme.palette.primary.contrastBorder,
+						borderColor: theme.palette.primary.lowContrast,
 						width: "auto",
 						whiteSpace: "nowrap",
 					},