aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-02-20 14:04:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

tweak darkmode for modal (#1797)

Browse Source
This commit is contained in:
Lily Delalande
2025-03-20 16:45:45 -04:00
committed by GitHub
parent 1028706b9c
commit 8ee4d0cbdc
3 changed files with 69 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/desktop/src/components/settings_v2/extensions/modal/EnvVarsSection.tsx
View File

@@ -45,7 +45,7 @@ export default function EnvVarsSection({
value={envVar.key}
onChange={(e) => onChange(index, 'key', e.target.value)}
placeholder="Variable name"
className={`w-full bg-bgSubtle border-borderSubtle text-textStandard`}
className={`w-full border-borderSubtle text-textStandard`}
/>
</div>
<div className="relative">
@@ -53,7 +53,7 @@ export default function EnvVarsSection({
value={envVar.value}
onChange={(e) => onChange(index, 'value', e.target.value)}
placeholder="Value"
className={`w-full bg-bgSubtle border-borderSubtle text-textStandard`}
className={`w-full border-borderSubtle text-textStandard`}
/>
</div>
<Button
@@ -80,7 +80,7 @@ export default function EnvVarsSection({
<Button
onClick={onAdd}
variant="ghost"
className="flex items-center justify-start gap-1 px-2 pr-4 text-s font-medium rounded-full dark:bg-slate-400 dark:text-gray-300 bg-gray-300 text-slate-400 dark:hover:bg-slate-300 hover:bg-gray-500 hover:text-white dark:hover:text-gray-900 transition-colors min-w-[60px] h-9"
className="flex items-center justify-start gap-1 px-2 pr-4 text-s font-medium rounded-full dark:bg-slate-400 dark:text-gray-300 bg-gray-300 dark:bg-slate text-slate-400 dark:hover:bg-slate-300 hover:bg-gray-500 hover:text-white dark:hover:text-gray-900 transition-colors min-w-[60px] h-9"
>
<Plus className="h-3 w-3" /> Add
</Button>

57
ui/desktop/src/components/settings_v2/extensions/modal/ExtensionInfoFields.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { Input } from '../../../ui/input';
import Select from 'react-select';
import React, { useState } from 'react';
interface ExtensionInfoFieldsProps {
name: string;
type: 'stdio' | 'sse' | 'builtin';
onChange: (key: string, value: any) => void;
submitAttempted: boolean;
}
export default function ExtensionInfoFields({
name,
type,
onChange,
submitAttempted,
}: ExtensionInfoFieldsProps) {
const isNameValid = () => {
return name.trim() !== '';
};
return (
<div className="flex justify-between gap-4 mb-6">
<div className="flex-1">
<label className="text-sm font-medium mb-2 block text-textStandard">Extension Name</label>
<div className="relative">
<Input
value={name}
onChange={(e) => onChange('name', e.target.value)}
placeholder="Enter extension name..."
className={`${!submitAttempted || isNameValid() ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
/>
{submitAttempted && !isNameValid() && (
<div className="absolute text-xs text-red-500 mt-1">Name is required</div>
)}
</div>
</div>
{/* Type Dropdown */}
<div className="w-[200px]">
<label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
<Select
value={{ value: type, label: type.toUpperCase() }}
onChange={(option: { value: string; label: string } | null) => {
if (option) {
onChange('type', option.value);
}
}}
options={[
{ value: 'stdio', label: 'Standard IO (STDIO)' },
{ value: 'sse', label: 'Security Service Edge (SSE)' },
]}
isSearchable={false}
/>
</div>
</div>
);
}

49
ui/desktop/src/components/settings_v2/extensions/modal/ExtensionModal.tsx
View File

@@ -8,6 +8,7 @@ import { ExtensionFormData } from '../utils';
import EnvVarsSection from './EnvVarsSection';
import ExtensionConfigFields from './ExtensionConfigFields';
import { PlusIcon, Edit, Trash2, AlertTriangle } from 'lucide-react';
import ExtensionInfoFields from './ExtensionInfoFields';
interface ExtensionModalProps {
title: string;
@@ -172,50 +173,18 @@ export default function ExtensionModal({
) : (
<>
{/* Form Fields */}
{/* Name */}
<div className="flex justify-between gap-4 mb-6">
<div className="flex-1">
<label className="text-sm font-medium mb-2 block text-textStandard">
Extension Name
</label>
<div className="relative">
<Input
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="Enter extension name..."
className={`${!submitAttempted || formData.name.trim() !== '' ? 'border-borderSubtle' : 'border-red-500'} text-textStandard focus:border-borderStandard`}
/>
{submitAttempted && !isNameValid() && (
<div className="absolute text-xs text-red-500 mt-1">Name is required</div>
)}
</div>
</div>
{/*Type Dropdown */}
<div className="w-[200px]">
<label className="text-sm font-medium mb-2 block text-textStandard">Type</label>
<Select
value={{ value: formData.type, label: formData.type.toUpperCase() }}
onChange={(option: { value: string; label: string } | null) =>
setFormData({
...formData,
type: (option?.value as 'stdio' | 'sse' | 'builtin') || 'stdio',
})
}
options={[
{ value: 'stdio', label: 'Standard IO (STDIO)' },
{ value: 'sse', label: 'Security Service Edge (SSE)' },
]}
styles={createDarkSelectStyles('200px')}
theme={darkSelectTheme}
isSearchable={false}
/>
</div>
</div>
{/* Name and Type */}
<ExtensionInfoFields
name={formData.name}
type={formData.type}
onChange={(key, value) => setFormData({ ...formData, [key]: value })}
submitAttempted={submitAttempted}
/>
{/* Divider */}
<hr className="border-t border-borderSubtle mb-6" />
{/* Config Fields */}
{/* Command */}
<div className="mb-6">
<ExtensionConfigFields
type={formData.type}