From 4f8f2f14229e2ba6dd8c9f4d82c0dd7e9d8d56dd Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Mon, 27 Apr 2026 18:45:45 -0400 Subject: [PATCH] refactor(status-page): tighten the bold/modern/editorial conversion Apply review feedback: - Editorial chartSwitch: drop the per-button isFirst flag and put the divider on the parent via "& > button + button { borderLeft }"; chartSwitchButton(active) now matches bold/modern's signature - Drop the empty company: {} entries in bold/modern and the wrapper span around the company name; the parent brand row already styles it - Editorial styles factory: keep the (tokens, isDark) signature for cross-theme uniformity but acknowledge the unused isDark with a void-statement instead of an underscore prefix --- .../Status/themes/bold/BoldStatusPage.tsx | 7 +------ .../Pages/StatusPage/Status/themes/bold/styles.ts | 2 -- .../themes/editorial/EditorialStatusPage.tsx | 4 ++-- .../StatusPage/Status/themes/editorial/styles.ts | 14 +++++++++----- .../Status/themes/modern/ModernStatusPage.tsx | 7 +------ .../StatusPage/Status/themes/modern/styles.ts | 2 -- 6 files changed, 13 insertions(+), 23 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/themes/bold/BoldStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/bold/BoldStatusPage.tsx index feb17d917..32959a2ed 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/BoldStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/bold/BoldStatusPage.tsx @@ -52,12 +52,7 @@ export const BoldStatusPage = ({ statusPage, monitors }: Props) => { ) : ( {monoFirstChar(statusPage.companyName)} )} - - {statusPage.companyName} - + {statusPage.companyName} diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 50f8c9cf0..39c9864a8 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -12,7 +12,6 @@ export interface BoldStyles { brand: SxProps; logoConic: SxProps; logoImg: SxProps; - company: SxProps; hero: SxProps; heroTitle: SxProps; heroCheck: (tone: OverallTone) => SxProps; @@ -128,7 +127,6 @@ export const boldStyles = ( boxShadow: `0 8px 24px color-mix(in srgb, ${tokens.up} 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2)`, }, logoImg: { maxHeight: 36, maxWidth: 140, objectFit: "contain" }, - company: {}, hero: { position: "relative", diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/EditorialStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/editorial/EditorialStatusPage.tsx index e6c57a5bf..7b5ed16a5 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/EditorialStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/editorial/EditorialStatusPage.tsx @@ -108,7 +108,7 @@ export const EditorialStatusPage = ({ statusPage, monitors }: Props) => { role="radio" aria-checked={chartMode === "heatmap"} onClick={() => setChartMode("heatmap")} - sx={styles.chartSwitchButton(chartMode === "heatmap", true)} + sx={styles.chartSwitchButton(chartMode === "heatmap")} > {t("pages.statusPages.monitorsList.chartTypeHeatmap")} @@ -118,7 +118,7 @@ export const EditorialStatusPage = ({ statusPage, monitors }: Props) => { role="radio" aria-checked={chartMode === "histogram"} onClick={() => setChartMode("histogram")} - sx={styles.chartSwitchButton(chartMode === "histogram", false)} + sx={styles.chartSwitchButton(chartMode === "histogram")} > {t("pages.statusPages.monitorsList.chartTypeHistogram")} diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index c3948577e..eea8a88ff 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -18,7 +18,7 @@ export interface EditorialStyles { dateline: SxProps; chartSwitchWrap: SxProps; chartSwitch: SxProps; - chartSwitchButton: (active: boolean, isFirst: boolean) => SxProps; + chartSwitchButton: (active: boolean) => SxProps; monitorList: SxProps; card: SxProps; cardRow: SxProps; @@ -50,8 +50,9 @@ const sansStack = '-apple-system, "Helvetica Neue", Arial, sans-serif'; export const editorialStyles = ( tokens: StatusPageThemeTokens, - _isDark: boolean + isDark: boolean ): EditorialStyles => { + void isDark; const heatCellBg: Record = { fast: tokens.up, med: `color-mix(in srgb, ${tokens.up} 60%, ${tokens.bg})`, @@ -150,8 +151,12 @@ export const editorialStyles = ( mb: "20px", fontFamily: sansStack, }, - chartSwitch: { display: "inline-flex", border: `1px solid ${tokens.text}` }, - chartSwitchButton: (active, isFirst) => ({ + chartSwitch: { + display: "inline-flex", + border: `1px solid ${tokens.text}`, + "& > button + button": { borderLeft: `1px solid ${tokens.text}` }, + }, + chartSwitchButton: (active) => ({ fontFamily: "inherit", fontSize: 10, textTransform: "uppercase", @@ -162,7 +167,6 @@ export const editorialStyles = ( color: active ? tokens.bg : tokens.text, cursor: "pointer", fontWeight: 700, - ...(isFirst ? {} : { borderLeft: `1px solid ${tokens.text}` }), }), monitorList: { diff --git a/client/src/Pages/StatusPage/Status/themes/modern/ModernStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/modern/ModernStatusPage.tsx index 6d2046c0f..461c5e0f5 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/ModernStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/modern/ModernStatusPage.tsx @@ -52,12 +52,7 @@ export const ModernStatusPage = ({ statusPage, monitors }: Props) => { ) : ( {monoFirstChar(statusPage.companyName)} )} - - {statusPage.companyName} - + {statusPage.companyName} diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index 915b26b6a..e9fe9e0d3 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -13,7 +13,6 @@ export interface ModernStyles { brand: SxProps; logoGrad: SxProps; logoImg: SxProps; - company: SxProps; hero: SxProps; pulse: (tone: OverallTone) => SxProps; statusCopy: SxProps; @@ -135,7 +134,6 @@ export const modernStyles = ( boxShadow: `0 4px 10px color-mix(in srgb, ${tokens.up} 40%, transparent)`, }, logoImg: { maxHeight: 32, maxWidth: 120, objectFit: "contain" }, - company: {}, hero: { position: "relative",