Skip to content

Commit f65483d

Browse files
douxc刘江波
douxc
authored and
刘江波
committed
Dark Mode: Workflow darkmode style (langgenius#11695)
1 parent 7d92431 commit f65483d

26 files changed

+179
-158
lines changed

‎web/app/components/tools/add-tool-modal/empty.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const Empty = () => {
66
return (
77
<div className='flex flex-col items-center'>
88
<div className="shrink-0 w-[163px] h-[149px] bg-cover bg-no-repeat bg-[url('~@/app/components/tools/add-tool-modal/empty.png')]"></div>
9-
<div className='mb-1 text-[13px] font-medium text-gray-700 leading-[18px]'>{t('tools.addToolModal.emptyTitle')}</div>
10-
<div className='text-[13px] text-gray-500 leading-[18px]'>{t('tools.addToolModal.emptyTip')}</div>
9+
<div className='mb-1 text-[13px] font-medium text-text-primary leading-[18px]'>{t('tools.addToolModal.emptyTitle')}</div>
10+
<div className='text-[13px] text-text-tertiary leading-[18px]'>{t('tools.addToolModal.emptyTip')}</div>
1111
</div>
1212
)
1313
}

‎web/app/components/workflow/block-selector/all-tools.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -43,23 +43,23 @@ const AllTools = ({
4343

4444
return mergedTools.filter((toolWithProvider) => {
4545
return isMatchingKeywords(toolWithProvider.name, searchText)
46-
|| toolWithProvider.tools.some((tool) => {
47-
return Object.values(tool.label).some((label) => {
48-
return isMatchingKeywords(label, searchText)
46+
|| toolWithProvider.tools.some((tool) => {
47+
return Object.values(tool.label).some((label) => {
48+
return isMatchingKeywords(label, searchText)
49+
})
4950
})
50-
})
5151
})
5252
}, [activeTab, buildInTools, customTools, workflowTools, searchText])
5353
return (
5454
<div>
55-
<div className='flex items-center px-3 h-8 space-x-1 bg-gray-25 border-b-[0.5px] border-black/[0.08] shadow-xs'>
55+
<div className='flex items-center px-3 h-8 space-x-1 bg-background-default-hover border-b-[0.5px] border-divider-subtle shadow-xs'>
5656
{
5757
tabs.map(tab => (
5858
<div
5959
className={cn(
60-
'flex items-center px-2 h-6 rounded-md hover:bg-gray-100 cursor-pointer',
61-
'text-xs font-medium text-gray-700',
62-
activeTab === tab.key && 'bg-gray-200',
60+
'flex items-center px-2 h-6 rounded-md hover:bg-state-base-hover-alt cursor-pointer',
61+
'system-xs-medium text-text-tertiary',
62+
activeTab === tab.key && 'system-xs-semibold bg-state-base-hover-alt text-text-primary',
6363
)}
6464
key={tab.key}
6565
onClick={() => setActiveTab(tab.key)}

‎web/app/components/workflow/block-selector/blocks.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const Blocks = ({
5858
>
5959
{
6060
classification !== '-' && !!list.length && (
61-
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-gray-500'>
61+
<div className='flex items-start px-3 h-[22px] text-xs font-medium text-text-tertiary'>
6262
{t(`workflow.tabs.${classification}`)}
6363
</div>
6464
)
@@ -68,29 +68,29 @@ const Blocks = ({
6868
<Tooltip
6969
key={block.type}
7070
position='right'
71-
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
71+
popupClassName='w-[200px]'
7272
popupContent={(
7373
<div>
7474
<BlockIcon
7575
size='md'
7676
className='mb-2'
7777
type={block.type}
7878
/>
79-
<div className='mb-1 text-sm leading-5 text-gray-900'>{block.title}</div>
80-
<div className='text-xs text-gray-700 leading-[18px]'>{nodesExtraData[block.type].about}</div>
79+
<div className='mb-1 system-md-medium text-text-primary'>{block.title}</div>
80+
<div className='text-text-tertiary system-xs-regular'>{nodesExtraData[block.type].about}</div>
8181
</div>
8282
)}
8383
>
8484
<div
8585
key={block.type}
86-
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
86+
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
8787
onClick={() => onSelect(block.type)}
8888
>
8989
<BlockIcon
9090
className='mr-2 shrink-0'
9191
type={block.type}
9292
/>
93-
<div className='text-sm text-gray-900'>{block.title}</div>
93+
<div className='text-sm text-text-secondary'>{block.title}</div>
9494
</div>
9595
</Tooltip>
9696
))
@@ -103,7 +103,7 @@ const Blocks = ({
103103
<div className='p-1'>
104104
{
105105
isEmpty && (
106-
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
106+
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
107107
)
108108
}
109109
{

‎web/app/components/workflow/block-selector/index-bar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs }) => {
4747
element.scrollIntoView({ behavior: 'smooth' })
4848
}
4949
return (
50-
<div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-gray-500">
50+
<div className="index-bar fixed right-4 top-36 flex flex-col items-center text-xs font-medium text-text-quaternary">
5151
{letters.map(letter => (
52-
<div className="hover:text-gray-900 cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
52+
<div className="hover:text-text-secondary cursor-pointer" key={letter} onClick={() => handleIndexClick(letter)}>
5353
{letter}
5454
</div>
5555
))}

‎web/app/components/workflow/block-selector/index.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import Input from '@/app/components/base/input'
2525
import {
2626
Plus02,
2727
} from '@/app/components/base/icons/src/vender/line/general'
28+
import classNames from '@/utils/classnames'
2829

2930
type NodeSelectorProps = {
3031
open?: boolean
@@ -114,19 +115,21 @@ const NodeSelector: FC<NodeSelectorProps> = ({
114115
<div
115116
className={`
116117
flex items-center justify-center
117-
w-4 h-4 rounded-full bg-primary-600 cursor-pointer z-10
118+
w-4 h-4 rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover cursor-pointer z-10
118119
${triggerClassName?.(open)}
119120
`}
120121
style={triggerStyle}
121122
>
122-
<Plus02 className='w-2.5 h-2.5 text-white' />
123+
<Plus02 className='w-2.5 h-2.5' />
123124
</div>
124125
)
125126
}
126127
</PortalToFollowElemTrigger>
127128
<PortalToFollowElemContent className='z-[1000]'>
128-
<div className={`rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg ${popupClassName}`}>
129-
<div className='px-2 pt-2' onClick={e => e.stopPropagation()}>
129+
<div className={
130+
classNames(`rounded-lg border-[0.5px] backdrop-blur-[5px]
131+
border-components-panel-border bg-components-panel-bg-blur shadow-lg`, popupClassName)}>
132+
<div className='p-2 pb-1' onClick={e => e.stopPropagation()}>
130133
<Input
131134
showLeftIcon
132135
showClearIcon

‎web/app/components/workflow/block-selector/tabs.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ const Tabs: FC<TabsProps> = ({
3030
<div onClick={e => e.stopPropagation()}>
3131
{
3232
!noBlocks && (
33-
<div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'>
33+
<div className='flex items-center px-3 border-b-[0.5px] border-divider-subtle'>
3434
{
3535
tabs.map(tab => (
3636
<div
3737
key={tab.key}
3838
className={cn(
39-
'relative mr-4 h-[34px] text-[13px] leading-[34px] font-medium cursor-pointer',
39+
'relative mr-4 pt-1 pb-2 system-sm-medium cursor-pointer',
4040
activeTab === tab.key
41-
? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
42-
: 'text-gray-500',
41+
? 'text-text-primary after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-util-colors-blue-brand-blue-brand-600'
42+
: 'text-text-tertiary',
4343
)}
4444
onClick={() => onActiveTabChange(tab.key)}
4545
>

‎web/app/components/workflow/block-selector/tools.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Blocks = ({
4545
<Tooltip
4646
key={tool.name}
4747
position='right'
48-
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
48+
popupClassName='w-[200px]'
4949
popupContent={(
5050
<div>
5151
<BlockIcon
@@ -54,13 +54,13 @@ const Blocks = ({
5454
type={BlockEnum.Tool}
5555
toolIcon={toolWithProvider.icon}
5656
/>
57-
<div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
58-
<div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div>
57+
<div className='mb-1 system-md-medium text-text-primary'>{tool.label[language]}</div>
58+
<div className='system-xs-regular text-text-tertiary'>{tool.description[language]}</div>
5959
</div>
6060
)}
6161
>
6262
<div
63-
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
63+
className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer'
6464
onClick={() => onSelect(BlockEnum.Tool, {
6565
provider_id: toolWithProvider.id,
6666
provider_type: toolWithProvider.type,
@@ -75,7 +75,7 @@ const Blocks = ({
7575
type={BlockEnum.Tool}
7676
toolIcon={toolWithProvider.icon}
7777
/>
78-
<div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{tool.label[language]}</div>
78+
<div className='text-sm text-text-secondary flex-1 min-w-0 truncate'>{tool.label[language]}</div>
7979
</div>
8080
</Tooltip>
8181
))
@@ -100,7 +100,7 @@ const Blocks = ({
100100
<div className='p-1 max-w-[320px] max-h-[464px] overflow-y-auto'>
101101
{
102102
!tools.length && !showWorkflowEmpty && (
103-
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>{t('workflow.tabs.noResult')}</div>
103+
<div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>
104104
)
105105
}
106106
{!tools.length && showWorkflowEmpty && (

‎web/app/components/workflow/header/editing-title.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const EditingTitle = () => {
1313
const isSyncingWorkflowDraft = useStore(s => s.isSyncingWorkflowDraft)
1414

1515
return (
16-
<div className='flex items-center h-[18px] text-xs text-gray-500'>
16+
<div className='flex items-center h-[18px] system-xs-regular text-text-tertiary'>
1717
{
1818
!!draftUpdatedAt && (
1919
<>

‎web/app/components/workflow/header/index.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
} from '../hooks'
2828
import AppPublisher from '../../app/app-publisher'
2929
import { ToastContext } from '../../base/toast'
30+
import Divider from '../../base/divider'
3031
import RunAndHistory from './run-and-history'
3132
import EditingTitle from './editing-title'
3233
import RunningTitle from './running-title'
@@ -144,15 +145,12 @@ const Header: FC = () => {
144145

145146
return (
146147
<div
147-
className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14'
148-
style={{
149-
background: 'linear-gradient(180deg, #F9FAFB 0%, rgba(249, 250, 251, 0.00) 100%)',
150-
}}
148+
className='absolute top-0 left-0 z-10 flex items-center justify-between w-full px-3 h-14 bg-mask-top2bottom-gray-50-to-transparent'
151149
>
152150
<div>
153151
{
154152
appSidebarExpand === 'collapse' && (
155-
<div className='text-xs font-medium text-gray-700'>{appDetail?.name}</div>
153+
<div className='system-xs-regular text-text-tertiary'>{appDetail?.name}</div>
156154
)
157155
}
158156
{
@@ -171,7 +169,7 @@ const Header: FC = () => {
171169
{/* <GlobalVariableButton disabled={nodesReadOnly} /> */}
172170
{isChatMode && <ChatVariableButton disabled={nodesReadOnly} />}
173171
<EnvButton disabled={nodesReadOnly} />
174-
<div className='w-[1px] h-3.5 bg-gray-200'></div>
172+
<Divider type='vertical' className='h-3.5 mx-auto' />
175173
<RunAndHistory />
176174
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
177175
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
@@ -196,12 +194,11 @@ const Header: FC = () => {
196194
}
197195
{
198196
viewHistory && (
199-
<div className='flex items-center'>
197+
<div className='flex items-center space-x-2'>
200198
<ViewHistory withText />
201-
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
199+
<Divider type='vertical' className='h-3.5 mx-auto' />
202200
<Button
203201
variant='primary'
204-
className='mr-2'
205202
onClick={handleGoBackToEdit}
206203
>
207204
<ArrowNarrowLeft className='w-4 h-4 mr-1' />
@@ -212,14 +209,13 @@ const Header: FC = () => {
212209
}
213210
{
214211
restoring && (
215-
<div className='flex items-center'>
212+
<div className='flex items-center space-x-2'>
216213
<Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
217214
<RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
218215
{t('workflow.common.features')}
219216
</Button>
220-
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
217+
<Divider type='vertical' className='h-3.5 mx-auto' />
221218
<Button
222-
className='mr-2'
223219
onClick={handleCancelRestore}
224220
>
225221
{t('common.operation.cancel')}

‎web/app/components/workflow/header/undo-redo.tsx

+15-14
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import {
77
} from '@remixicon/react'
88
import TipPopup from '../operator/tip-popup'
99
import { useWorkflowHistoryStore } from '../workflow-history-store'
10+
import Divider from '../../base/divider'
1011
import { useNodesReadOnly } from '@/app/components/workflow/hooks'
1112
import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
13+
import classNames from '@/utils/classnames'
1214

1315
export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
1416
const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
@@ -29,36 +31,35 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
2931
const { nodesReadOnly } = useNodesReadOnly()
3032

3133
return (
32-
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
34+
<div className='flex items-center space-x-0.5 p-0.5 backdrop-blur-[5px] rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg'>
3335
<TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
3436
<div
3537
data-tooltip-id='workflow.undo'
36-
className={`
37-
flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium
38-
hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none
39-
${(nodesReadOnly || buttonsDisabled.undo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'}
40-
`}
38+
className={
39+
classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
40+
(nodesReadOnly || buttonsDisabled.undo)
41+
&& 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed')}
4142
onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
4243
>
4344
<RiArrowGoBackLine className='h-4 w-4' />
4445
</div>
45-
</TipPopup>
46+
</TipPopup >
4647
<TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}>
4748
<div
4849
data-tooltip-id='workflow.redo'
49-
className={`
50-
flex items-center px-1.5 w-8 h-8 rounded-md text-[13px] font-medium
51-
hover:bg-black/5 hover:text-gray-700 cursor-pointer select-none
52-
${(nodesReadOnly || buttonsDisabled.redo) && 'hover:bg-transparent opacity-50 !cursor-not-allowed'}
53-
`}
50+
className={
51+
classNames('flex items-center px-1.5 w-8 h-8 rounded-md system-sm-medium text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer select-none',
52+
(nodesReadOnly || buttonsDisabled.redo)
53+
&& 'hover:bg-transparent text-text-disabled hover:text-text-disabled cursor-not-allowed',
54+
)}
5455
onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
5556
>
5657
<RiArrowGoForwardFill className='h-4 w-4' />
5758
</div>
5859
</TipPopup>
59-
<div className="mx-[3px] w-[1px] h-3.5 bg-gray-200"></div>
60+
<Divider type='vertical' className="h-3.5 mx-0.5" />
6061
<ViewWorkflowHistory />
61-
</div>
62+
</div >
6263
)
6364
}
6465

0 commit comments

Comments
 (0)