From 3da854fe403fb785064670f1a54b77e5b2e89232 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 19 Jul 2024 16:39:49 +0800
Subject: [PATCH] chore: some components upgrage to new ui (#6468)

---
 web/app/components/base/switch/index.tsx       |  6 +++---
 .../workflow/nodes/_base/components/field.tsx  |  6 +++---
 .../nodes/_base/components/next-step/add.tsx   | 12 ++++++------
 .../nodes/_base/components/next-step/index.tsx |  2 +-
 .../nodes/_base/components/next-step/item.tsx  |  4 ++--
 .../nodes/_base/components/next-step/line.tsx  | 18 +++++++++---------
 .../nodes/_base/components/output-vars.tsx     | 14 ++++++++------
 .../components/workflow/nodes/_base/node.tsx   | 10 +++++-----
 .../components/workflow/nodes/_base/panel.tsx  | 18 +++++++++---------
 web/app/styles/globals.css                     |  6 ++++++
 10 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index 0b025ab38b..b3d6067204 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/web/app/components/base/switch/index.tsx
@@ -47,8 +47,8 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
       }}
       className={classNames(
         wrapStyle[size],
-        enabled ? 'bg-blue-600' : 'bg-gray-200',
-        'relative inline-flex  flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
+        enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
+        'relative inline-flex  flex-shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
         disabled ? '!opacity-50 !cursor-not-allowed' : '',
         className,
       )}
@@ -58,7 +58,7 @@ const Switch = ({ onChange, size = 'lg', defaultValue = false, disabled = false,
         className={classNames(
           circleStyle[size],
           enabled ? translateLeft[size] : 'translate-x-0',
-          'pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+          'pointer-events-none inline-block transform rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
         )}
       />
     </OriginalSwitch>
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 1301e9f2ed..344fc3d708 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -38,13 +38,13 @@ const Filed: FC<Props> = ({
         onClick={() => supportFold && toggleFold()}
         className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
         <div className='flex items-center h-6'>
-          <div className='text-[13px] font-medium text-gray-700 uppercase'>{title}</div>
+          <div className='system-sm-semibold-uppercase text-text-secondary'>{title}</div>
           {tooltip && (
             <TooltipPlus popupContent={
               <div className='w-[120px]'>
                 {tooltip}
               </div>}>
-              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
+              <RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-text-quaternary' />
             </TooltipPlus>
           )}
 
@@ -52,7 +52,7 @@ const Filed: FC<Props> = ({
         <div className='flex'>
           {operations && <div>{operations}</div>}
           {supportFold && (
-            <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
+            <RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
           )}
         </div>
       </div>
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
index df90fa156b..0ab0c8e39e 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -51,23 +51,23 @@ const Add = ({
     return (
       <div
         className={`
-          relative flex items-center px-2 h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 
-          hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
-          ${open && '!bg-gray-100'}
+          relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
+          hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
+          ${open && '!bg-components-dropzone-bg-alt'}
           ${nodesReadOnly && '!cursor-not-allowed'}
         `}
       >
         {
           branchName && (
             <div
-              className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-gray-500 font-semibold'
+              className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-text-placeholder font-semibold'
               title={branchName.toLocaleUpperCase()}
             >
-              <div className='inline-block px-0.5 rounded-[5px] bg-white truncate'>{branchName.toLocaleUpperCase()}</div>
+              <div className='inline-block px-0.5 rounded-[5px] bg-background-default truncate'>{branchName.toLocaleUpperCase()}</div>
             </div>
           )
         }
-        <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
+        <div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-background-default-dimm'>
           <RiAddLine className='w-3 h-3' />
         </div>
         {t('workflow.panel.selectNextStep')}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
index a6fd940f63..261eb3fac7 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@@ -33,7 +33,7 @@ const NextStep = ({
 
   return (
     <div className='flex py-1'>
-      <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
+      <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-background-default rounded-lg border-[0.5px] border-divider-regular shadow-xs'>
         <BlockIcon
           type={selectedNode!.data.type}
           toolIcon={toolIcon}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 50c4dbe943..b806de5684 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -58,7 +58,7 @@ const Item = ({
 
   return (
     <div
-      className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
+      className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-xs text-text-secondary cursor-pointer'
     >
       {
         branchName && (
@@ -75,7 +75,7 @@ const Item = ({
         toolIcon={toolIcon}
         className='shrink-0 mr-1.5'
       />
-      <div className='grow'>{data.title}</div>
+      <div className='grow system-xs-medium text-text-secondary'>{data.title}</div>
       {
         !nodesReadOnly && (
           <BlockSelector
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/line.tsx b/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
index 40f6899e27..ccf4e8d730 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/line.tsx
@@ -16,18 +16,18 @@ const Line = ({
             {
               index === 0 && (
                 <>
+                  <path
+                    d='M0,18 L24,18'
+                    strokeWidth={1}
+                    fill='none'
+                    className='stroke-divider-soild'
+                  />
                   <rect
                     x={0}
                     y={16}
                     width={1}
                     height={4}
-                    fill='#98A2B3'
-                  />
-                  <path
-                    d='M0,18 L24,18'
-                    strokeWidth={1}
-                    stroke='#D0D5DD'
-                    fill='none'
+                    className='fill-divider-soild-alt'
                   />
                 </>
               )
@@ -37,8 +37,8 @@ const Line = ({
                 <path
                   d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
                   strokeWidth={1}
-                  stroke='#D0D5DD'
                   fill='none'
+                  className='stroke-divider-soild'
                 />
               )
             }
@@ -47,7 +47,7 @@ const Line = ({
               y={index * 48 + 18 - 2}
               width={1}
               height={4}
-              fill='#98A2B3'
+              className='fill-divider-soild-alt'
             />
           </g>
         ))
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index 401a5d6a3e..4b7f9fc12e 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -3,8 +3,10 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
   className?: string
@@ -25,9 +27,9 @@ const OutputVars: FC<Props> = ({
     <div>
       <div
         onClick={toggleFold}
-        className={cn(className, 'flex justify-between leading-[18px] text-[13px] font-semibold text-gray-700 uppercase cursor-pointer')}>
+        className={cn(className, 'flex justify-between system-sm-semibold-uppercase text-text-secondary cursor-pointer')}>
         <div>{title || t('workflow.nodes.common.outputVars')}</div>
-        <ChevronRight className='w-4 h-4 text-gray-500 transform transition-transform' style={{ transform: isFold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
+        <RiArrowDownSLine className='w-4 h-4 text-text-tertiary transform transition-transform' style={{ transform: isFold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
       </div>
       {!isFold && (
         <div className='mt-2 space-y-1'>
@@ -57,10 +59,10 @@ export const VarItem: FC<VarItemProps> = ({
   return (
     <div className='py-1'>
       <div className='flex leading-[18px] items-center'>
-        <div className='text-[13px] font-medium text-gray-900 font-mono'>{name}</div>
-        <div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{type}</div>
+        <div className='code-sm-semibold text-text-secondary'>{name}</div>
+        <div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
       </div>
-      <div className='mt-0.5 leading-[18px] text-xs font-normal text-gray-600'>
+      <div className='mt-0.5 system-xs-regular text-text-tertiary'>
         {description}
         {subItems && (
           <div className='ml-2 border-l border-gray-200 pl-2'>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 6d1e522e66..2cef91f1b1 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -79,7 +79,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     <div
       className={cn(
         'flex border-[2px] rounded-2xl',
-        showSelectedBorder ? 'border-primary-600' : 'border-transparent',
+        showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
       )}
       ref={nodeRef}
       style={{
@@ -91,8 +91,8 @@ const BaseNode: FC<BaseNodeProps> = ({
         className={cn(
           'group relative pb-1 shadow-xs',
           'border border-transparent rounded-[15px]',
-          data.type !== BlockEnum.Iteration && 'w-[240px] bg-[#fcfdff]',
-          data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-[#fcfdff]/80',
+          data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg',
+          data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-workflow-block-bg/80',
           !data._runningStatus && 'hover:shadow-lg',
           showRunningBorder && '!border-primary-500',
           showSuccessBorder && '!border-[#12B76A]',
@@ -156,7 +156,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           />
           <div
             title={data.title}
-            className='grow mr-1 text-[13px] font-semibold text-gray-700 truncate'
+            className='grow mr-1 system-sm-semibold-uppercase text-text-primary truncate'
           >
             {data.title}
           </div>
@@ -197,7 +197,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         }
         {
           data.desc && data.type !== BlockEnum.Iteration && (
-            <div className='px-3 pt-1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
+            <div className='px-3 pt-1 pb-2 system-xs-regular text-text-tertiary whitespace-pre-line break-words'>
               {data.desc}
             </div>
           )
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 83d05cbff8..269d8110dc 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -98,21 +98,21 @@ const BasePanel: FC<BasePanelProps> = ({
   return (
     <div className={cn(
       'relative mr-2 h-full',
-      showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-gray-200 rounded-2xl transition-all',
+      showMessageLogModal && '!absolute !mr-0 w-[384px] overflow-hidden -top-[5px] right-[416px] z-0 shadow-lg border-[0.5px] border-components-panel-border rounded-2xl transition-all',
     )}>
       <div
         ref={triggerRef}
         className='absolute top-1/2 -translate-y-1/2 -left-2 w-3 h-6 cursor-col-resize resize-x'>
-        <div className='w-1 h-6 bg-gray-300 rounded-sm'></div>
+        <div className='w-1 h-6 bg-divider-regular rounded-sm'></div>
       </div>
       <div
         ref={containerRef}
-        className={cn('h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
+        className={cn('h-full bg-components-panel-bg shadow-lg border-[0.5px] border-components-panel-border rounded-2xl', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
           width: `${panelWidth}px`,
         }}
       >
-        <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
+        <div className='sticky top-0 bg-components-panel-bg border-b-[0.5px] border-black/5 z-10'>
           <div className='flex items-center px-4 pt-4 pb-1'>
             <BlockIcon
               className='shrink-0 mr-1'
@@ -137,19 +137,19 @@ const BasePanel: FC<BasePanelProps> = ({
                         handleSyncWorkflowDraft(true)
                       }}
                     >
-                      <RiPlayLargeLine className='w-4 h-4 text-gray-500' />
+                      <RiPlayLargeLine className='w-4 h-4 text-text-tertiary' />
                     </div>
                   </TooltipPlus>
                 )
               }
               <HelpLink nodeType={data.type} />
               <PanelOperator id={id} data={data} showHelpLink={false} />
-              <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
+              <div className='mx-3 w-[1px] h-3.5 bg-divider-regular' />
               <div
                 className='flex items-center justify-center w-6 h-6 cursor-pointer'
                 onClick={() => handleNodeSelect(id, true)}
               >
-                <RiCloseLine className='w-4 h-4' />
+                <RiCloseLine className='w-4 h-4 text-text-tertiary' />
               </div>
             </div>
           </div>
@@ -166,10 +166,10 @@ const BasePanel: FC<BasePanelProps> = ({
         {
           !!availableNextBlocks.length && (
             <div className='p-4 border-t-[0.5px] border-t-black/5'>
-              <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
+              <div className='flex items-center mb-1 system-sm-semibold-uppercase text-text-secondary'>
                 {t('workflow.panel.nextStep').toLocaleUpperCase()}
               </div>
-              <div className='mb-2 text-xs text-gray-400'>
+              <div className='mb-2 system-xs-regular text-text-tertiary'>
                 {t('workflow.panel.addNextStep')}
               </div>
               <NextStep selectedNode={{ id, data } as Node} />
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 1c13e7eb5f..9f23c3d473 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -276,6 +276,10 @@ button:focus-within {
   line-height: 24px;
 }
 
+[class*='code-'] {
+  @apply font-mono;
+}
+
 .code-xs-regular {
   font-size: 12px;
   font-weight: 400;
@@ -563,6 +567,7 @@ button:focus-within {
   font-weight: 700;
   line-height: 1.2;
 }
+
 /* font define end */
 
 /* border radius start */
@@ -625,6 +630,7 @@ button:focus-within {
 .radius-full {
   border-radius: 64px;
 }
+
 /* border radius end */
 
 .link {