From 82ddde4a34b299406514f7ffcb42411315af86b6 Mon Sep 17 00:00:00 2001
From: Sacha Sayan <sacha.sayan@gmail.com>
Date: Tue, 29 Apr 2025 21:14:27 -0400
Subject: [PATCH] Toggles and border fix.

---
 .../src/components/settings/AutoApproveToggle.tsx  |  2 +-
 webview-ui/src/index.css                           | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/settings/AutoApproveToggle.tsx b/webview-ui/src/components/settings/AutoApproveToggle.tsx
index e2cff3fea7..f9fa5889e5 100644
--- a/webview-ui/src/components/settings/AutoApproveToggle.tsx
+++ b/webview-ui/src/components/settings/AutoApproveToggle.tsx
@@ -106,7 +106,7 @@ export const AutoApproveToggle = ({ onToggle, ...props }: AutoApproveToggleProps
 					onClick={() => onToggle(key, !props[key])}
 					title={t(descriptionKey || "")}
 					data-testid={testId}
-					className={cn(" aspect-square h-[80px]")}>
+					className={cn(" aspect-square h-[80px]", !props[key] && "opacity-50")}>
 					<span className={cn("flex flex-col items-center gap-1")}>
 						<span className={`codicon codicon-${icon}`} />
 						<span className="text-sm text-center">{t(labelKey)}</span>
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index efc7e8c11e..f8bf1ab5a6 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -82,7 +82,10 @@
 
 	--color-vscode-input-foreground: var(--vscode-input-foreground);
 	--color-vscode-input-background: var(--vscode-input-background);
-	--color-vscode-input-border: var(--vscode-input-border);
+	--color-vscode-input-border: var(
+		--vscode-input-border,
+		transparent
+	); /* Some themes don't have a border color, so we can fallback to transparent */
 
 	--color-vscode-focusBorder: var(--vscode-focusBorder);
 
@@ -140,7 +143,7 @@
 		--accent-foreground: var(--vscode-list-hoverForeground);
 		--destructive: var(--vscode-errorForeground);
 		--destructive-foreground: var(--vscode-button-foreground);
-		--border: var(--vscode-input-border);
+		--border: var(--vscode-input-border, transparent); /* --border gets theme value or transparent fallback */
 		--input: var(--vscode-input-background);
 		--ring: var(--vscode-input-border);
 		--chart-1: var(--vscode-charts-red);
@@ -150,6 +153,13 @@
 		--chart-5: var(--vscode-charts-green);
 		--radius: 0.5rem;
 	}
+
+	/* Higher specififty than VSCode's theme and root. */
+	/* Used for baseline theme overrides, but avoid using for styling. */
+
+	body {
+		--vscode-input-border: var(--border);
+	}
 }
 
 @layer components {