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",