Feat: workflow dark mode (#17785)
This commit is contained in:
KVOJJJin
@@ -79,37 +79,37 @@ const WorkflowChecklist = ({
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[12]'>
|
||||
<div
|
||||
className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-black/5 bg-white shadow-lg'
|
||||
className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'
|
||||
style={{
|
||||
maxHeight: 'calc(2 / 3 * 100vh)',
|
||||
}}
|
||||
>
|
||||
<div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-white pl-4 pr-3 pt-3 font-semibold text-gray-900'>
|
||||
<div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary'>
|
||||
<div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
|
||||
<div
|
||||
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-gray-500' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-2'>
|
||||
{
|
||||
!!needWarningNodes.length && (
|
||||
<>
|
||||
<div className='px-4 text-xs text-gray-400'>{t('workflow.panel.checklistTip')}</div>
|
||||
<div className='px-4 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
|
||||
<div className='px-4 py-2'>
|
||||
{
|
||||
needWarningNodes.map(node => (
|
||||
<div
|
||||
key={node.id}
|
||||
className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs last-of-type:mb-0'
|
||||
className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0'
|
||||
onClick={() => {
|
||||
handleNodeSelect(node.id)
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<div className='flex h-9 items-center p-2 text-xs font-medium text-gray-700'>
|
||||
<div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'>
|
||||
<BlockIcon
|
||||
type={node.type}
|
||||
className='mr-1.5'
|
||||
@@ -119,11 +119,11 @@ const WorkflowChecklist = ({
|
||||
{node.title}
|
||||
</span>
|
||||
</div>
|
||||
<div className='border-t-[0.5px] border-t-black/2'>
|
||||
<div className='border-t-[0.5px] border-divider-regular'>
|
||||
{
|
||||
node.unConnected && (
|
||||
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
|
||||
<div className='flex text-xs leading-[18px] text-gray-500'>
|
||||
<div className='px-3 py-2 last:rounded-b-lg'>
|
||||
<div className='flex text-xs leading-[18px] text-text-tertiary'>
|
||||
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
|
||||
{t('workflow.common.needConnectTip')}
|
||||
</div>
|
||||
@@ -132,8 +132,8 @@ const WorkflowChecklist = ({
|
||||
}
|
||||
{
|
||||
node.errorMessage && (
|
||||
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
|
||||
<div className='flex text-xs leading-[18px] text-gray-500'>
|
||||
<div className='px-3 py-2 last:rounded-b-lg'>
|
||||
<div className='flex text-xs leading-[18px] text-text-tertiary'>
|
||||
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
|
||||
{node.errorMessage}
|
||||
</div>
|
||||
@@ -150,8 +150,8 @@ const WorkflowChecklist = ({
|
||||
}
|
||||
{
|
||||
!needWarningNodes.length && (
|
||||
<div className='mx-4 mb-3 rounded-lg bg-gray-50 py-4 text-center text-xs text-gray-400'>
|
||||
<ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-gray-300' />
|
||||
<div className='mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary'>
|
||||
<ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-text-quaternary' />
|
||||
{t('workflow.panel.checklistResolved')}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -87,9 +87,9 @@ const ViewHistory = ({
|
||||
{
|
||||
withText && (
|
||||
<div className={cn(
|
||||
'flex h-8 items-center rounded-lg border-[0.5px] border-gray-200 bg-white px-3 shadow-xs',
|
||||
'cursor-pointer text-[13px] font-medium text-primary-600',
|
||||
open && '!bg-primary-50',
|
||||
'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 shadow-xs',
|
||||
'cursor-pointer text-[13px] font-medium text-components-button-secondary-text hover:bg-components-button-secondary-bg-hover',
|
||||
open && 'bg-components-button-secondary-bg-hover',
|
||||
)}>
|
||||
<ClockPlay
|
||||
className={'mr-1 h-4 w-4'}
|
||||
@@ -118,12 +118,12 @@ const ViewHistory = ({
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[12]'>
|
||||
<div
|
||||
className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-gray-200 bg-white shadow-xl'
|
||||
className='ml-2 flex w-[240px] flex-col overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'
|
||||
style={{
|
||||
maxHeight: 'calc(2 / 3 * 100vh)',
|
||||
}}
|
||||
>
|
||||
<div className='sticky top-0 flex items-center justify-between bg-white px-4 pt-3 text-base font-semibold text-gray-900'>
|
||||
<div className='sticky top-0 flex items-center justify-between bg-components-panel-bg px-4 pt-3 text-base font-semibold text-text-primary'>
|
||||
<div className='grow'>{t('workflow.common.runHistory')}</div>
|
||||
<div
|
||||
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
|
||||
@@ -133,7 +133,7 @@ const ViewHistory = ({
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-gray-500' />
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
@@ -149,8 +149,8 @@ const ViewHistory = ({
|
||||
{
|
||||
!data?.data.length && (
|
||||
<div className='py-12'>
|
||||
<ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-gray-300' />
|
||||
<div className='text-center text-[13px] text-gray-400'>
|
||||
<ClockPlaySlim className='mx-auto mb-2 h-8 w-8 text-text-quaternary' />
|
||||
<div className='text-center text-[13px] text-text-quaternary'>
|
||||
{t('workflow.common.notRunning')}
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,8 +161,8 @@ const ViewHistory = ({
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-primary-50',
|
||||
item.id === historyWorkflowData?.id && 'bg-primary-50',
|
||||
'mb-0.5 flex cursor-pointer rounded-lg px-2 py-[7px] hover:bg-state-base-hover',
|
||||
item.id === historyWorkflowData?.id && 'bg-state-accent-hover hover:bg-state-accent-hover',
|
||||
)}
|
||||
onClick={() => {
|
||||
workflowStore.setState({
|
||||
@@ -195,13 +195,13 @@ const ViewHistory = ({
|
||||
<div>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center text-[13px] font-medium leading-[18px]',
|
||||
item.id === historyWorkflowData?.id && 'text-primary-600',
|
||||
'flex items-center text-[13px] font-medium leading-[18px] text-text-primary',
|
||||
item.id === historyWorkflowData?.id && 'text-text-accent',
|
||||
)}
|
||||
>
|
||||
{`Test ${isChatMode ? 'Chat' : 'Run'} #${item.sequence_number}`}
|
||||
</div>
|
||||
<div className='flex items-center text-xs leading-[18px] text-gray-500'>
|
||||
<div className='flex items-center text-xs leading-[18px] text-text-tertiary'>
|
||||
{item.created_by_account?.name} · {formatTimeFromNow((item.finished_at || item.created_at) * 1000)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user