scriptoriumadmin/Roo-Code
1
0
Fork 0
mirror of https://github.com/RooVetGit/Roo-Code.git synced 2026-08-28 05:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI: Toggles and border fixes on edge case themes. (#3051)

Browse source 
Toggles and border fix.
This commit is contained in:
Sacha Sayan 2025-04-29 22:11:58 -04:00 • committed by GitHub
parent 67ec7560ee
commit 6e4a7919cd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webview-ui/src/components/settings/AutoApproveToggle.tsx
View file

@ -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>

14
webview-ui/src/index.css
View file

@ -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 {