From 099746dd5909bb62eb9b3d624ee5956790933eea Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 19 Sep 2024 17:28:17 +0800
Subject: [PATCH] fix style of tracing

---
 web/app/components/workflow/panel/workflow-preview.tsx | 9 +++++----
 web/app/components/workflow/run/index.tsx              | 3 ++-
 web/app/components/workflow/run/node.tsx               | 2 +-
 web/app/components/workflow/run/result-text.tsx        | 7 ++++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 7fee3436b2..0c751f0360 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -146,8 +146,8 @@ const WorkflowPreview = () => {
                 >{t('runLog.tracing')}</div>
               </div>
               <div className={cn(
-                'grow bg-white h-0 overflow-y-auto rounded-b-2xl',
-                (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-gray-50',
+                'grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl',
+                (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-background-section-burn',
               )}>
                 {currentTab === 'INPUT' && showInputsPanel && (
                   <InputsPanel onRun={() => switchTab('RESULT')} />
@@ -191,18 +191,19 @@ const WorkflowPreview = () => {
                   />
                 )}
                 {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-                  <div className='flex h-full items-center justify-center bg-white'>
+                  <div className='flex h-full items-center justify-center bg-components-panel-bg'>
                     <Loading />
                   </div>
                 )}
                 {currentTab === 'TRACING' && (
                   <TracingPanel
+                    className='bg-background-section-burn'
                     list={workflowRunningData?.tracing || []}
                     onShowIterationDetail={handleShowIterationDetail}
                   />
                 )}
                 {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-                  <div className='flex h-full items-center justify-center bg-gray-50'>
+                  <div className='flex h-full items-center justify-center !bg-background-section-burn'>
                     <Loading />
                   </div>
                 )}
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 94d9cc41ff..9e636e902b 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -192,7 +192,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detail */}
-      <div ref={ref} className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
+      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
         {loading && (
           <div className='flex h-full items-center justify-center bg-components-panel-bg'>
             <Loading />
@@ -220,6 +220,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         )}
         {!loading && currentTab === 'TRACING' && (
           <TracingPanel
+            className='bg-background-section-burn'
             list={list}
             onShowIterationDetail={handleShowIterationDetail}
           />
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 1016f9f4f9..14270aa529 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -85,7 +85,7 @@ const NodePanel: FC<Props> = ({
   }
   return (
     <div className={cn('px-2 py-1', className)}>
-      <div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadows-shadow-xs hover:shadow-md'>
+      <div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadow-xs hover:shadow-md'>
         <div
           className={cn(
             'flex items-center pl-1 pr-3 cursor-pointer',
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index ddb233059e..63ce9adec5 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { ImageIndentLeft } from '@/app/components/base/icons/src/vender/line/editor'
 import { Markdown } from '@/app/components/base/markdown'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
+import StatusContainer from '@/app/components/workflow/run/status-container'
 
 type ResultTextProps = {
   isRunning?: boolean
@@ -28,9 +29,9 @@ const ResultText: FC<ResultTextProps> = ({
       )}
       {!isRunning && error && (
         <div className='px-4'>
-          <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-xs'>
-            <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
-          </div>
+          <StatusContainer status='failed'>
+            {error}
+          </StatusContainer>
         </div>
       )}
       {!isRunning && !outputs && !error && (