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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy