diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx index a4864d748..86b9d90ad 100644 --- a/client/src/Pages/StatusPage/Status/index.tsx +++ b/client/src/Pages/StatusPage/Status/index.tsx @@ -13,6 +13,7 @@ import { useLocation, useParams } from "react-router-dom"; import { useGet } from "@/Hooks/UseApi"; import type { Monitor } from "@/Types/Monitor"; import type { StatusPage, StatusPageResponse, StatusPageTheme } from "@/Types/StatusPage"; +import { resolveStatusPageTheme } from "@/Types/StatusPage"; import { HeaderStatusPageControls } from "./Components/HeaderStatusPageControls"; import { StatusPageThemeProvider } from "./themes/StatusPageThemeProvider"; import { RefinedStatusPage } from "./themes/refined/RefinedStatusPage"; @@ -26,8 +27,9 @@ type ThemedRendererProps = { monitors: (Monitor & { checks?: Monitor["recentChecks"] })[]; }; -const THEMED_RENDERERS: Partial< - Record> +const THEMED_RENDERERS: Record< + StatusPageTheme, + React.ComponentType > = { refined: RefinedStatusPage, modern: ModernStatusPage, @@ -97,15 +99,13 @@ const StatusPageView = () => { ? `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}` : null; - const ThemedRenderer = statusPage.theme - ? THEMED_RENDERERS[statusPage.theme] - : undefined; - const themedRenderer = ThemedRenderer ? ( + const ThemedRenderer = THEMED_RENDERERS[resolveStatusPageTheme(statusPage.theme)]; + const themedRenderer = ( - ) : null; + ); if (themedRenderer) { // Public route: render directly on the viewport, themed background covers everything. diff --git a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx index 294198330..416ee3293 100644 --- a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx +++ b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx @@ -8,7 +8,8 @@ import { } from "react"; import { DEFAULT_STATUS_PAGE_THEME, - DEFAULT_STATUS_PAGE_THEME_MODE, + resolveStatusPageTheme, + resolveStatusPageThemeMode, type StatusPageTheme, type StatusPageThemeMode, } from "@/Types/StatusPage"; @@ -58,8 +59,8 @@ export const StatusPageThemeProvider = ({ transparent = false, children, }: Props) => { - const resolvedTheme = theme ?? DEFAULT_STATUS_PAGE_THEME; - const resolvedThemeMode = themeMode ?? DEFAULT_STATUS_PAGE_THEME_MODE; + const resolvedTheme = resolveStatusPageTheme(theme); + const resolvedThemeMode = resolveStatusPageThemeMode(themeMode); const [systemMode, setSystemMode] = useState(resolveSystemMode); @@ -89,7 +90,7 @@ export const StatusPageThemeProvider = ({ htmlColorScheme: html.style.colorScheme, }; const resolvedMode = resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode; - const bg = themeTokens[theme ?? DEFAULT_STATUS_PAGE_THEME][resolvedMode].bg; + const bg = themeTokens[resolvedTheme][resolvedMode].bg; html.style.background = bg; body.style.background = bg; body.style.margin = "0"; @@ -100,7 +101,7 @@ export const StatusPageThemeProvider = ({ body.style.margin = prev.bodyMargin; html.style.colorScheme = prev.htmlColorScheme; }; - }, [paintBody, theme, resolvedThemeMode, systemMode]); + }, [paintBody, resolvedTheme, resolvedThemeMode, systemMode]); const resolvedMode: ResolvedMode = resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode; diff --git a/client/src/Types/StatusPage.ts b/client/src/Types/StatusPage.ts index ed592fc07..22b215ced 100644 --- a/client/src/Types/StatusPage.ts +++ b/client/src/Types/StatusPage.ts @@ -29,6 +29,16 @@ export const STATUS_PAGE_THEME_MODES = ["auto", "light", "dark"] as const; export type StatusPageThemeMode = (typeof STATUS_PAGE_THEME_MODES)[number]; export const DEFAULT_STATUS_PAGE_THEME_MODE: StatusPageThemeMode = "auto"; +export const resolveStatusPageTheme = ( + value: string | null | undefined +): StatusPageTheme => + STATUS_PAGE_THEMES.find((t) => t === value) ?? DEFAULT_STATUS_PAGE_THEME; + +export const resolveStatusPageThemeMode = ( + value: string | null | undefined +): StatusPageThemeMode => + STATUS_PAGE_THEME_MODES.find((m) => m === value) ?? DEFAULT_STATUS_PAGE_THEME_MODE; + export interface StatusPage { id: string; userId: string;