TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sm -> md

Browse Source
This commit is contained in:
Alex Holliday committed 2026-06-07 15:21:53 -07:00
1 parent c34fcc5cb3
commit 942d75afcd
5 files changed
+79 -79
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Pages/StatusPage/Status/themes/bold/styles.ts
+20 -20
View File
@@ -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,
},
client/src/Pages/StatusPage/Status/themes/editorial/styles.ts
+17 -17
View File
@@ -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,
},
client/src/Pages/StatusPage/Status/themes/modern/styles.ts
+21 -21
View File
@@ -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,
},
client/src/Pages/StatusPage/Status/themes/refined/styles.ts
+19 -19
View File
@@ -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,
},
client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
<Box sx={styles.page}>
<Stack
component="header"
direction={{ xs: "column", sm: "row" }}
direction={{ xs: "column", md: "row" }}
sx={styles.top}
>
<HeaderSlot
@@ -180,7 +180,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
{t(statusBadgeKey[monitor.status])}
</Box>
<Stack
direction={{ xs: "column", sm: "row" }}
direction={{ xs: "column", md: "row" }}
sx={styles.monitorMeta}
>
<Box