Skip to content

fixed css classes and added some accessibility fixes #4492

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zanesq merged 3 commits into from
Sep 5, 2025
Merged

fixed css classes and added some accessibility fixes #4492

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3f7d5e
fixed css classes and added some accessibility fixes, incl draft styl…
cbruyndoncx Sep 2, 2025
f788339
Delete DESKTOP_UI_style_guide.md
cbruyndoncx Sep 4, 2025
96d7ec0
Delete DESKTOP_UI_directory_structure.md
cbruyndoncx Sep 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 54 additions & 11 deletions ...esktop/src/components/settings/providers/modal/subcomponents/forms/CustomProviderForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,17 @@ export default function CustomProviderForm({ onSubmit, onCancel }: CustomProvide
return (
<form onSubmit={handleSubmit} className="mt-4 space-y-4">
<div>
<label className="flex items-center text-sm font-medium text-white mb-1">
<label
htmlFor="provider-select"
className="flex items-center text-sm font-medium text-textStandard mb-2"
>
Provider Type
<span className="text-red-500 ml-1">*</span>
</label>
<Select
id="provider-select"
aria-invalid={!!validationErrors.providerType}
aria-describedby={validationErrors.providerType ? 'provider-select-error' : undefined}
options={[
{ value: 'openai_compatible', label: 'OpenAI Compatible' },
{ value: 'anthropic_compatible', label: 'Anthropic Compatible' },
Expand All @@ -93,81 +99,118 @@ export default function CustomProviderForm({ onSubmit, onCancel }: CustomProvide
}}
isSearchable={false}
/>
{validationErrors.providerType && (
<p id="provider-select-error" className="text-red-500 text-sm mt-1">
{validationErrors.providerType}
</p>
)}
</div>

<div>
<label className="flex items-center text-sm font-medium text-white mb-1">
<label
htmlFor="display-name"
className="flex items-center text-sm font-medium text-textStandard mb-2"
>
Display Name
<span className="text-red-500 ml-1">*</span>
</label>
<Input
id="display-name"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
placeholder="Your Provider Name"
aria-invalid={!!validationErrors.displayName}
aria-describedby={validationErrors.displayName ? 'display-name-error' : undefined}
className={validationErrors.displayName ? 'border-red-500' : ''}
/>
{validationErrors.displayName && (
<p className="text-red-500 text-sm mt-1">{validationErrors.displayName}</p>
<p id="display-name-error" className="text-red-500 text-sm mt-1">
{validationErrors.displayName}
</p>
)}
</div>

<div>
<label className="flex items-center text-sm font-medium text-white mb-1">
<label
htmlFor="api-url"
className="flex items-center text-sm font-medium text-textStandard mb-2"
>
API URL
<span className="text-red-500 ml-1">*</span>
</label>
<Input
id="api-url"
value={apiUrl}
onChange={(e) => setApiUrl(e.target.value)}
placeholder="https://api.example.com/v1/messages"
aria-invalid={!!validationErrors.apiUrl}
aria-describedby={validationErrors.apiUrl ? 'api-url-error' : undefined}
className={validationErrors.apiUrl ? 'border-red-500' : ''}
/>
{validationErrors.apiUrl && (
<p className="text-red-500 text-sm mt-1">{validationErrors.apiUrl}</p>
<p id="api-url-error" className="text-red-500 text-sm mt-1">
{validationErrors.apiUrl}
</p>
)}
</div>

<div>
<label className="flex items-center text-sm font-medium text-white mb-1">
<label
htmlFor="api-key"
className="flex items-center text-sm font-medium text-textStandard mb-2"
>
API Key
{!isLocalModel && <span className="text-red-500 ml-1">*</span>}
</label>
<Input
id="api-key"
type="password"
value={apiKey}
onChange={(e) => setApiKey(e.target.value)}
placeholder="Your API key"
aria-invalid={!!validationErrors.apiKey}
aria-describedby={validationErrors.apiKey ? 'api-key-error' : undefined}
className={validationErrors.apiKey ? 'border-red-500' : ''}
disabled={isLocalModel}
/>
{validationErrors.apiKey && (
<p className="text-red-500 text-sm mt-1">{validationErrors.apiKey}</p>
<p id="api-key-error" className="text-red-500 text-sm mt-1">
{validationErrors.apiKey}
</p>
)}

<div className="flex items-center space-x-2 mt-2">
<Checkbox id="local-model" checked={isLocalModel} onCheckedChange={handleLocalModels} />
<label
htmlFor="local-model"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-400"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-textSubtle"
>
This is a local model (no auth required)
</label>
</div>
</div>

<div>
<label className="flex items-center text-sm font-medium text-white mb-1">
<label
htmlFor="available-models"
className="flex items-center text-sm font-medium text-textStandard mb-2"
>
Available Models (comma-separated)
<span className="text-red-500 ml-1">*</span>
</label>
<Input
id="available-models"
value={models}
onChange={(e) => setModels(e.target.value)}
placeholder="model-a, model-b, model-c"
aria-invalid={!!validationErrors.models}
aria-describedby={validationErrors.models ? 'available-models-error' : undefined}
className={validationErrors.models ? 'border-red-500' : ''}
/>
{validationErrors.models && (
<p className="text-red-500 text-sm mt-1">{validationErrors.models}</p>
<p id="available-models-error" className="text-red-500 text-sm mt-1">
{validationErrors.models}
</p>
)}
</div>

Expand All @@ -179,7 +222,7 @@ export default function CustomProviderForm({ onSubmit, onCancel }: CustomProvide
/>
<label
htmlFor="supports-streaming"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-400"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-textSubtle"
>
Provider supports streaming responses
</label>
Expand Down
Loading