Merge pull request #1842 from bluewave-labs/feat/DePIN-status-page-theme

feat: DePIN status page theme

src/Features/UI/uiSlice.js

@@ -53,8 +53,8 @@ const uiSlice = createSlice({
 			state.timezone = action.payload.timezone;
 		},
 		setLanguage(state, action) {
-            state.language = action.payload;
-        },
+			state.language = action.payload;
+		},
 	},
 });
 

src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -18,10 +18,11 @@ import InfoBox from "../../../Components/InfoBox";
 import StatusHeader from "../../DistributedUptime/Details/Components/StatusHeader";
 import MonitorsList from "./Components/MonitorsList";
 import { RowContainer } from "../../../Components/StandardContainer";
+import ThemeSwitch from "../../../Components/ThemeSwitch";
 
 //Utils
 import { useTheme } from "@mui/material/styles";
-import { useState, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl";
@@ -31,6 +32,8 @@ import SubHeader from "../../../Components/Subheader";
 import { safelyParseFloat } from "../../../Utils/utils";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { useSelector, useDispatch } from "react-redux";
+import { setMode } from "../../../Features/UI/uiSlice";
 
 // Responsive
 import { useMediaQuery } from "@mui/material";
@@ -40,8 +43,12 @@ const DistributedUptimeStatus = () => {
 	const location = useLocation();
 	const { t } = useTranslation();
 	const isPublic = location.pathname.startsWith("/status/distributed/public");
-
 	const elementToCapture = useRef(null);
+
+	// Redux state
+	const mode = useSelector((state) => state.ui.mode);
+	const originalModeRef = useRef(null);
+
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
@@ -50,6 +57,7 @@ const DistributedUptimeStatus = () => {
 	const theme = useTheme();
 	const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
 	const navigate = useNavigate();
+	const dispatch = useDispatch();
 
 	const [
 		statusPageIsLoading,
@@ -85,6 +93,28 @@ const DistributedUptimeStatus = () => {
 		};
 	}
 
+	// Default to dark mode
+	useEffect(() => {
+		const cleanup = () => {
+			if (originalModeRef.current === null) {
+				originalModeRef.current = mode;
+			}
+
+			if (isPublic) {
+				dispatch(setMode(originalModeRef.current));
+			}
+		};
+
+		if (isPublic) {
+			dispatch(setMode("dark"));
+		}
+
+		window.addEventListener("beforeunload", cleanup);
+		return () => {
+			window.removeEventListener("beforeunload", cleanup);
+		};
+	}, [dispatch, isPublic]);
+
 	// Done loading, a status page doesn't exist
 	if (!statusPageIsLoading && typeof statusPage === "undefined") {
 		return (
@@ -158,9 +188,10 @@ const DistributedUptimeStatus = () => {
 			}}
 		>
 			{!isPublic && <Breadcrumbs list={BREADCRUMBS} />}
+
 			<ControlsHeader
-				shouldShow={!isPublic}
 				statusPage={statusPage}
+				isPublic={isPublic}
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}

src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -2,7 +2,7 @@
 import { Box, Stack, Typography, Button } from "@mui/material";
 import Image from "../../../../../Components/Image";
 import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
-
+import ThemeSwitch from "../../../../../Components/ThemeSwitch";
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -76,6 +76,7 @@ Controls.propTypes = {
 
 const ControlsHeader = ({
 	statusPage,
+	isPublic,
 	isDeleting,
 	isDeleteOpen,
 	setIsDeleteOpen,
@@ -105,7 +106,16 @@ const ControlsHeader = ({
 					maxHeight={"50px"}
 					base64={statusPage?.logo?.data}
 				/>
-				<Typography variant="h1">{statusPage?.companyName}</Typography>
+				<Typography
+					variant="h1"
+					overflow="hidden"
+					textOverflow="ellipsis"
+					sx={{
+						maxWidth: { xs: "200px", sm: "100%" },
+					}}
+				>
+					{statusPage?.companyName}
+				</Typography>
 			</Stack>
 			<Controls
 				isDeleting={isDeleting}
@@ -114,6 +124,7 @@ const ControlsHeader = ({
 				url={url}
 				type={type}
 			/>
+			{isPublic && <ThemeSwitch />}
 		</Stack>
 	);
 };
@@ -121,6 +132,7 @@ const ControlsHeader = ({
 ControlsHeader.propTypes = {
 	url: PropTypes.string,
 	statusPage: PropTypes.object,
+	isPublic: PropTypes.bool,
 	isDeleting: PropTypes.bool,
 	isDeleteOpen: PropTypes.bool.isRequired,
 	setIsDeleteOpen: PropTypes.func.isRequired,

src/Utils/Theme/constants.js

@@ -282,7 +282,7 @@ const newSemanticColors = {
 	},
 	chatbot: {
 		background: {
-			light: "#112B2B",
+			light: newColors.gray200,
 			dark: "#112B2B",
 		},
 		textAccent: {