From db63c2c219ac11a10d952f587bde77d65bfc305f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 14 Aug 2024 18:40:11 +0800
Subject: [PATCH] new style of status

---
 .../workflow/run/assets/highlight.svg         |  9 ++++
 .../components/workflow/run/output-panel.tsx  |  5 +-
 .../workflow/run/status-container.tsx         | 30 ++++++++++++
 web/app/components/workflow/run/status.tsx    | 46 +++++++++----------
 4 files changed, 62 insertions(+), 28 deletions(-)
 create mode 100644 web/app/components/workflow/run/assets/highlight.svg
 create mode 100644 web/app/components/workflow/run/status-container.tsx

diff --git a/web/app/components/workflow/run/assets/highlight.svg b/web/app/components/workflow/run/assets/highlight.svg
new file mode 100644
index 0000000000..720ae25891
--- /dev/null
+++ b/web/app/components/workflow/run/assets/highlight.svg
@@ -0,0 +1,9 @@
+<svg width="237" height="50" viewBox="0 0 237 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M0 8C0 3.58172 3.58172 0 8 0H237L215.033 50H8C3.58172 50 0 46.4183 0 42V8Z" fill="url(#paint0_linear_3552_29170)"/>
+<defs>
+<linearGradient id="paint0_linear_3552_29170" x1="-4.89158e-08" y1="4.62963" x2="168.013" y2="23.1752" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index 3860ecc58e..48a3806aeb 100644
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@@ -4,6 +4,7 @@ import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 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 OutputPanelProps = {
   isRunning?: boolean
@@ -27,9 +28,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
       )}
       {!isRunning && error && (
         <div className='px-4'>
-          <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(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 && (
diff --git a/web/app/components/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
new file mode 100644
index 0000000000..bce3a1f505
--- /dev/null
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -0,0 +1,30 @@
+'use client'
+import type { FC } from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  status: string
+  children?: React.ReactNode
+}
+
+const StatusContainer: FC<Props> = ({
+  status,
+  children,
+}) => {
+  return (
+    <div
+      className={cn(
+        'relative px-3 py-2.5 rounded-lg border system-xs-regular',
+        status === 'succeeded' && 'border-[rgba(23,178,106,0.8)] bg-workflow-display-success-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-success.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(23,178,106,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-success',
+        status === 'failed' && 'border-[rgba(240,68,56,0.8)] bg-workflow-display-error-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-error.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(240,68,56,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-warning',
+        status === 'stopped' && 'border-[rgba(247,144,9,0.8)] bg-workflow-display-warning-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-warning.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(247,144,9,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-text-destructive',
+        status === 'running' && 'border-[rgba(11,165,236,0.8)] bg-workflow-display-normal-bg bg-[url(~@/app/components/workflow/run/assets/bg-line-running.svg)] shadow-[inset_2px_2px_0_0_rgba(255,255,255,0.5),inset_0_1px_3px_0_rgba(0,0,0,0.12),inset_0_2px_24px_0_rgba(11,165,236,0.2),0_1px_2px_0_rgba(9,9,11,0.05),0_0_0_1px_rgba(0,0,0,0.05)] text-util-colors-blue-light-blue-light-600',
+      )}
+    >
+      <div className='absolute top-0 left-0 w-[65%] h-[50px] bg-[url(~@/app/components/workflow/run/assets/highlight.svg)]'></div>
+      {children}
+    </div>
+  )
+}
+
+export default StatusContainer
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 02b2ab50ed..53abccb6af 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
+import StatusContainer from '@/app/components/workflow/run/status-container'
 
 type ResultProps = {
   status: string
@@ -20,29 +21,24 @@ const StatusPanel: FC<ResultProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div
-      className={cn(
-        'px-3 py-[10px] rounded-lg border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-xs',
-        status === 'succeeded' && '!bg-[#ecfdf3]',
-        status === 'failed' && '!bg-[#fef3f2]',
-        status === 'stopped' && '!bg-[#fffaeb]',
-        status === 'running' && '!bg-primary-50',
-      )}
-    >
+    <StatusContainer status={status}>
       <div className='flex'>
         <div className='flex-[33%] max-w-[120px]'>
-          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.status')}</div>
+          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.status')}</div>
           <div
             className={cn(
-              'flex items-center gap-1 h-[18px] text-xs leading-3 font-semibold',
-              status === 'running' && '!text-primary-600',
-              status === 'succeeded' && '!text-[#039855]',
-              status === 'failed' && '!text-[#d92d20]',
-              status === 'stopped' && '!text-[#f79009]',
+              'flex items-center gap-1 system-xs-semibold-uppercase',
+              status === 'succeeded' && 'text-util-colors-green-green-600',
+              status === 'failed' && 'text-util-colors-red-red-600',
+              status === 'stopped' && 'text-util-colors-warning-warning-600',
+              status === 'running' && 'text-util-colors-blue-light-blue-light-600',
             )}
           >
             {status === 'running' && (
-              <span>Running</span>
+              <>
+                <Indicator color={'blue'} />
+                <span>Running</span>
+              </>
             )}
             {status === 'succeeded' && (
               <>
@@ -65,10 +61,10 @@ const StatusPanel: FC<ResultProps> = ({
           </div>
         </div>
         <div className='flex-[33%] max-w-[152px]'>
-          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
-          <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
+          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
+          <div className='flex items-center gap-1 system-sm-medium'>
             {status === 'running' && (
-              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
+              <div className='w-16 h-2 rounded-sm bg-text-quaternary' />
             )}
             {status !== 'running' && (
               <span>{`${time?.toFixed(3)}s`}</span>
@@ -76,10 +72,10 @@ const StatusPanel: FC<ResultProps> = ({
           </div>
         </div>
         <div className='flex-[33%]'>
-          <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
-          <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
+          <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
+          <div className='flex items-center gap-1 system-sm-medium'>
             {status === 'running' && (
-              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
+              <div className='w-20 h-2 rounded-sm bg-text-quaternary' />
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -89,11 +85,11 @@ const StatusPanel: FC<ResultProps> = ({
       </div>
       {status === 'failed' && error && (
         <>
-          <div className='my-2 h-[0.5px] bg-black opacity-5' />
-          <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
+          <div className='my-2 h-[0.5px] bg-divider-subtle'/>
+          <div className='system-xs-regular text-text-destructive'>{error}</div>
         </>
       )}
-    </div>
+    </StatusContainer>
   )
 }