Skip to content

Commit c412562

Browse files
aslilacaslilac
committed
Update HealthLayout.tsx
1 parent f1ed76e commit c412562

File tree

1 file changed

+25
-79
lines changed

1 file changed

+25
-79
lines changed

‎site/src/pages/HealthPage/HealthLayout.tsx

Lines changed: 25 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { cx } from "@emotion/css";
21
import { useTheme } from "@emotion/react";
32
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
43
import ReplayIcon from "@mui/icons-material/Replay";
@@ -9,13 +8,13 @@ import { health, refreshHealth } from "api/queries/debug";
98
import type { HealthSeverity } from "api/typesGenerated";
109
import { ErrorAlert } from "components/Alert/ErrorAlert";
1110
import { Loader } from "components/Loader/Loader";
12-
import { type ClassName, useClassName } from "hooks/useClassName";
1311
import kebabCase from "lodash/fp/kebabCase";
1412
import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
1513
import { type FC, Suspense } from "react";
1614
import { Helmet } from "react-helmet-async";
1715
import { useMutation, useQuery, useQueryClient } from "react-query";
1816
import { NavLink, Outlet } from "react-router";
17+
import { cn } from "utils/cn";
1918
import { createDayString } from "utils/createDayString";
2019
import { pageTitle } from "utils/page";
2120
import { HealthIcon } from "./Content";
@@ -44,8 +43,12 @@ export const HealthLayout: FC = () => {
4443
} as const;
4544
const visibleSections = filterVisibleSections(sections);
4645

47-
const link = useClassName(classNames.link, []);
48-
const activeLink = useClassName(classNames.activeLink, []);
46+
const link = `
47+
text-content-secondary border-none text-sm w-full flex items-center gap-3
48+
text-left h-9 px-6 cursor-pointer no-underline transition-colors
49+
hover:bg-surface-secondary hover:text-content-primary
50+
`;
51+
const activeLink = "bg-surface-secondary text-content-primary";
4952

5053
if (isLoading) {
5154
return (
@@ -71,36 +74,17 @@ export const HealthLayout: FC = () => {
7174

7275
<DashboardFullPage>
7376
<div
74-
css={{
75-
display: "flex",
76-
flexBasis: 0,
77-
flex: 1,
78-
overflow: "hidden",
79-
}}
77+
className="flex basis-0 flex-1 overflow-hidden"
8078
>
8179
<div
82-
css={{
83-
width: 256,
84-
flexShrink: 0,
85-
borderRight: `1px solid ${theme.palette.divider}`,
86-
fontSize: 14,
87-
}}
80+
className="w-64 shrink-0 text-sm border-0 border-solid border-r border-r-border"
8881
>
8982
<div
90-
css={{
91-
padding: 24,
92-
display: "flex",
93-
flexDirection: "column",
94-
gap: 16,
95-
}}
83+
className="flex flex-col gap-4 p-6"
9684
>
9785
<div>
9886
<div
99-
css={{
100-
display: "flex",
101-
alignItems: "center",
102-
justifyContent: "space-between",
103-
}}
87+
className="flex items-center justify-between"
10488
>
10589
<HealthIcon size={32} severity={healthStatus.severity} />
10690

@@ -116,12 +100,12 @@ export const HealthLayout: FC = () => {
116100
{isRefreshing ? (
117101
<CircularProgress size={16} />
118102
) : (
119-
<ReplayIcon css={{ width: 20, height: 20 }} />
103+
<ReplayIcon className="size-5" />
120104
)}
121105
</IconButton>
122106
</Tooltip>
123107
</div>
124-
<div css={{ fontWeight: 500, marginTop: 16 }}>
108+
<div className="text-medium mt-4">
125109
{healthStatus.healthy ? "Healthy" : "Unhealthy"}
126110
</div>
127111
<div
@@ -132,44 +116,38 @@ export const HealthLayout: FC = () => {
132116
>
133117
{healthStatus.healthy
134118
? Object.keys(visibleSections).some((key) => {
135-
const section =
136-
healthStatus[key as keyof typeof visibleSections];
137-
return section.warnings && section.warnings.length > 0;
138-
})
119+
const section =
120+
healthStatus[key as keyof typeof visibleSections];
121+
return section.warnings && section.warnings.length > 0;
122+
})
139123
? "All systems operational, but performance might be degraded"
140124
: "All systems operational"
141125
: "Some issues have been detected"}
142126
</div>
143127
</div>
144128

145-
<div css={{ display: "flex", flexDirection: "column" }}>
146-
<span css={{ fontWeight: 500 }}>Last check</span>
129+
<div className="flex flex-col">
130+
<span className="text-medium">Last check</span>
147131
<span
148132
data-chromatic="ignore"
149-
css={{
150-
color: theme.palette.text.secondary,
151-
lineHeight: "150%",
152-
}}
133+
className="text-content-secondary line-height-[150%]"
153134
>
154135
{createDayString(healthStatus.time)}
155136
</span>
156137
</div>
157138

158139
<div css={{ display: "flex", flexDirection: "column" }}>
159-
<span css={{ fontWeight: 500 }}>Version</span>
140+
<span className="text-medium">Version</span>
160141
<span
161142
data-chromatic="ignore"
162-
css={{
163-
color: theme.palette.text.secondary,
164-
lineHeight: "150%",
165-
}}
143+
className="text-content-secondary line-height-[150%]"
166144
>
167145
{healthStatus.coder_version}
168146
</span>
169147
</div>
170148
</div>
171149

172-
<nav css={{ display: "flex", flexDirection: "column", gap: 1 }}>
150+
<nav className="flex flex-col gap-px">
173151
{Object.entries(visibleSections)
174152
.sort()
175153
.map(([key, label]) => {
@@ -182,7 +160,7 @@ export const HealthLayout: FC = () => {
182160
key={key}
183161
to={`/health/${kebabCase(key)}`}
184162
className={({ isActive }) =>
185-
cx([link, isActive && activeLink])
163+
cn(link, isActive && activeLink)
186164
}
187165
>
188166
<HealthIcon
@@ -205,7 +183,7 @@ export const HealthLayout: FC = () => {
205183
</nav>
206184
</div>
207185

208-
<div css={{ overflowY: "auto", width: "100%" }}>
186+
<div className="overflow-y-auto w-full">
209187
<Suspense fallback={<Loader />}>
210188
<Outlet context={healthStatus} />
211189
</Suspense>
@@ -229,35 +207,3 @@ const filterVisibleSections = <T extends object>(sections: T) => {
229207

230208
return visible;
231209
};
232-
233-
const classNames = {
234-
link: (css, theme) =>
235-
css({
236-
background: "none",
237-
pointerEvents: "auto",
238-
color: theme.palette.text.secondary,
239-
border: "none",
240-
fontSize: 14,
241-
width: "100%",
242-
display: "flex",
243-
alignItems: "center",
244-
gap: 12,
245-
textAlign: "left",
246-
height: 36,
247-
padding: "0 24px",
248-
cursor: "pointer",
249-
textDecoration: "none",
250-
251-
"&:hover": {
252-
background: theme.palette.action.hover,
253-
color: theme.palette.text.primary,
254-
},
255-
}),
256-
257-
activeLink: (css, theme) =>
258-
css({
259-
background: theme.palette.action.hover,
260-
pointerEvents: "none",
261-
color: theme.palette.text.primary,
262-
}),
263-
} satisfies Record<string, ClassName>;

0 commit comments

Comments
 (0)