Skip to content

Commit 95388f7

Browse files
brettkolodnybrettkolodny
authored
chore: convert emotion styles to tailwind (#19357)
1 parent 3e7c8c9 commit 95388f7

File tree

6 files changed

+41
-163
lines changed

6 files changed

+41
-163
lines changed

‎site/src/modules/resources/AgentMetadata.tsx

Lines changed: 16 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
21
import Skeleton from "@mui/material/Skeleton";
32
import Tooltip from "@mui/material/Tooltip";
43
import { watchAgentMetadata } from "api/api";
@@ -18,7 +17,7 @@ import {
1817
useRef,
1918
useState,
2019
} from "react";
21-
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
20+
import { cn } from "utils/cn";
2221
import type { OneWayWebSocket } from "utils/OneWayWebSocket";
2322

2423
type ItemStatus = "stale" | "valid" | "loading";
@@ -32,7 +31,7 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
3231
return null;
3332
}
3433
return (
35-
<section css={styles.root}>
34+
<section className="flex items-baseline flex-wrap gap-8 gap-y-4">
3635
{metadata.map((m) => (
3736
<MetadataItem key={m.description.key} item={m} />
3837
))}
@@ -122,7 +121,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
122121

123122
if (activeMetadata === undefined) {
124123
return (
125-
<section css={styles.root}>
124+
<section className="flex items-baseline flex-wrap gap-8 gap-y-4">
126125
<AgentMetadataSkeleton />
127126
</section>
128127
);
@@ -134,17 +133,17 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
134133
const AgentMetadataSkeleton: FC = () => {
135134
return (
136135
<Stack alignItems="baseline" direction="row" spacing={6}>
137-
<div css={styles.metadata}>
136+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
138137
<Skeleton width={40} height={12} variant="text" />
139138
<Skeleton width={65} height={14} variant="text" />
140139
</div>
141140

142-
<div css={styles.metadata}>
141+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
143142
<Skeleton width={40} height={12} variant="text" />
144143
<Skeleton width={65} height={14} variant="text" />
145144
</div>
146145

147-
<div css={styles.metadata}>
146+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
148147
<Skeleton width={40} height={12} variant="text" />
149148
<Skeleton width={65} height={14} variant="text" />
150149
</div>
@@ -182,29 +181,29 @@ const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
182181
// could be buggy. But, how common is that anyways?
183182
const value =
184183
status === "loading" ? (
185-
<Skeleton width={65} height={12} variant="text" css={styles.skeleton} />
184+
<Skeleton width={65} height={12} variant="text" className="mt-[6px]" />
186185
) : status === "stale" ? (
187186
<Tooltip title="This data is stale and no longer up to date">
188-
<StaticWidth css={[styles.metadataValue, styles.metadataStale]}>
187+
<StaticWidth className="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
189188
{item.result.value}
190189
</StaticWidth>
191190
</Tooltip>
192191
) : (
193192
<StaticWidth
194-
css={[
195-
styles.metadataValue,
196-
item.result.error.length === 0
197-
? styles.metadataValueSuccess
198-
: styles.metadataValueError,
199-
]}
193+
className={cn(
194+
"text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-success",
195+
item.result.error.length > 0 && "text-content-destructive",
196+
)}
200197
>
201198
{item.result.value}
202199
</StaticWidth>
203200
);
204201

205202
return (
206-
<div css={styles.metadata}>
207-
<div css={styles.metadataLabel}>{item.description.display_name}</div>
203+
<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
204+
<div className="text-content-secondary text-ellipsis overflow-hidden whitespace-nowrap text-[13px]">
205+
{item.description.display_name}
206+
</div>
208207
<div>{value}</div>
209208
</div>
210209
);
@@ -236,65 +235,3 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
236235
</div>
237236
);
238237
};
239-
240-
// These are more or less copied from
241-
// site/src/modules/resources/ResourceCard.tsx
242-
const styles = {
243-
root: {
244-
display: "flex",
245-
alignItems: "baseline",
246-
flexWrap: "wrap",
247-
gap: 32,
248-
rowGap: 16,
249-
},
250-
251-
metadata: {
252-
lineHeight: "1.6",
253-
display: "flex",
254-
flexDirection: "column",
255-
overflow: "visible",
256-
flexShrink: 0,
257-
},
258-
259-
metadataLabel: (theme) => ({
260-
color: theme.palette.text.secondary,
261-
textOverflow: "ellipsis",
262-
overflow: "hidden",
263-
whiteSpace: "nowrap",
264-
fontSize: 13,
265-
}),
266-
267-
metadataValue: {
268-
textOverflow: "ellipsis",
269-
overflow: "hidden",
270-
whiteSpace: "nowrap",
271-
maxWidth: "16em",
272-
fontSize: 14,
273-
},
274-
275-
metadataValueSuccess: (theme) => ({
276-
color: theme.roles.success.fill.outline,
277-
}),
278-
279-
metadataValueError: (theme) => ({
280-
color: theme.palette.error.main,
281-
}),
282-
283-
metadataStale: (theme) => ({
284-
color: theme.palette.text.disabled,
285-
cursor: "pointer",
286-
}),
287-
288-
skeleton: {
289-
marginTop: 4,
290-
},
291-
292-
inlineCommand: (theme) => ({
293-
fontFamily: MONOSPACE_FONT_FAMILY,
294-
display: "inline-block",
295-
fontWeight: 600,
296-
margin: 0,
297-
borderRadius: 4,
298-
color: theme.palette.text.primary,
299-
}),
300-
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/modules/resources/AgentOutdatedTooltip.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useTheme } from "@emotion/react";
21
import type { WorkspaceAgent } from "api/typesGenerated";
32
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
43
import {
@@ -27,11 +26,6 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
2726
status,
2827
onUpdate,
2928
}) => {
30-
const theme = useTheme();
31-
const versionLabelStyles = {
32-
fontWeight: 600,
33-
color: theme.palette.text.primary,
34-
};
3529
const title =
3630
status === agentVersionStatus.Outdated
3731
? "Agent Outdated"
@@ -45,7 +39,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
4539
return (
4640
<HelpTooltip>
4741
<PopoverTrigger>
48-
<span role="status" css={{ cursor: "pointer" }}>
42+
<span role="status" className="cursor-pointer">
4943
{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
5044
</span>
5145
</PopoverTrigger>
@@ -57,12 +51,16 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
5751
</div>
5852

5953
<Stack spacing={0.5}>
60-
<span css={versionLabelStyles}>Agent version</span>
54+
<span className="font-semibold text-content-primary">
55+
Agent version
56+
</span>
6157
<span>{agent.version}</span>
6258
</Stack>
6359

6460
<Stack spacing={0.5}>
65-
<span css={versionLabelStyles}>Server version</span>
61+
<span className="font-semibold text-content-primary">
62+
Server version
63+
</span>
6664
<span>{serverVersion}</span>
6765
</Stack>
6866

‎site/src/modules/resources/AppLink/AppLink.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useTheme } from "@emotion/react";
21
import type * as TypesGen from "api/typesGenerated";
32
import { DropdownMenuItem } from "components/DropdownMenu/DropdownMenu";
43
import { Spinner } from "components/Spinner/Spinner";
@@ -41,7 +40,6 @@ export const AppLink: FC<AppLinkProps> = ({
4140
const { proxy } = useProxy();
4241
const host = proxy.preferredWildcardHostname;
4342
const [iconError, setIconError] = useState(false);
44-
const theme = useTheme();
4543
const link = useAppLink(app, { agent, workspace });
4644

4745
// canClick is ONLY false when it's a subdomain app and the admin hasn't
@@ -64,8 +62,7 @@ export const AppLink: FC<AppLinkProps> = ({
6462
icon = (
6563
<CircleAlertIcon
6664
aria-hidden="true"
67-
className="size-icon-sm"
68-
css={{ color: theme.palette.warning.light }}
65+
className="size-icon-sm text-content-warning"
6966
/>
7067
);
7168
primaryTooltip = "Unhealthy";
@@ -76,8 +73,7 @@ export const AppLink: FC<AppLinkProps> = ({
7673
icon = (
7774
<CircleAlertIcon
7875
aria-hidden="true"
79-
className="size-icon-sm"
80-
css={{ color: theme.palette.grey[300] }}
76+
className="size-icon-sm text-content-secondary"
8177
/>
8278
);
8379
primaryTooltip =

‎site/src/modules/resources/AppLink/AppPreview.tsx

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,7 @@ import type { FC, PropsWithChildren } from "react";
44
export const AppPreview: FC<PropsWithChildren> = ({ children }) => {
55
return (
66
<Stack
7-
css={(theme) => ({
8-
padding: "2px 12px",
9-
borderRadius: 9999,
10-
border: `1px solid ${theme.palette.divider}`,
11-
color: theme.palette.text.primary,
12-
background: theme.palette.background.paper,
13-
flexShrink: 0,
14-
width: "fit-content",
15-
fontSize: 12,
16-
17-
"& img, & svg": {
18-
width: 13,
19-
},
20-
})}
7+
className="flex items-center h-8 px-3 rounded-full border border-solid border-surface-quaternary text-content-primary bg-surface-secondary flex-shrink-0 w-fit text-xs [&>svg]:w-[13px] [&>img]:w-[13px]"
218
alignItems="center"
229
direction="row"
2310
spacing={1}

‎site/src/modules/resources/Resources.tsx

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
21
import Button from "@mui/material/Button";
32
import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
43
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
@@ -16,7 +15,6 @@ interface ResourcesProps {
1615
}
1716

1817
export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
19-
const theme = useTheme();
2018
const [shouldDisplayHideResources, setShouldDisplayHideResources] =
2119
useState(false);
2220
const displayResources = shouldDisplayHideResources
@@ -28,11 +26,7 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
2826
const hasHideResources = resources.some((r) => r.hide);
2927

3028
return (
31-
<Stack
32-
direction="column"
33-
spacing={0}
34-
css={{ background: theme.palette.background.default }}
35-
>
29+
<Stack direction="column" spacing={0} className="bg-surface-primary">
3630
{displayResources.map((resource) => (
3731
<ResourceCard
3832
key={resource.id}
@@ -41,9 +35,9 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
4135
/>
4236
))}
4337
{hasHideResources && (
44-
<div css={styles.buttonWrapper}>
38+
<div className="flex items-center justify-center mt-4">
4539
<Button
46-
css={styles.showMoreButton}
40+
className="rounded-full w-full max-w-[260px]"
4741
size="small"
4842
onClick={() => setShouldDisplayHideResources((v) => !v)}
4943
>
@@ -55,18 +49,3 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
5549
</Stack>
5650
);
5751
};
58-
59-
const styles = {
60-
buttonWrapper: {
61-
display: "flex",
62-
alignItems: "center",
63-
justifyContent: "center",
64-
marginTop: 16,
65-
},
66-
67-
showMoreButton: {
68-
borderRadius: 9999,
69-
width: "100%",
70-
maxWidth: 260,
71-
},
72-
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)