http node dark mode

This commit is contained in:
jZonG 2025-04-09 19:59:10 +08:00
parent b02d5728b7
commit 769a4fb5e5
12 changed files with 36 additions and 33 deletions

View File

@ -112,7 +112,7 @@ const Editor: FC<Props> = ({
<Tooltip
popupContent={`${t('workflow.common.insertVarTip')}`}
>
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-black/5 bg-white p-0.5 shadow-lg hover:bg-gray-100'>
<div className='cursor-pointer rounded-[5px] border-[0.5px] border-divider-regular bg-components-badge-white-to-dark p-0.5 shadow-lg'>
<Variable02 className='h-3.5 w-3.5 text-components-button-secondary-accent-text' />
</div>
</Tooltip>

View File

@ -53,9 +53,9 @@ const ApiInput: FC<Props> = ({
onChange={onMethodChange}
options={MethodOptions}
trigger={
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border-black/5 bg-gray-100 px-2.5')} >
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-gray-900'>{method}</div>
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-gray-700' />}
<div className={cn(readonly && 'cursor-pointer', 'flex h-8 shrink-0 items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-2.5')} >
<div className='w-12 pl-0.5 text-xs font-medium uppercase leading-[18px] text-text-primary'>{method}</div>
{!readonly && <RiArrowDownSLine className='ml-1 h-3.5 w-3.5 text-text-secondary' />}
</div>
}
popupClassName='top-[34px] w-[108px]'
@ -65,7 +65,7 @@ const ApiInput: FC<Props> = ({
<Input
instanceId='http-api-url'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={url}
onChange={onUrlChange}
readOnly={readonly}

View File

@ -28,9 +28,9 @@ type Props = {
const Field = ({ title, isRequired, children }: { title: string; isRequired?: boolean; children: React.JSX.Element }) => {
return (
<div>
<div className='text-[13px] font-medium leading-8 text-gray-700'>
<div className='text-[13px] font-medium leading-8 text-text-secondary'>
{title}
{isRequired && <span className='ml-0.5 text-[#D92D20]'>*</span>}
{isRequired && <span className='ml-0.5 text-text-destructive'>*</span>}
</div>
<div>{children}</div>
</div>
@ -158,7 +158,7 @@ const Authorization: FC<Props> = ({
<div className='flex'>
<Input
instanceId='http-api-key'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={tempPayload.config?.api_key || ''}
onChange={handleAPIKeyChange}
nodesOutputVars={availableVars}

View File

@ -21,9 +21,10 @@ const Item: FC<ItemProps> = ({
return (
<div
className={cn(
isSelected ? 'border-[2px] border-primary-400 bg-white shadow-xs' : 'border border-gray-100 bg-gray-25',
'flex h-8 w-0 grow cursor-pointer items-center justify-center rounded-lg text-[13px] font-normal text-gray-900')
}
'system-sm-regular flex h-8 grow cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
!isSelected && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
isSelected && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
)}
onClick={onClick}
>
{title}

View File

@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
import { BodyType, type HttpNodeType, Method } from '../types'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import Textarea from '@/app/components/base/textarea'
import Toast from '@/app/components/base/toast'
import { useNodesInteractions } from '@/app/components/workflow/hooks'
@ -141,9 +142,9 @@ const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
className='!w-[400px] !max-w-[400px] !p-4'
>
<div>
<textarea
<Textarea
value={inputString}
className='my-3 h-40 w-full grow rounded-lg border-0 bg-gray-100 p-3 text-sm text-gray-900 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
className='my-3 h-40 w-full grow'
onChange={e => setInputString(e.target.value)}
placeholder={t('workflow.nodes.http.curl.placeholder')!}
/>

View File

@ -144,7 +144,7 @@ const EditBody: FC<Props> = ({
onChange={handleTypeChange}
disabled={readonly}
/>
<div className='text-[13px] font-normal leading-[18px] text-gray-700'>{bodyTextMap[t]}</div>
<div className='text-[13px] font-normal leading-[18px] text-text-secondary'>{bodyTextMap[t]}</div>
</label>
))}
</div>

View File

@ -57,12 +57,12 @@ const InputItem: FC<Props> = ({
}, [onRemove])
return (
<div className={cn(className, 'hover:cursor-text hover:bg-gray-50', 'relative flex h-full')}>
<div className={cn(className, 'hover:cursor-text hover:bg-state-base-hover', 'relative flex h-full')}>
{(!readOnly)
? (
<Input
instanceId={instanceId}
className={cn(isFocus ? 'bg-gray-100' : 'bg-width', 'w-0 grow px-3 py-1')}
className={cn(isFocus ? 'bg-components-input-bg-active' : 'bg-width', 'w-0 grow px-3 py-1')}
value={value}
onChange={onChange}
readOnly={readOnly}
@ -78,11 +78,11 @@ const InputItem: FC<Props> = ({
: <div
className="h-[18px] w-full pl-0.5 leading-[18px]"
>
{!hasValue && <div className='text-xs font-normal text-gray-300'>{placeholder}</div>}
{!hasValue && <div className='text-xs font-normal text-text-quaternary'>{placeholder}</div>}
{hasValue && (
<Input
instanceId={instanceId}
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={value}
onChange={onChange}
readOnly={readOnly}

View File

@ -62,7 +62,7 @@ const KeyValueItem: FC<Props> = ({
return (
// group class name is for hover row show remove button
<div className={cn(className, 'h-min-7 group flex border-t border-gray-200')}>
<div className={cn(className, 'h-min-7 group flex border-t border-divider-regular')}>
<div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
{!keyNotSupportVar
? (
@ -79,7 +79,7 @@ const KeyValueItem: FC<Props> = ({
)
: (
<input
className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-white outline-none hover:bg-gray-50 focus:ring-0'
className='system-sm-regular focus:bg-gray-100! appearance-none rounded-none border-none bg-transparent outline-none hover:bg-components-input-bg-hover focus:ring-0'
value={payload.key}
onChange={e => handleChange('key')(e.target.value)}
/>
@ -95,7 +95,7 @@ const KeyValueItem: FC<Props> = ({
{ name: 'file', value: 'file' },
]}
readonly={readonly}
triggerClassName='rounded-none h-7'
triggerClassName='rounded-none h-7 text-text-primary'
triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'}
popupClassName='w-[80px] h-7'
/>

View File

@ -28,8 +28,8 @@ const InputField: FC<{
return (
<div className="space-y-1">
<div className="flex h-[18px] items-center space-x-2">
<span className="text-[13px] font-medium text-gray-900">{title}</span>
<span className="text-xs font-normal text-gray-500">{description}</span>
<span className="text-[13px] font-medium text-text-primary">{title}</span>
<span className="text-xs font-normal text-text-tertiary">{description}</span>
</div>
<Input
type='number'

View File

@ -13,10 +13,11 @@ const Node: FC<NodeProps<HttpNodeType>> = ({
return (
<div className='mb-1 px-3 py-1'>
<div className='flex items-start rounded-md bg-gray-100 p-1'>
<div className='flex h-4 shrink-0 items-center rounded bg-gray-25 px-1 text-xs font-semibold uppercase text-gray-700'>{method}</div>
<div className='flex items-start rounded-md bg-workflow-block-parma-bg p-1'>
<div className='flex h-4 shrink-0 items-center rounded bg-components-badge-white-to-dark px-1 text-xs font-semibold uppercase text-text-secondary'>{method}</div>
<div className='pl-1 pt-1'>
<ReadonlyInputWithSelectVar
className='text-text-secondary'
value={url}
nodeId={id}
/>

View File

@ -73,20 +73,20 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
<div className='flex'>
<div
onClick={showAuthorization}
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
>
{!readOnly && <Settings01 className='h-3 w-3 text-gray-500' />}
<div className='text-xs font-medium text-gray-500'>
{!readOnly && <Settings01 className='h-3 w-3 text-text-tertiary' />}
<div className='text-xs font-medium text-text-tertiary'>
{t(`${i18nPrefix}.authorization.authorization`)}
<span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
<span className='ml-1 text-text-secondary'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
</div>
</div>
<div
onClick={showCurlPanel}
className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
className={cn(!readOnly && 'cursor-pointer hover:bg-state-base-hover', 'flex h-6 items-center space-x-1 rounded-md px-2 ')}
>
{!readOnly && <FileArrow01 className='h-3 w-3 text-gray-500' />}
<div className='text-xs font-medium text-gray-500'>
{!readOnly && <FileArrow01 className='h-3 w-3 text-text-tertiary' />}
<div className='text-xs font-medium text-text-tertiary'>
{t(`${i18nPrefix}.curl.title`)}
</div>
</div>

View File

@ -35,7 +35,7 @@ const ExtractInput: FC<Props> = ({
<div className='flex items-start space-x-1'>
<Input
instanceId='http-extract-number'
className={cn(isFocus ? 'border-gray-300 bg-gray-50 shadow-xs' : 'border-gray-100 bg-gray-100', 'w-0 grow rounded-lg border px-3 py-[6px]')}
className={cn(isFocus ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs' : 'border-components-input-border-hover bg-components-input-bg-normal', 'w-0 grow rounded-lg border px-3 py-[6px]')}
value={value}
onChange={onChange}
readOnly={readOnly}