Skip to content

Commit d3bda05

Browse files
mafredrimafredri
committed
rewrite styles as Tailwind CSS
1 parent 8ce0aec commit d3bda05

File tree

1 file changed

+26
-113
lines changed

1 file changed

+26
-113
lines changed

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

Lines changed: 26 additions & 113 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 type {
43
Template,
@@ -142,26 +141,38 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
142141
}
143142
}, [devcontainer]);
144143

144+
const appsClasses = "flex flex-wrap gap-4 empty:hidden md:justify-start";
145+
145146
return (
146147
<Stack
147148
key={devcontainer.id}
148149
direction="column"
149150
spacing={0}
150-
css={styles.devcontainerRow}
151-
className="border border-border border-dashed rounded relative"
151+
className="relative py-4 border border-dashed border-border rounded"
152152
>
153153
<div
154-
css={styles.devContainerLabel}
155-
className="flex items-center gap-2 text-content-secondary"
154+
className="absolute -top-2 left-5
155+
flex items-center gap-2
156+
bg-surface-primary px-2
157+
text-xs text-content-secondary"
156158
>
157-
<Container css={styles.devContainerIcon} size={12} />
159+
<Container size={12} className="mr-1.5" />
158160
<span>dev container</span>
159161
</div>
160-
<header css={styles.header}>
161-
<div css={styles.agentInfo}>
162-
<div css={styles.agentNameAndStatus}>
162+
<header
163+
className="flex items-center justify-between flex-wrap
164+
gap-6 px-4 pl-8 leading-6
165+
md:gap-4"
166+
>
167+
<div className="flex items-center gap-6 text-xs text-content-secondary">
168+
<div className="flex items-center gap-4 md:w-full">
163169
<SubAgentStatus agent={subAgent} />
164-
<span css={styles.agentName}>
170+
<span
171+
className="max-w-xs shrink-0
172+
overflow-hidden text-ellipsis whitespace-nowrap
173+
text-sm font-semibold text-content-primary
174+
md:overflow-visible"
175+
>
165176
{subAgent?.name ?? devcontainer.name}
166177
{!isRebuilding && devcontainer.container && (
167178
<span className="text-content-tertiary">
@@ -221,7 +232,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
221232
</header>
222233

223234
{(showSubAgentApps || showSubAgentAppsPlaceholders) && (
224-
<div css={styles.content}>
235+
<div className="flex flex-col gap-8 px-8 pt-4">
225236
{subAgent &&
226237
workspace.latest_app_status?.agent_id === subAgent.id && (
227238
<section>
@@ -231,7 +242,7 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
231242
)}
232243

233244
{showSubAgentApps && (
234-
<section css={styles.apps}>
245+
<section className={appsClasses}>
235246
<>
236247
{showVSCode && (
237248
<VSCodeDevContainerButton
@@ -299,18 +310,18 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
299310
)}
300311

301312
{showSubAgentAppsPlaceholders && (
302-
<section css={styles.apps}>
313+
<section className={appsClasses}>
303314
<Skeleton
304315
width={80}
305316
height={32}
306317
variant="rectangular"
307-
css={styles.buttonSkeleton}
318+
className="rounded"
308319
/>
309320
<Skeleton
310321
width={110}
311322
height={32}
312323
variant="rectangular"
313-
css={styles.buttonSkeleton}
324+
className="rounded"
314325
/>
315326
</section>
316327
)}
@@ -319,101 +330,3 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
319330
</Stack>
320331
);
321332
};
322-
323-
const styles = {
324-
devContainerLabel: (theme) => ({
325-
backgroundColor: theme.palette.background.default,
326-
fontSize: 12,
327-
lineHeight: 1,
328-
padding: "4px 8px",
329-
position: "absolute",
330-
top: -11,
331-
left: 20,
332-
}),
333-
devContainerIcon: {
334-
marginRight: 5,
335-
},
336-
337-
devcontainerRow: {
338-
padding: "16px 0px",
339-
},
340-
341-
// Many of these styles are borrowed or mimic those from AgentRow.tsx.
342-
header: (theme) => ({
343-
padding: "0px 16px 0px 32px",
344-
display: "flex",
345-
gap: 24,
346-
alignItems: "center",
347-
justifyContent: "space-between",
348-
flexWrap: "wrap",
349-
lineHeight: "1.5",
350-
351-
"&:has(+ [role='alert'])": {
352-
paddingBottom: 16,
353-
},
354-
355-
[theme.breakpoints.down("md")]: {
356-
gap: 16,
357-
},
358-
}),
359-
360-
agentInfo: (theme) => ({
361-
display: "flex",
362-
alignItems: "center",
363-
gap: 24,
364-
color: theme.palette.text.secondary,
365-
fontSize: 12,
366-
}),
367-
368-
content: {
369-
padding: "16px 32px 0px 32px",
370-
display: "flex",
371-
flexDirection: "column",
372-
gap: 32,
373-
},
374-
375-
apps: (theme) => ({
376-
display: "flex",
377-
gap: 16,
378-
flexWrap: "wrap",
379-
380-
"&:empty": {
381-
display: "none",
382-
},
383-
384-
[theme.breakpoints.down("md")]: {
385-
marginLeft: 0,
386-
justifyContent: "flex-start",
387-
},
388-
}),
389-
390-
agentNameAndStatus: (theme) => ({
391-
display: "flex",
392-
alignItems: "center",
393-
gap: 16,
394-
395-
[theme.breakpoints.down("md")]: {
396-
width: "100%",
397-
},
398-
}),
399-
400-
agentName: (theme) => ({
401-
whiteSpace: "nowrap",
402-
overflow: "hidden",
403-
textOverflow: "ellipsis",
404-
maxWidth: 260,
405-
fontWeight: 600,
406-
flexShrink: 0,
407-
width: "fit-content",
408-
fontSize: 14,
409-
color: theme.palette.text.primary,
410-
411-
[theme.breakpoints.down("md")]: {
412-
overflow: "unset",
413-
},
414-
}),
415-
416-
buttonSkeleton: {
417-
borderRadius: 4,
418-
},
419-
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)