From 6303e390e03e3176863051dd6052c872e433f305 Mon Sep 17 00:00:00 2001
From: "rexarrior@yandex.ru" <rexarrior@yandex.ru>
Date: Sat, 14 Jun 2025 20:35:40 +0300
Subject: [PATCH] tailwind css for disabledTool swipper

---
 webview-ui/src/components/mcp/McpToolRow.tsx | 30 ++++++--------------
 webview-ui/src/index.css                     |  3 ++
 2 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/webview-ui/src/components/mcp/McpToolRow.tsx b/webview-ui/src/components/mcp/McpToolRow.tsx
index ca7a818a93..74e8964564 100644
--- a/webview-ui/src/components/mcp/McpToolRow.tsx
+++ b/webview-ui/src/components/mcp/McpToolRow.tsx
@@ -60,18 +60,11 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 							role="switch"
 							aria-checked={tool.enabledForPrompt}
 							tabIndex={0}
-							style={{
-								width: "32px",
-								height: "16px",
-								backgroundColor: tool.enabledForPrompt
-									? "var(--vscode-button-background)"
-									: "var(--vscode-titleBar-inactiveForeground)",
-								borderRadius: "8px",
-								position: "relative",
-								cursor: "pointer",
-								transition: "background-color 0.2s",
-								opacity: tool.enabledForPrompt ? 1 : 0.6,
-							}}
+							className={`relative h-4 w-8 cursor-pointer rounded-full transition-colors ${
+								tool.enabledForPrompt
+									? "bg-vscode-button-background"
+									: "bg-vscode-titleBar-inactiveForeground"
+							} ${tool.enabledForPrompt ? "opacity-100" : "opacity-60"}`}
 							onClick={handleEnabledForPromptChange}
 							onKeyDown={(e) => {
 								if (e.key === "Enter" || e.key === " ") {
@@ -82,16 +75,9 @@ const McpToolRow = ({ tool, serverName, serverSource, alwaysAllowMcp }: McpToolR
 							data-tool-prompt-toggle={tool.name}
 							title={t("mcp:tool.togglePromptInclusion")}>
 							<div
-								style={{
-									width: "12px",
-									height: "12px",
-									backgroundColor: "var(--vscode-titleBar-activeForeground)",
-									borderRadius: "50%",
-									position: "absolute",
-									top: "2px",
-									left: tool.enabledForPrompt ? "18px" : "2px",
-									transition: "left 0.2s",
-								}}
+								className={`absolute top-0.5 h-3 w-3 rounded-full bg-vscode-titleBar-activeForeground transition-all ${
+									tool.enabledForPrompt ? "left-[18px]" : "left-0.5"
+								}`}
 							/>
 						</div>
 					)}
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index 0eee0359d8..c641d21fb4 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -117,6 +117,9 @@
 	--color-vscode-sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
 	--color-vscode-sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
 
+	--color-vscode-titleBar-activeForeground: var(--vscode-titleBar-activeForeground);
+	--color-vscode-titleBar-inactiveForeground: var(--vscode-titleBar-inactiveForeground);
+
 	--color-vscode-charts-green: var(--vscode-charts-green);
 	--color-vscode-charts-yellow: var(--vscode-charts-yellow);