admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(style): update ExternalDataToolModal to support dark mode using semantic tokens (#28630)

Browse Source
This commit is contained in:
Novice
2025-11-25 15:58:43 +08:00
committed by GitHub
parent 2181ffdc89
commit 57b405c4c2
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/components/app/configuration/tools/external-data-tool-modal.tsx
View File

@@ -191,11 +191,11 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
onClose={noop} onClose={noop}
className='!w-[640px] !max-w-none !p-8 !pb-6' className='!w-[640px] !max-w-none !p-8 !pb-6'
> >
<div className='mb-2 text-xl font-semibold text-gray-900'> <div className='mb-2 text-xl font-semibold text-text-primary'>
{`${action} ${t('appDebug.variableConfig.apiBasedVar')}`} {`${action} ${t('appDebug.variableConfig.apiBasedVar')}`}
</div> </div>
<div className='py-2'> <div className='py-2'>
<div className='text-sm font-medium leading-9 text-gray-900'> <div className='text-sm font-medium leading-9 text-text-primary'>
{t('common.apiBasedExtension.type')} {t('common.apiBasedExtension.type')}
</div> </div>
<SimpleSelect <SimpleSelect
@@ -210,46 +210,46 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
/> />
</div> </div>
<div className='py-2'> <div className='py-2'>
<div className='text-sm font-medium leading-9 text-gray-900'> <div className='text-sm font-medium leading-9 text-text-primary'>
{t('appDebug.feature.tools.modal.name.title')} {t('appDebug.feature.tools.modal.name.title')}
</div> </div>
<div className='flex items-center'> <div className='flex items-center'>
<input <input
value={localeData.label || ''} value={localeData.label || ''}
onChange={e => handleValueChange({ label: e.target.value })} onChange={e => handleValueChange({ label: e.target.value })}
className='mr-2 block h-9 grow appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none' className='mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none'
placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''} placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''}
/> />
<AppIcon size='large' <AppIcon size='large'
onClick={() => { setShowEmojiPicker(true) }} onClick={() => { setShowEmojiPicker(true) }}
className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-black/5 ' className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border '
icon={localeData.icon} icon={localeData.icon}
background={localeData.icon_background} background={localeData.icon_background}
/> />
</div> </div>
</div> </div>
<div className='py-2'> <div className='py-2'>
<div className='text-sm font-medium leading-9 text-gray-900'> <div className='text-sm font-medium leading-9 text-text-primary'>
{t('appDebug.feature.tools.modal.variableName.title')} {t('appDebug.feature.tools.modal.variableName.title')}
</div> </div>
<input <input
value={localeData.variable || ''} value={localeData.variable || ''}
onChange={e => handleValueChange({ variable: e.target.value })} onChange={e => handleValueChange({ variable: e.target.value })}
className='block h-9 w-full appearance-none rounded-lg bg-gray-100 px-3 text-sm text-gray-900 outline-none' className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-components-input-text-filled outline-none'
placeholder={t('appDebug.feature.tools.modal.variableName.placeholder') || ''} placeholder={t('appDebug.feature.tools.modal.variableName.placeholder') || ''}
/> />
</div> </div>
{ {
localeData.type === 'api' && ( localeData.type === 'api' && (
<div className='py-2'> <div className='py-2'>
<div className='flex h-9 items-center justify-between text-sm font-medium text-gray-900'> <div className='flex h-9 items-center justify-between text-sm font-medium text-text-primary'>
{t('common.apiBasedExtension.selector.title')} {t('common.apiBasedExtension.selector.title')}
<a <a
href={docLink('/guides/extension/api-based-extension/README')} href={docLink('/guides/extension/api-based-extension/README')}
target='_blank' rel='noopener noreferrer' target='_blank' rel='noopener noreferrer'
className='group flex items-center text-xs font-normal text-gray-500 hover:text-primary-600' className='group flex items-center text-xs font-normal text-text-tertiary hover:text-text-accent'
> >
<BookOpen01 className='mr-1 h-3 w-3 text-gray-500 group-hover:text-primary-600' /> <BookOpen01 className='mr-1 h-3 w-3 text-text-tertiary group-hover:text-text-accent' />
{t('common.apiBasedExtension.link')} {t('common.apiBasedExtension.link')}
</a> </a>
</div> </div>