3504fae4cb
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.
73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface ApiKeyInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
label?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
disabled = false,
|
|
required = false,
|
|
label = "API Key",
|
|
id = "apiKey",
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [showKey, setShowKey] = useState(false);
|
|
|
|
const toggleShowKey = () => {
|
|
setShowKey(!showKey);
|
|
};
|
|
|
|
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"
|
|
}`;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<label
|
|
htmlFor={id}
|
|
className="block text-sm font-medium text-gray-900 dark:text-gray-100"
|
|
>
|
|
{label} {required && "*"}
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type={showKey ? "text" : "password"}
|
|
id={id}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder ?? t("apiKeyInput.placeholder")}
|
|
disabled={disabled}
|
|
required={required}
|
|
autoComplete="off"
|
|
className={inputClass}
|
|
/>
|
|
{!disabled && value && (
|
|
<button
|
|
type="button"
|
|
onClick={toggleShowKey}
|
|
className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
|
aria-label={showKey ? t("apiKeyInput.hide") : t("apiKeyInput.show")}
|
|
>
|
|
{showKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApiKeyInput;
|