add sharing feature

src/Pages/DistributedUptime/Details/Components/DistributedUptimeMap/index.jsx

@@ -5,7 +5,6 @@ import { useTheme } from "@mui/material/styles";
 import maplibregl from "maplibre-gl";
 import { useSelector } from "react-redux";
 import buildStyle from "./buildStyle";
-import { ColContainer } from "../../../../../Components/StandardContainer";
 
 const DistributedUptimeMap = ({ width = "100%", checks }) => {
 	const mapContainer = useRef(null);
@@ -29,12 +28,17 @@ const DistributedUptimeMap = ({ width = "100%", checks }) => {
 	useEffect(() => {
 		if (mapContainer.current && !map.current) {
 			const initialStyle = buildStyle(initialTheme.current, initialMode.current);
+
 			map.current = new maplibregl.Map({
 				container: mapContainer.current,
 				style: initialStyle,
 				center: [0, 20],
 				zoom: 0.8,
 				attributionControl: false,
+				canvasContextAttributes: {
+					antialias: true,
+					preserveDrawingBuffer: true,
+				},
 			});
 		}
 		map.current.on("load", () => {

src/Pages/DistributedUptime/Details/Components/StatusHeader/index.jsx

@@ -4,19 +4,17 @@ import { Stack, Typography } from "@mui/material";
 import PulseDot from "../../../../../Components/Animated/PulseDot";
 import LastUpdate from "../LastUpdate";
 import ChatBot from "../Chatbot";
+import ShareComponent from "../../../../../Components/ShareComponent";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
-const StatusHeader = ({ monitor, connectionStatus }) => {
-	console.log(monitor);
-
+const StatusHeader = ({ monitor, connectionStatus, elementToCapture }) => {
 	const theme = useTheme();
-
 	const COLOR_MAP = {
-		up: theme.palette.distributedStatusHeader.up,
-		down: theme.palette.distributedStatusHeader.down,
+		up: theme.palette.successSecondary.main,
+		down: theme.palette.error.lowContrast,
 	};
 
 	const MSG_MAP = {
@@ -35,43 +33,48 @@ const StatusHeader = ({ monitor, connectionStatus }) => {
 		<ColContainer backgroundColor={bgColor}>
 			<Stack
 				direction="row"
+				justifyContent="space-between"
 				gap={theme.spacing(8)}
 			>
-				<PulseDot color={PULSE_COLOR[connectionStatus]} />
-				<Stack>
-					<Stack
-						direction="row"
-						gap={theme.spacing(8)}
-					>
-						<Typography
-							variant="h1"
-							color={theme.palette.distributedStatusHeader.textPrimary}
+				<Stack
+					direction="row"
+					gap={theme.spacing(8)}
+				>
+					<PulseDot color={PULSE_COLOR[connectionStatus]} />
+					<Stack>
+						<Stack
+							direction="row"
+							gap={theme.spacing(8)}
 						>
-							{MSG_MAP[connectionStatus]}
-						</Typography>
+							<Typography
+								variant="h1"
+								color={theme.palette.success.lowContrast}
+							>
+								{MSG_MAP[connectionStatus]}
+							</Typography>
+							<Typography
+								variant="body2"
+								borderRadius={theme.spacing(8)}
+								padding={theme.spacing(4)}
+								backgroundColor={theme.palette.successSecondary.lowContrast}
+								color={theme.palette.success.lowContrast}
+							>
+								Uptime: {(monitor.totalUptime * 100).toFixed(2)}%
+							</Typography>
+						</Stack>
 						<Typography
 							variant="body2"
-							borderRadius={theme.spacing(8)}
-							padding={theme.spacing(4)}
-							backgroundColor={
-								theme.palette.distributedStatusHeader.textPrimaryBackground
-							}
-							color={theme.palette.distributedStatusHeader.textPrimary}
+							color={theme.palette.success.lowContrast}
 						>
-							Uptime: {(monitor.totalUptime * 100).toFixed(2)}%
+							Last updated{" "}
+							<LastUpdate
+								suffix={"seconds ago"}
+								lastUpdateTime={monitor.timeSinceLastCheck}
+							/>
 						</Typography>
 					</Stack>
-					<Typography
-						variant="body2"
-						color={theme.palette.distributedStatusHeader.textSecondary}
-					>
-						Last updated{" "}
-						<LastUpdate
-							suffix={"seconds ago"}
-							lastUpdateTime={monitor.timeSinceLastCheck}
-						/>
-					</Typography>
 				</Stack>
+				<ShareComponent elementToCapture={elementToCapture} />
 			</Stack>
 			<ChatBot sx={{ marginTop: theme.spacing(10) }} />
 		</ColContainer>

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -19,7 +19,7 @@ import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeade
 
 //Utils
 import { useTheme } from "@mui/material/styles";
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
@@ -31,6 +31,7 @@ const DistributedUptimeStatus = () => {
 	const location = useLocation();
 	const isPublic = location.pathname.startsWith("/status/distributed/public");
 
+	const elementToCapture = useRef(null);
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
@@ -135,9 +136,12 @@ const DistributedUptimeStatus = () => {
 
 	return (
 		<Stack
+			ref={elementToCapture}
 			direction="column"
 			gap={theme.spacing(10)}
-			sx={sx}
+			sx={{
+				...sx,
+			}}
 		>
 			{!isPublic && <Breadcrumbs list={BREADCRUMBS} />}
 			<ControlsHeader
@@ -153,6 +157,7 @@ const DistributedUptimeStatus = () => {
 			<StatusHeader
 				monitor={monitor}
 				connectionStatus={connectionStatus}
+				elementToCapture={elementToCapture}
 			/>
 
 			<NextExpectedCheck