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:
@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border-active disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex min-h-[80px] w-full rounded-md border border-border-default bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
Reference in New Issue
Block a user