Skip to content

Commit 7649679

Browse files
sachasayansachasayan
committed
Transition MCP Views to Tailwind
1 parent 4fc47eb commit 7649679

File tree

5 files changed

+83
-252
lines changed

5 files changed

+83
-252
lines changed

‎webview-ui/src/components/mcp/McpEnabledToggle.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,11 @@ const McpEnabledToggle = () => {
1616
}
1717

1818
return (
19-
<div style={{ marginBottom: "20px" }}>
19+
<div className="mb-5">
2020
<VSCodeCheckbox checked={mcpEnabled} onChange={handleChange}>
21-
<span style={{ fontWeight: "500" }}>{t("mcp:enableToggle.title")}</span>
21+
<span className="font-medium">{t("mcp:enableToggle.title")}</span>
2222
</VSCodeCheckbox>
23-
<p
24-
style={{
25-
fontSize: "12px",
26-
marginTop: "5px",
27-
color: "var(--vscode-descriptionForeground)",
28-
}}>
29-
{t("mcp:enableToggle.description")}
30-
</p>
23+
<p className="text-xs mt-[5px] text-vscode-descriptionForeground">{t("mcp:enableToggle.description")}</p>
3124
</div>
3225
)
3326
}

‎webview-ui/src/components/mcp/McpResourceRow.tsx‎

Lines changed: 8 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,12 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
99
const uri = hasUri ? item.uri : item.uriTemplate
1010

1111
return (
12-
<div
13-
key={uri}
14-
style={{
15-
padding: "3px 0",
16-
}}>
17-
<div
18-
style={{
19-
display: "flex",
20-
alignItems: "center",
21-
marginBottom: "4px",
22-
}}>
23-
<span className={`codicon codicon-symbol-file`} style={{ marginRight: "6px" }} />
24-
<span style={{ fontWeight: 500, wordBreak: "break-all" }}>{uri}</span>
12+
<div key={uri} className="py-[3px]">
13+
<div className="flex items-center mb-1">
14+
<span className={`codicon codicon-symbol-file mr-[6px]`} />
15+
<span className="font-medium break-all">{uri}</span>
2516
</div>
26-
<div
27-
style={{
28-
fontSize: "12px",
29-
opacity: 0.8,
30-
margin: "4px 0",
31-
}}>
17+
<div className="text-xs opacity-80 my-1">
3218
{item.name && item.description
3319
? `${item.name}: ${item.description}`
3420
: !item.name && item.description
@@ -37,18 +23,9 @@ const McpResourceRow = ({ item }: McpResourceRowProps) => {
3723
? item.name
3824
: "No description"}
3925
</div>
40-
<div
41-
style={{
42-
fontSize: "12px",
43-
}}>
44-
<span style={{ opacity: 0.8 }}>Returns </span>
45-
<code
46-
style={{
47-
color: "var(--vscode-textPreformat-foreground)",
48-
background: "var(--vscode-textPreformat-background)",
49-
padding: "1px 4px",
50-
borderRadius: "3px",
51-
}}>
26+
<div className="text-xs">
27+
<span className="opacity-80">Returns </span>
28+
<code className="text-vscode-textPreformat-foreground bg-vscode-textPreformat-background px-1 py-[1px] rounded-[3px]">
5229
{item.mimeType || "Unknown"}
5330
</code>
5431
</div>

‎webview-ui/src/components/mcp/McpToolRow.tsx‎

Lines changed: 12 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,51 +24,27 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
2424
}
2525

2626
return (
27-
<div
28-
key={tool.name}
29-
style={{
30-
padding: "3px 0",
31-
}}>
27+
<div key={tool.name} className="py-[3px]">
3228
<div
3329
data-testid="tool-row-container"
34-
style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}
30+
className="flex items-center justify-between"
3531
onClick={(e) => e.stopPropagation()}>
36-
<div style={{ display: "flex", alignItems: "center" }}>
37-
<span className="codicon codicon-symbol-method" style={{ marginRight: "6px" }}></span>
38-
<span style={{ fontWeight: 500 }}>{tool.name}</span>
32+
<div className="flex items-center">
33+
<span className="codicon codicon-symbol-method mr-[6px]"></span>
34+
<span className="font-medium">{tool.name}</span>
3935
</div>
4036
{serverName && alwaysAllowMcp && (
4137
<VSCodeCheckbox checked={tool.alwaysAllow} onChange={handleAlwaysAllowChange} data-tool={tool.name}>
4238
{t("mcp:tool.alwaysAllow")}
4339
</VSCodeCheckbox>
4440
)}
4541
</div>
46-
{tool.description && (
47-
<div
48-
style={{
49-
marginLeft: "0px",
50-
marginTop: "4px",
51-
opacity: 0.8,
52-
fontSize: "12px",
53-
}}>
54-
{tool.description}
55-
</div>
56-
)}
42+
{tool.description && <div className="ml-0 mt-1 opacity-80 text-xs">{tool.description}</div>}
5743
{tool.inputSchema &&
5844
"properties" in tool.inputSchema &&
5945
Object.keys(tool.inputSchema.properties as Record<string, any>).length > 0 && (
60-
<div
61-
style={{
62-
marginTop: "8px",
63-
fontSize: "12px",
64-
border: "1px solid color-mix(in srgb, var(--vscode-descriptionForeground) 30%, transparent)",
65-
borderRadius: "3px",
66-
padding: "8px",
67-
}}>
68-
<div
69-
style={{ marginBottom: "4px", opacity: 0.8, fontSize: "11px", textTransform: "uppercase" }}>
70-
{t("mcp:tool.parameters")}
71-
</div>
46+
<div className="mt-2 text-xs rounded-[3px] p-2 border border-vscode-descriptionForeground-transparent-30">
47+
<div className="mb-1 opacity-80 text-[11px] uppercase">{t("mcp:tool.parameters")}</div>
7248
{Object.entries(tool.inputSchema.properties as Record<string, any>).map(
7349
([paramName, schema]) => {
7450
const isRequired =
@@ -78,29 +54,12 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
7854
tool.inputSchema.required.includes(paramName)
7955

8056
return (
81-
<div
82-
key={paramName}
83-
style={{
84-
display: "flex",
85-
alignItems: "baseline",
86-
marginTop: "4px",
87-
}}>
88-
<code
89-
style={{
90-
color: "var(--vscode-textPreformat-foreground)",
91-
marginRight: "8px",
92-
}}>
57+
<div key={paramName} className="flex items-baseline mt-1">
58+
<code className="text-vscode-textPreformat-foreground mr-2">
9359
{paramName}
94-
{isRequired && (
95-
<span style={{ color: "var(--vscode-errorForeground)" }}>*</span>
96-
)}
60+
{isRequired && <span className="text-vscode-errorForeground">*</span>}
9761
</code>
98-
<span
99-
style={{
100-
opacity: 0.8,
101-
overflowWrap: "break-word",
102-
wordBreak: "break-word",
103-
}}>
62+
<span className="opacity-80 break-words">
10463
{schema.description || t("mcp:tool.noDescription")}
10564
</span>
10665
</div>
@@ -112,5 +71,4 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
11271
</div>
11372
)
11473
}
115-
11674
export default McpToolRow

0 commit comments

Comments
 (0)