add empty view according to spec

Client/src/Pages/Infrastructure/Details/empty.jsx

@@ -0,0 +1,37 @@
+import { useTheme } from "@emotion/react";
+import PlaceholderLight from "../../../assets/Images/data_placeholder.svg?react";
+import PlaceholderDark from "../../../assets/Images/data_placeholder_dark.svg?react";
+import { Box, Typography, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+const Empty = ({ styles }) => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+	return (
+		<Box sx={{ ...styles, marginTop: theme.spacing(24) }}>
+			<Stack
+				direction="column"
+				gap={theme.spacing(8)}
+				alignItems="center"
+			>
+				{mode === "light" ? <PlaceholderLight /> : <PlaceholderDark />}
+
+				<Typography variant="h2">Your infrastructure dashboard will show here</Typography>
+				<Typography
+					textAlign="center"
+					color={theme.palette.text.secondary}
+				>
+					Hang tight! When we receive data, we'll show it here. Please check back in a few
+					minutes.
+				</Typography>
+			</Stack>
+		</Box>
+	);
+};
+
+Empty.propTypes = {
+	styles: PropTypes.object,
+	mode: PropTypes.string,
+};
+
+export default Empty;

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -9,6 +9,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../main";
 import PulseDot from "../../../Components/Animated/PulseDot";
 import useUtils from "../../Monitors/utils";
+import Empty from "./empty";
 import { formatDurationRounded, formatDurationSplit } from "../../../Utils/timeUtils";
 import {
 	TzTick,
@@ -16,7 +17,6 @@ import {
 	InfrastructureTooltip,
 } from "../../../Components/Charts/Utils/chartUtils";
 import PropTypes from "prop-types";
-import { DateRangeIcon } from "@mui/x-date-pickers";
 
 const BASE_BOX_PADDING_VERTICAL = 4;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -396,13 +396,15 @@ const InfrastructureDetails = () => {
 					</Stack>
 				</Stack>
 			) : (
-				<Stack
-					direction="column"
-					gap={theme.spacing(10)}
-					mt={theme.spacing(10)}
-				>
-					<Typography variant="h2">Hang tight, there's no data yet</Typography>
-				</Stack>
+				<Empty
+					styles={{
+						border: 1,
+						borderColor: theme.palette.border.light,
+						borderRadius: theme.shape.borderRadius,
+						backgroundColor: theme.palette.background.main,
+						p: theme.spacing(30),
+					}}
+				/>
 			)}
 		</Box>
 	);