diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 073565e4c..c4df4e207 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -99,7 +99,7 @@ export const boldStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "36px", @@ -130,7 +130,7 @@ export const boldStyles = ( hero: { position: "relative", borderRadius: "22px", - padding: { xs: "24px 20px", sm: "36px 36px 32px" }, + padding: { xs: "24px 20px", md: "36px 36px 32px" }, mb: "28px", background: isDark ? heroBgDark : heroBgLight, border: `1px solid ${tokens.border}`, @@ -149,13 +149,13 @@ export const boldStyles = ( }, heroTitle: { m: 0, - fontSize: { xs: 24, sm: 34 }, + fontSize: { xs: 24, md: 34 }, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.1, color: tokens.text, display: "flex", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", gap: "10px", }, @@ -174,12 +174,12 @@ export const boldStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "16px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", @@ -196,12 +196,12 @@ export const boldStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "8px 6px", sm: "8px 18px" }, + padding: { xs: "8px 6px", md: "8px 18px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 700, textTransform: "uppercase", - letterSpacing: { xs: "0.04em", sm: "0.12em" }, + letterSpacing: { xs: "0.04em", md: "0.12em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -228,21 +228,21 @@ export const boldStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "24px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "24px" }, + rowGap: { xs: "10px", md: "6px" }, p: "22px 28px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em", @@ -254,7 +254,7 @@ export const boldStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -316,10 +316,10 @@ export const boldStyles = ( }), heatmap: { - padding: { xs: "0 12px 18px", sm: "0 28px 22px" }, + padding: { xs: "0 12px 18px", md: "0 28px 22px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 48, }, heatmapCell: (kind) => ({ @@ -332,10 +332,10 @@ export const boldStyles = ( }), histogram: { - padding: { xs: "0 12px", sm: "0 28px" }, + padding: { xs: "0 12px", md: "0 28px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 48, }, diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index 8a59d46b4..868ebf186 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -90,7 +90,7 @@ export const editorialStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "flex-end" }, + alignItems: { xs: "flex-start", md: "flex-end" }, justifyContent: "space-between", gap: "12px", mb: "48px", @@ -119,7 +119,7 @@ export const editorialStyles = ( }, statusLine: { - fontSize: { xs: 18, sm: 22 }, + fontSize: { xs: 18, md: 22 }, fontWeight: 400, m: 0, mb: "8px", @@ -144,18 +144,18 @@ export const editorialStyles = ( letterSpacing: "0.12em", color: tokens.textMuted, m: 0, - mb: { xs: "32px", sm: "56px" }, + mb: { xs: "32px", md: "56px" }, }, chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "20px", fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.text}`, "& > button + button": { borderLeft: `1px solid ${tokens.text}` }, @@ -168,8 +168,8 @@ export const editorialStyles = ( fontFamily: "inherit", fontSize: 10, textTransform: "uppercase", - letterSpacing: { xs: "0.05em", sm: "0.2em" }, - padding: { xs: "6px 6px", sm: "6px 14px" }, + letterSpacing: { xs: "0.05em", md: "0.2em" }, + padding: { xs: "6px 6px", md: "6px 14px" }, border: 0, background: active ? tokens.text : "transparent", color: active ? tokens.bg : tokens.text, @@ -194,20 +194,20 @@ export const editorialStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "baseline" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "baseline" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "20px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "20px" }, + rowGap: { xs: "10px", md: "6px" }, }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontSize: 20, fontWeight: 700, letterSpacing: "-0.015em", @@ -223,7 +223,7 @@ export const editorialStyles = ( color: tokens.textMuted, gap: "12px", flexWrap: "wrap", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, }, pill: { textTransform: "uppercase", @@ -265,7 +265,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "2px" }, + gap: { xs: "1px", md: "2px" }, height: 40, }, heatmapCell: (kind) => ({ @@ -277,7 +277,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "2px" }, + gap: { xs: "1px", md: "2px" }, alignItems: "flex-end", height: 40, }, diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index 5535bc8ad..2f730ee63 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -117,7 +117,7 @@ export const modernStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "32px", @@ -148,7 +148,7 @@ export const modernStyles = ( hero: { position: "relative", borderRadius: "20px", - padding: { xs: "20px", sm: "28px 32px" }, + padding: { xs: "20px", md: "28px 32px" }, mb: "24px", display: "flex", flexDirection: "column", @@ -185,20 +185,20 @@ export const modernStyles = ( heroRow: { display: "flex", alignItems: "center", - gap: { xs: "14px", sm: "20px" }, + gap: { xs: "14px", md: "20px" }, }, heroTitle: { m: 0, flex: 1, minWidth: 0, - fontSize: { xs: 18, sm: 22 }, + fontSize: { xs: 18, md: 22 }, fontWeight: 700, letterSpacing: "-0.02em", color: tokens.text, }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ - display: { xs: "none", sm: "flex" }, + display: { xs: "none", md: "flex" }, color: toneColor(tone, tokens), alignItems: "center", flexShrink: 0, @@ -206,12 +206,12 @@ export const modernStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "14px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", @@ -228,12 +228,12 @@ export const modernStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "6px 6px", sm: "6px 16px" }, + padding: { xs: "6px 6px", md: "6px 16px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 600, textTransform: "uppercase", - letterSpacing: { xs: "0.04em", sm: "0.08em" }, + letterSpacing: { xs: "0.04em", md: "0.08em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -272,21 +272,21 @@ export const modernStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "20px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "20px" }, + rowGap: { xs: "10px", md: "6px" }, p: "18px 24px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 600, fontSize: 15, letterSpacing: "-0.005em", @@ -298,7 +298,7 @@ export const modernStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -344,10 +344,10 @@ export const modernStyles = ( }), heatmap: { - padding: { xs: "0 12px 16px", sm: "0 24px 20px" }, + padding: { xs: "0 12px 16px", md: "0 24px 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 46, }, heatmapCell: (kind) => ({ @@ -359,10 +359,10 @@ export const modernStyles = ( }), histogram: { - padding: { xs: "0 12px", sm: "0 24px" }, + padding: { xs: "0 12px", md: "0 24px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 46, }, diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index dec691a3a..0cf754af6 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -102,7 +102,7 @@ export const refinedStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "28px", @@ -133,7 +133,7 @@ export const refinedStyles = ( background: tokens.surface, border: `1px solid ${tokens.border}`, borderRadius: tokens.radius, - padding: { xs: "18px 20px", sm: "22px 24px" }, + padding: { xs: "18px 20px", md: "22px 24px" }, display: "flex", flexDirection: "column", gap: "4px", @@ -151,7 +151,7 @@ export const refinedStyles = ( heroRow: { display: "flex", alignItems: "center", - gap: { xs: "12px", sm: "16px" }, + gap: { xs: "12px", md: "16px" }, }, heroTitle: { m: 0, @@ -164,7 +164,7 @@ export const refinedStyles = ( }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ - display: { xs: "none", sm: "flex" }, + display: { xs: "none", md: "flex" }, color: toneColor(tone, tokens), alignItems: "center", flexShrink: 0, @@ -172,12 +172,12 @@ export const refinedStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "12px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "8px", @@ -194,7 +194,7 @@ export const refinedStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "5px 6px", sm: "5px 14px" }, + padding: { xs: "5px 6px", md: "5px 14px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, borderRadius: "5px", @@ -223,21 +223,21 @@ export const refinedStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "16px" }, - rowGap: { xs: "10px", sm: "4px" }, + columnGap: { md: "16px" }, + rowGap: { xs: "10px", md: "4px" }, p: "16px 20px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 600, fontSize: 14, letterSpacing: "-0.005em", @@ -249,7 +249,7 @@ export const refinedStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -286,10 +286,10 @@ export const refinedStyles = ( }), heatmap: { - padding: { xs: "0 10px 14px", sm: "0 20px 16px" }, + padding: { xs: "0 10px 14px", md: "0 20px 16px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 42, }, heatmapCell: (kind) => ({ @@ -301,10 +301,10 @@ export const refinedStyles = ( }), histogram: { - padding: { xs: "0 10px", sm: "0 20px" }, + padding: { xs: "0 10px", md: "0 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 42, }, diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx index 77da86015..a6214567d 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx @@ -104,7 +104,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => { { {t(statusBadgeKey[monitor.status])}