Merge pull request #1850 from Owaiseimdad/FIX_1848_smallUIFixes

FIX-1848 UI design changes

src/Components/Alert/index.jsx

@@ -36,8 +36,8 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 	*/
 
 	const text = theme.palette.secondary.contrastText;
-	const bg = theme.palette.secondary.main;
-	const border = theme.palette.secondary.contrastText;
+	const border = theme.palette.alert.contrastText;
+	const bg = theme.palette.alert.main;
 	const icon = icons[variant];
 
 	return (

src/Pages/Account/index.jsx

@@ -57,10 +57,6 @@ const Account = ({ open = "profile" }) => {
 			className="account"
 			px={theme.spacing(20)}
 			py={theme.spacing(12)}
-			backgroundColor={theme.palette.primary.main}
-			border={1}
-			borderColor={theme.palette.primary.lowContrast}
-			borderRadius={theme.shape.borderRadius}
 		>
 			<TabContext value={tab}>
 				<Box

src/Pages/StatusPage/Create/Components/Tabs/ConfigStack.jsx

@@ -0,0 +1,26 @@
+import { Stack, Typography } from "@mui/material";
+import ConfigBox from "../../../../../Components/ConfigBox";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+
+// This can be used to add any extra/additional section/stacks on top of existing sections on the tab
+const ConfigStack = ({ title, description, children }) => {
+	const theme = useTheme();
+	return (
+		<ConfigBox>
+			<Stack gap={theme.spacing(6)}>
+				<Typography component="h2">{title}</Typography>
+				<Typography component="p">{description}</Typography>
+			</Stack>
+			{children}
+		</ConfigBox>
+	);
+};
+
+ConfigStack.propTypes = {
+	title: PropTypes.string.isRequired, // Title must be a string and is required
+	description: PropTypes.string.isRequired, // Description must be a string and is required
+	children: PropTypes.node.isRequired,
+};
+
+export default ConfigStack;

src/Pages/StatusPage/Create/Components/Tabs/Content.jsx

@@ -1,13 +1,13 @@
 // Components
-import { Stack, Typography, Button } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { TabPanel } from "@mui/lab";
-import ConfigBox from "../../../../../Components/ConfigBox";
 import MonitorList from "../MonitorList";
 import Search from "../../../../../Components/Inputs/Search";
 import Checkbox from "../../../../../Components/Inputs/Checkbox";
 // Utils
 import { useState } from "react";
 import { useTheme } from "@emotion/react";
+import ConfigStack from "./ConfigStack";
 const Content = ({
 	tabValue,
 	form,
@@ -34,14 +34,10 @@ const Content = ({
 	return (
 		<TabPanel value={tabValue}>
 			<Stack gap={theme.spacing(10)}>
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Status page servers</Typography>
-						<Typography component="p">
-							You can add any number of servers that you monitor to your status page. You
-							can also reorder them for the best viewing experience.
-						</Typography>
-					</Stack>
+				<ConfigStack
+					title="Status page servers"
+					description="You can add any number of servers that you monitor to your status page. You can also reorder them for the best viewing experience."
+				>
 					<Stack>
 						<Stack
 							direction="row"
@@ -72,13 +68,12 @@ const Content = ({
 							setSelectedMonitors={handleMonitorsChange}
 						/>
 					</Stack>
-				</ConfigBox>{" "}
-				<ConfigBox>
-					<Stack gap={theme.spacing(6)}>
-						<Typography component="h2">Features</Typography>
-						<Typography component="p">Show more details on the status page</Typography>
-					</Stack>
-					<Stack sx={{ margin: theme.spacing(6) }}>
+				</ConfigStack>
+				<ConfigStack
+					title="Features"
+					description="Show more details on the status page"
+				>
+					<Stack>
 						<Checkbox
 							id="showCharts"
 							name="showCharts"
@@ -94,9 +89,8 @@ const Content = ({
 							onChange={handleFormChange}
 						/>
 					</Stack>
-				</ConfigBox>
+				</ConfigStack>
 			</Stack>
-			<Stack gap={theme.spacing(6)}></Stack>
 		</TabPanel>
 	);
 };

src/Utils/Theme/constants.js

@@ -40,7 +40,6 @@ const paletteColors = {
 	blueGray150: "#667085",
 	blueGray200: "#475467",
 	blueGray400: "#344054",
-	blueGray900: "#1c2130",
 	blueBlueWave: "#1570EF",
 	blue700: "#4E5BA6",
 	purple300: "#664EFF",
@@ -89,10 +88,12 @@ const newColors = {
 	gray100: "#F3F3F3",
 	gray200: "#EFEFEF",
 	gray500: "#A2A3A3",
+	gray900: "#1c1c1c",
 	blueGray50: "#E8F0FE",
 	blueGray500: "#475467",
 	blueGray600: "#344054",
 	blueGray800: "#1C2130",
+	blueGray900: "#515151",
 	blueBlueWave: "#1570EF",
 	/* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */
 	green100: "#67cd78",
@@ -290,6 +291,16 @@ const newSemanticColors = {
 			dark: "#C084FC",
 		},
 	},
+	alert: {
+		main: {
+			light: newColors.gray200,
+			dark: newColors.gray900,
+		},
+		contrastText: {
+			light: newColors.blueGray600,
+			dark: newColors.blueGray900,
+		},
+	},
 };
 
 export { typographyLevels, semanticColors as colors, newSemanticColors };