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

Feat/prompt editor dark theme (#12976)

Browse Source
This commit is contained in:
zxhlyh
2025-01-23 16:20:00 +08:00
committed by GitHub
parent 6024d8a42d
commit e54ce479ad
8 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/base/prompt-editor/plugins/component-picker-block/hooks.tsx
View File

@@ -133,7 +133,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={item.value}
icon={<BracketsX className='w-[14px] h-[14px] text-[#2970FF]' />}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@@ -162,7 +162,7 @@ export const useVariableOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.add')}
icon={<BracketsX className='mr-2 w-[14px] h-[14px] text-[#2970FF]' />}
icon={<BracketsX className='w-[14px] h-[14px] text-text-accent' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@@ -211,7 +211,7 @@ export const useExternalToolOptions = (
background={item.icon_background}
/>
}
extraElement={<div className='text-xs text-gray-400'>{item.variableName}</div>}
extraElement={<div className='text-xs text-text-tertiary'>{item.variableName}</div>}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}
@@ -240,8 +240,8 @@ export const useExternalToolOptions = (
return (
<VariableMenuItem
title={t('common.promptEditor.variable.modal.addTool')}
icon={<Tool03 className='mr-2 w-[14px] h-[14px] text-[#444CE7]' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-gray-400' />}
icon={<Tool03 className='w-[14px] h-[14px] text-text-accent' />}
extraElement={< ArrowUpRight className='w-3 h-3 text-text-tertiary' />}
queryString={queryString}
isSelected={isSelected}
onClick={onSelect}

6
web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
View File

@@ -135,7 +135,7 @@ const ComponentPicker = ({
// See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
<div className='w-0 h-0'>
<div
className='p-1 w-[260px] bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg'
className='p-1 w-[260px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'
style={{
...floatingStyles,
visibility: isPositioned ? 'visible' : 'hidden',
@@ -148,7 +148,7 @@ const ComponentPicker = ({
{
// Divider
index !== 0 && options.at(index - 1)?.group !== option.group && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div>
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
)
}
{option.renderMenuOption({
@@ -169,7 +169,7 @@ const ComponentPicker = ({
<>
{
(!!options.length) && (
<div className='h-px bg-gray-100 my-1 w-full -translate-x-1'></div>
<div className='h-px bg-divider-subtle my-1 w-full -translate-x-1'></div>
)
}
<div className='p-1'>

8
web/app/components/base/prompt-editor/plugins/component-picker-block/prompt-option.tsx
View File

@@ -21,9 +21,9 @@ export const PromptMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 cursor-pointer hover:bg-gray-50 rounded-md
${isSelected && !disabled && '!bg-gray-50'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-gray-50 cursor-pointer'}
flex items-center px-3 h-6 cursor-pointer hover:bg-state-base-hover rounded-md
${isSelected && !disabled && '!bg-state-base-hover'}
${disabled ? 'cursor-not-allowed opacity-30' : 'hover:bg-state-base-hover cursor-pointer'}
`}
tabIndex={-1}
ref={setRefElement}
@@ -38,7 +38,7 @@ export const PromptMenuItem = memo(({
onClick()
}}>
{icon}
<div className='ml-1 text-[13px] text-gray-900'>{title}</div>
<div className='ml-1 text-[13px] text-text-secondary'>{title}</div>
</div>
)
})

8
web/app/components/base/prompt-editor/plugins/component-picker-block/variable-option.tsx
View File

@@ -38,8 +38,8 @@ export const VariableMenuItem = memo(({
return (
<div
className={`
flex items-center px-3 h-6 rounded-md hover:bg-primary-50 cursor-pointer
${isSelected && 'bg-primary-50'}
flex items-center px-3 h-6 rounded-md hover:bg-state-base-hover cursor-pointer
${isSelected && 'bg-state-base-hover'}
`}
tabIndex={-1}
ref={setRefElement}
@@ -48,9 +48,9 @@ export const VariableMenuItem = memo(({
<div className='mr-2'>
{icon}
</div>
<div className='grow text-[13px] text-gray-900 truncate' title={title}>
<div className='grow text-[13px] text-text-secondary truncate' title={title}>
{before}
<span className='text-[#2970FF]'>{middle}</span>
<span className='text-text-accent'>{middle}</span>
{after}
</div>
{extraElement}