Feat: workflow dark mode (#17785)

This commit is contained in:
KVOJJJin
2025-04-10 17:15:48 +08:00
committed by GitHub
parent 636a0ba37f
commit 17a26da1e6
75 changed files with 324 additions and 368 deletions

View File

@@ -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>