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.
This commit is contained in:
Jason
2025-10-22 13:31:17 +08:00
parent bc185602ca
commit 3504fae4cb
5 changed files with 8 additions and 8 deletions

View File

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