From b9f8546044551f483d7c4582ae3b92dd9ac5c84e Mon Sep 17 00:00:00 2001 From: Test User Date: Sun, 12 Jul 2026 20:43:06 +0200 Subject: [PATCH] style: match status page to openshopgraph.org design language Re-theme the UptimeFlare fork's chrome (surfaces, borders, type, header wordmark, footer line) to the openshopgraph.org design tokens, sourced from openshopgraph-frontend-v2 src/styles/site-tokens.css. Monitor set, check logic and page title/links config are untouched. - Copy the site's self-hosted Cabinet Grotesk / Switzer / Martian Mono woff2 faces (~124 KB) into public/fonts and remap Mantine's CSS variables (--mantine-font-family[-headings/-monospace]) to the same stacks; drop the next/font/google Inter import (font-CDN-free, same rule as the main site's CSP). - Remap Mantine surface/text/border variables per color scheme (--mantine-color-body/text/white/dark-6/dark-4/anchor/dimmed, --mantine-primary-color-filled) to --paper/--ink/--card/--hair from site-tokens.css; keeps following prefers-color-scheme via Mantine's existing defaultColorScheme="auto" script, matching the main site's light/dark behavior. Semantic monitor-state colors (green/red icons) are left alone on purpose. - Bump --mantine-radius-{sm,md,lg} to the main site's softer values. - Replace the generic UptimeFlare logo in Header.tsx with the OSG two-dot wordmark (same glyph as BaseLayout.astro's .top-brand mark), linking to https://openshopgraph.org. - Set pageConfig.customFooter to a one-line footer matching the main site's "Verified data, not ads." tone instead of the stock UptimeFlare attribution line. Co-Authored-By: Claude Fable 5 --- components/Header.tsx | 36 ++++++--- pages/_app.tsx | 2 + pages/incidents.tsx | 4 +- pages/index.tsx | 4 +- public/fonts/cabinet-grotesk-700.woff2 | Bin 0 -> 20300 bytes public/fonts/cabinet-grotesk-800.woff2 | Bin 0 -> 20204 bytes public/fonts/martian-mono-400.woff2 | Bin 0 -> 10936 bytes public/fonts/martian-mono-600.woff2 | Bin 0 -> 11092 bytes public/fonts/switzer-400.woff2 | Bin 0 -> 16728 bytes public/fonts/switzer-500.woff2 | Bin 0 -> 19564 bytes public/fonts/switzer-600.woff2 | Bin 0 -> 19640 bytes styles/Header.module.css | 6 +- styles/osg-fonts.css | 65 +++++++++++++++ styles/osg-theme.css | 105 +++++++++++++++++++++++++ uptime.config.ts | 5 ++ 15 files changed, 206 insertions(+), 21 deletions(-) create mode 100644 public/fonts/cabinet-grotesk-700.woff2 create mode 100644 public/fonts/cabinet-grotesk-800.woff2 create mode 100644 public/fonts/martian-mono-400.woff2 create mode 100644 public/fonts/martian-mono-600.woff2 create mode 100644 public/fonts/switzer-400.woff2 create mode 100644 public/fonts/switzer-500.woff2 create mode 100644 public/fonts/switzer-600.woff2 create mode 100644 styles/osg-fonts.css create mode 100644 styles/osg-theme.css diff --git a/components/Header.tsx b/components/Header.tsx index bfccf32..fc44a55 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,9 +1,28 @@ -import { Container, Group, Image } from '@mantine/core' +import { Container, Group } from '@mantine/core' import classes from '@/styles/Header.module.css' import { pageConfig } from '@/uptime.config' import { PageConfigLink } from '@/types/config' import { useTranslation } from 'react-i18next' +// OSG brand mark — same two-dot "connect" glyph as the wordmark on +// openshopgraph.org (BaseLayout.astro .top-brand .mark svg). +function OsgMark() { + return ( + + + + + + + + ) +} + export default function Header({ style }: { style?: React.CSSProperties }) { const { t } = useTranslation('common') const linkToElement = (link: PageConfigLink, i: number) => { @@ -26,17 +45,10 @@ export default function Header({ style }: { style?: React.CSSProperties }) {
- - logo + + + OpenShopGraph +  Status
diff --git a/pages/_app.tsx b/pages/_app.tsx index 1521da4..5c9b04b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,4 +1,6 @@ import '@mantine/core/styles.css' +import '@/styles/osg-fonts.css' +import '@/styles/osg-theme.css' import type { AppProps } from 'next/app' import { MantineProvider } from '@mantine/core' import NoSsr from '@/components/NoSsr' diff --git a/pages/incidents.tsx b/pages/incidents.tsx index 480e5e4..8f00821 100644 --- a/pages/incidents.tsx +++ b/pages/incidents.tsx @@ -1,6 +1,5 @@ import Head from 'next/head' -import { Inter } from 'next/font/google' import { MaintenanceConfig, MonitorTarget } from '@/types/config' import { maintenances, pageConfig } from '@/uptime.config' import Header from '@/components/Header' @@ -12,7 +11,6 @@ import NoIncidentsAlert from '@/components/NoIncidents' import { useTranslation } from 'react-i18next' export const runtime = 'experimental-edge' -const inter = Inter({ subsets: ['latin'] }) function getSelectedMonth() { const hash = window.location.hash.replace('#', '') @@ -87,7 +85,7 @@ export default function IncidentsPage({ monitors }: { monitors: MonitorTarget[] -
+