diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx index ee9c77e21c..0fb184fb1d 100644 --- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx +++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx @@ -35,11 +35,10 @@ export const SyntaxHighlighter: FC<{ return (
({ + css={{ padding: "8px 0", - background: theme.palette.background.paper, height: "100%", - })} + }} > {hasDiff ? ( diff --git a/site/src/pages/HealthPage/HealthPage.tsx b/site/src/pages/HealthPage/HealthPage.tsx index 8825f01435..45a8f91d67 100644 --- a/site/src/pages/HealthPage/HealthPage.tsx +++ b/site/src/pages/HealthPage/HealthPage.tsx @@ -1,4 +1,3 @@ -import { type Interpolation, type Theme } from "@emotion/react"; import Box from "@mui/material/Box"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { getHealth } from "api/api"; @@ -6,23 +5,17 @@ import { Loader } from "components/Loader/Loader"; import { useTab } from "hooks"; import { Helmet } from "react-helmet-async"; import { pageTitle } from "utils/page"; -import { colors } from "theme/colors"; import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; import ErrorOutline from "@mui/icons-material/ErrorOutline"; import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"; -import { Stack } from "components/Stack/Stack"; -import { - FullWidthPageHeader, - PageHeaderTitle, - PageHeaderSubtitle, -} from "components/PageHeader/FullWidthPageHeader"; -import { Stats, StatsItem } from "components/Stats/Stats"; import { createDayString } from "utils/createDayString"; import { DashboardFullPage } from "components/Dashboard/DashboardLayout"; -import { LoadingButton } from "@mui/lab"; import ReplayIcon from "@mui/icons-material/Replay"; -import { FC } from "react"; import { health, refreshHealth } from "api/queries/debug"; +import { useTheme } from "@mui/material/styles"; +import IconButton from "@mui/material/IconButton"; +import Tooltip from "@mui/material/Tooltip"; +import CircularProgress from "@mui/material/CircularProgress"; const sections = { derp: "DERP", @@ -74,62 +67,10 @@ export function HealthPageView({ forceRefresh: () => void; isRefreshing: boolean; }) { + const theme = useTheme(); + return ( - - - {healthStatus.healthy ? ( - theme.palette.success.light, - }} - /> - ) : ( - theme.palette.error.main, - }} - /> - )} - -
- - {healthStatus.healthy ? "Healthy" : "Unhealthy"} - - - {healthStatus.healthy - ? Object.keys(sections).some( - (key) => - healthStatus[key as keyof typeof sections].warnings !== - null && - healthStatus[key as keyof typeof sections].warnings - .length > 0, - ) - ? "All systems operational, but performance might be degraded" - : "All systems operational" - : "Some issues have been detected"} - -
- - - - - - - - - `1px solid ${theme.palette.divider}`, + borderRight: `1px solid ${theme.palette.divider}`, + fontSize: 14, }} > - theme.palette.text.secondary, - padding: "12px 24px", - letterSpacing: "0.5px", +
- Health - - +
+
+ {healthStatus.healthy ? ( + + ) : ( + + )} + + + + {isRefreshing ? ( + + ) : ( + + )} + + +
+
+ {healthStatus.healthy ? "Healthy" : "Unhealthy"} +
+
+ {healthStatus.healthy + ? Object.keys(sections).some( + (key) => + healthStatus[key as keyof typeof sections].warnings !== + null && + healthStatus[key as keyof typeof sections].warnings + .length > 0, + ) + ? "All systems operational, but performance might be degraded" + : "All systems operational" + : "Some issues have been detected"} +
+
+ +
+ Last check + + {createDayString(healthStatus.time)} + +
+ +
+ Version + + {healthStatus.coder_version} + +
+
+ + +
{/* 62px - navbar and 36px - the bottom bar */} ); } - -const styles = { - stats: (theme) => ({ - padding: 0, - border: 0, - gap: 48, - rowGap: 24, - flex: 1, - - [theme.breakpoints.down("md")]: { - display: "flex", - flexDirection: "column", - alignItems: "flex-start", - gap: 8, - }, - }), - - statsItem: { - flexDirection: "column", - gap: 0, - padding: 0, - - "& > span:first-of-type": { - fontSize: 12, - fontWeight: 500, - }, - }, -} satisfies Record>; - -interface HealthcheckAction { - handleAction: () => void; - loading: boolean; -} - -export const RefreshButton: FC = ({ - handleAction, - loading, -}) => { - return ( - } - onClick={handleAction} - > - Refresh - - ); -}; diff --git a/site/src/theme/mui.ts b/site/src/theme/mui.ts index 00ecdb31a0..4578012e48 100644 --- a/site/src/theme/mui.ts +++ b/site/src/theme/mui.ts @@ -80,12 +80,12 @@ export let dark = createTheme({ body1: { fontSize: "1rem" /* 16px at default scaling */, - lineHeight: "1.5rem" /* 24px at default scaling */, + lineHeight: "160%", }, body2: { fontSize: "0.875rem" /* 14px at default scaling */, - lineHeight: "1.25rem" /* 20px at default scaling */, + lineHeight: "160%", }, }, shape: {