tailwind css for disabledTool swipper

Author: Rexarrior

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>
 					)}

webview-ui/src/index.css

@@ -118,6 +118,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);