Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit95388f7

Browse files
authored
chore: convert emotion styles to tailwind (#19357)
1 parent3e7c8c9 commit95388f7

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-
importtype{Interpolation,Theme}from"@emotion/react";
21
importSkeletonfrom"@mui/material/Skeleton";
32
importTooltipfrom"@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
importtype{OneWayWebSocket}from"utils/OneWayWebSocket";
2322

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

123122
if(activeMetadata===undefined){
124123
return(
125-
<sectioncss={styles.root}>
124+
<sectionclassName="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
constAgentMetadataSkeleton:FC=()=>{
135134
return(
136135
<StackalignItems="baseline"direction="row"spacing={6}>
137-
<divcss={styles.metadata}>
136+
<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
138137
<Skeletonwidth={40}height={12}variant="text"/>
139138
<Skeletonwidth={65}height={14}variant="text"/>
140139
</div>
141140

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

147-
<divcss={styles.metadata}>
146+
<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
148147
<Skeletonwidth={40}height={12}variant="text"/>
149148
<Skeletonwidth={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
constvalue=
184183
status==="loading" ?(
185-
<Skeletonwidth={65}height={12}variant="text"css={styles.skeleton}/>
184+
<Skeletonwidth={65}height={12}variant="text"className="mt-[6px]"/>
186185
) :status==="stale" ?(
187186
<Tooltiptitle="This data is stale and no longer up to date">
188-
<StaticWidthcss={[styles.metadataValue,styles.metadataStale]}>
187+
<StaticWidthclassName="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-
<divcss={styles.metadata}>
207-
<divcss={styles.metadataLabel}>{item.description.display_name}</div>
203+
<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
204+
<divclassName="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-
conststyles={
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-
}satisfiesRecord<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
importtype{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-
consttheme=useTheme();
31-
constversionLabelStyles={
32-
fontWeight:600,
33-
color:theme.palette.text.primary,
34-
};
3529
consttitle=
3630
status===agentVersionStatus.Outdated
3731
?"Agent Outdated"
@@ -45,7 +39,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
4539
return(
4640
<HelpTooltip>
4741
<PopoverTrigger>
48-
<spanrole="status"css={{cursor:"pointer"}}>
42+
<spanrole="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
<Stackspacing={0.5}>
60-
<spancss={versionLabelStyles}>Agent version</span>
54+
<spanclassName="font-semibold text-content-primary">
55+
Agent version
56+
</span>
6157
<span>{agent.version}</span>
6258
</Stack>
6359

6460
<Stackspacing={0.5}>
65-
<spancss={versionLabelStyles}>Server version</span>
61+
<spanclassName="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
importtype*asTypesGenfrom"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
consthost=proxy.preferredWildcardHostname;
4342
const[iconError,setIconError]=useState(false);
44-
consttheme=useTheme();
4543
constlink=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
exportconstAppPreview: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}
Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
21
importButtonfrom"@mui/material/Button";
32
importtype{WorkspaceAgent,WorkspaceResource}from"api/typesGenerated";
43
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
@@ -16,7 +15,6 @@ interface ResourcesProps {
1615
}
1716

1817
exportconstResources:FC<ResourcesProps>=({ resources, agentRow})=>{
19-
consttheme=useTheme();
2018
const[shouldDisplayHideResources,setShouldDisplayHideResources]=
2119
useState(false);
2220
constdisplayResources=shouldDisplayHideResources
@@ -28,11 +26,7 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
2826
consthasHideResources=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+
<Stackdirection="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-
<divcss={styles.buttonWrapper}>
38+
<divclassName="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-
conststyles={
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-
}satisfiesRecord<string,Interpolation<Theme>>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp