From 3504fae4cbfc38a85990cc3f77901ccc4930e1e9 Mon Sep 17 00:00:00 2001 From: Jason Date: Wed, 22 Oct 2025 13:31:17 +0800 Subject: [PATCH] refactor: unify focus styles across all input fields Replace inconsistent focus border styles with a unified soft blue ring effect across all input and textarea components. Changes: - Add consistent focus:ring styles to Input and Textarea components - Use focus:ring-blue-500/20 (light) and focus:ring-blue-400/20 (dark) - Remove focus border color changes for a more subtle design - Update ApiKeyInput to match the unified focus style - Update all manual textarea elements (Codex and Claude configs) Benefits: - Consistent visual feedback across all form inputs - Soft, elegant focus indication with blue glow effect - No jarring border color changes - Better user experience with subtle, professional styling The focus effect now uses only a soft blue ring (20% opacity) without changing border colors, creating a more refined and less distracting interaction pattern. --- src/components/providers/forms/ApiKeyInput.tsx | 4 ++-- src/components/providers/forms/CodexConfigSections.tsx | 4 ++-- src/components/providers/forms/CommonConfigEditor.tsx | 4 ++-- src/components/ui/input.tsx | 2 +- src/components/ui/textarea.tsx | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/providers/forms/ApiKeyInput.tsx b/src/components/providers/forms/ApiKeyInput.tsx index 0b1b93f..87939e2 100644 --- a/src/components/providers/forms/ApiKeyInput.tsx +++ b/src/components/providers/forms/ApiKeyInput.tsx @@ -30,8 +30,8 @@ const ApiKeyInput: React.FC = ({ const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${ disabled - ? "bg-gray-100 dark:bg-gray-800 border-border-default text-gray-400 dark:text-gray-500 cursor-not-allowed" - : "border-border-default dark:bg-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active " + ? "bg-gray-100 dark:bg-gray-800 border-border-default text-gray-400 dark:text-gray-500 cursor-not-allowed" + : "border-border-default dark:bg-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20" }`; return ( diff --git a/src/components/providers/forms/CodexConfigSections.tsx b/src/components/providers/forms/CodexConfigSections.tsx index 5cf4fc5..ca2b807 100644 --- a/src/components/providers/forms/CodexConfigSections.tsx +++ b/src/components/providers/forms/CodexConfigSections.tsx @@ -36,7 +36,7 @@ export const CodexAuthSection: React.FC = ({ placeholder={t("codexConfig.authJsonPlaceholder")} rows={6} required - className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y min-h-[8rem]" + className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[8rem]" autoComplete="off" autoCorrect="off" autoCapitalize="none" @@ -126,7 +126,7 @@ export const CodexConfigSection: React.FC = ({ onChange={(e) => onChange(e.target.value)} placeholder="" rows={8} - className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y min-h-[10rem]" + className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[10rem]" autoComplete="off" autoCorrect="off" autoCapitalize="none" diff --git a/src/components/providers/forms/CommonConfigEditor.tsx b/src/components/providers/forms/CommonConfigEditor.tsx index ee1be6d..1791b3a 100644 --- a/src/components/providers/forms/CommonConfigEditor.tsx +++ b/src/components/providers/forms/CommonConfigEditor.tsx @@ -85,7 +85,7 @@ export function CommonConfigEditor({ } }`} rows={14} - className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y min-h-[16rem]" + className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[16rem]" autoComplete="off" autoCorrect="off" autoCapitalize="none" @@ -125,7 +125,7 @@ export function CommonConfigEditor({ value={commonConfigSnippet} onChange={(e) => onCommonConfigSnippetChange(e.target.value)} rows={12} - className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 focus:border-border-active transition-colors resize-y min-h-[14rem]" + className="w-full px-3 py-2 border border-border-default dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors resize-y min-h-[14rem]" autoComplete="off" autoCorrect="off" autoCapitalize="none" diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index c0943a8..5050b0c 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -9,7 +9,7 @@ const Input = React.forwardRef( ( return (