From 47615ac8fbacc1db95588789cf8ae63e11895280 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 13 Aug 2024 14:53:28 +0800
Subject: [PATCH] meta data style update

---
 .../workflow/run/assets/bg-line-error.svg     |  3 ++
 .../workflow/run/assets/bg-line-running.svg   |  3 ++
 .../workflow/run/assets/bg-line-success.svg   |  3 ++
 .../workflow/run/assets/bg-line-warning.svg   |  3 ++
 web/app/components/workflow/run/meta.tsx      | 38 +++++++++----------
 web/app/components/workflow/run/status.tsx    |  4 +-
 6 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 web/app/components/workflow/run/assets/bg-line-error.svg
 create mode 100644 web/app/components/workflow/run/assets/bg-line-running.svg
 create mode 100644 web/app/components/workflow/run/assets/bg-line-success.svg
 create mode 100644 web/app/components/workflow/run/assets/bg-line-warning.svg

diff --git a/web/app/components/workflow/run/assets/bg-line-error.svg b/web/app/components/workflow/run/assets/bg-line-error.svg
new file mode 100644
index 0000000000..bf29aa0e4c
--- /dev/null
+++ b/web/app/components/workflow/run/assets/bg-line-error.svg
@@ -0,0 +1,3 @@
+<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M0 0H368M0 2H368M0 4H368M0 6H368M0 8H368M0 10H368M0 12H368M0 14H368M0 16H368M0 18H368M0 20H368M0 22H368M0 24H368M0 26H368M0 28H368M0 30H368M0 32H368M0 34H368M0 36H368M0 38H368M0 40H368M0 42H368M0 44H368M0 46H368M0 48H368M0 50H368M0 52H368M0 54H368M0 56H368M0 58H368M0 60H368M0 62H368M0 64H368M0 66H368M0 68H368M0 70H368M0 72H368M0 74H368M0 76H368M0 78H368M0 80H368M0 82H368M0 84H368M0 86H368M0 88H368M0 90H368M0 92H368M0 94H368M0 96H368M0 98H368M0 100H368M0 102H368M0 104H368M0 106H368M0 108H368M0 110H368M0 112H368M0 114H368M0 116H368M0 118H368M0 120H368M0 122H368M0 124H368M0 126H368M0 128H368M0 130H368M0 132H368M0 134H368M0 136H368M0 138H368M0 140H368M0 142H368M0 144H368M0 146H368M0 148H368M0 150H368M0 152H368M0 154H368M0 156H368M0 158H368M0 160H368M0 162H368M0 164H368M0 166H368M0 168H368M0 170H368M0 172H368M0 174H368M0 176H368M0 178H368M0 180H368M0 182H368M0 184H368M0 186H368M0 188H368M0 190H368M0 192H368M0 194H368M0 196H368M0 198H368M0 200H368M0 202H368M0 204H368M0 206H368M0 208H368M0 210H368M0 212H368M0 214H368M0 216H368M0 218H368M0 220H368M0 222H368M0 224H368M0 226H368" stroke="#F04438" stroke-opacity="0.3" stroke-width="0.5"/>
+</svg>
diff --git a/web/app/components/workflow/run/assets/bg-line-running.svg b/web/app/components/workflow/run/assets/bg-line-running.svg
new file mode 100644
index 0000000000..c66ba70a17
--- /dev/null
+++ b/web/app/components/workflow/run/assets/bg-line-running.svg
@@ -0,0 +1,3 @@
+<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M0 0.5H368M0 2.5H368M0 4.5H368M0 6.5H368M0 8.5H368M0 10.5H368M0 12.5H368M0 14.5H368M0 16.5H368M0 18.5H368M0 20.5H368M0 22.5H368M0 24.5H368M0 26.5H368M0 28.5H368M0 30.5H368M0 32.5H368M0 34.5H368M0 36.5H368M0 38.5H368M0 40.5H368M0 42.5H368M0 44.5H368M0 46.5H368M0 48.5H368M0 50.5H368M0 52.5H368M0 54.5H368M0 56.5H368M0 58.5H368M0 60.5H368M0 62.5H368M0 64.5H368M0 66.5H368M0 68.5H368M0 70.5H368M0 72.5H368M0 74.5H368M0 76.5H368M0 78.5H368M0 80.5H368M0 82.5H368M0 84.5H368M0 86.5H368M0 88.5H368M0 90.5H368M0 92.5H368M0 94.5H368M0 96.5H368M0 98.5H368M0 100.5H368M0 102.5H368M0 104.5H368M0 106.5H368M0 108.5H368M0 110.5H368M0 112.5H368M0 114.5H368M0 116.5H368M0 118.5H368M0 120.5H368M0 122.5H368M0 124.5H368M0 126.5H368M0 128.5H368M0 130.5H368M0 132.5H368M0 134.5H368M0 136.5H368M0 138.5H368M0 140.5H368M0 142.5H368M0 144.5H368M0 146.5H368M0 148.5H368M0 150.5H368M0 152.5H368M0 154.5H368M0 156.5H368M0 158.5H368M0 160.5H368M0 162.5H368M0 164.5H368M0 166.5H368M0 168.5H368M0 170.5H368M0 172.5H368M0 174.5H368M0 176.5H368M0 178.5H368M0 180.5H368M0 182.5H368M0 184.5H368M0 186.5H368M0 188.5H368M0 190.5H368M0 192.5H368M0 194.5H368M0 196.5H368M0 198.5H368M0 200.5H368M0 202.5H368M0 204.5H368M0 206.5H368M0 208.5H368M0 210.5H368M0 212.5H368M0 214.5H368M0 216.5H368M0 218.5H368M0 220.5H368M0 222.5H368M0 224.5H368M0 226.5H368" stroke="#0BA5EC" stroke-opacity="0.3" stroke-width="0.5"/>
+</svg>
diff --git a/web/app/components/workflow/run/assets/bg-line-success.svg b/web/app/components/workflow/run/assets/bg-line-success.svg
new file mode 100644
index 0000000000..3720a26382
--- /dev/null
+++ b/web/app/components/workflow/run/assets/bg-line-success.svg
@@ -0,0 +1,3 @@
+<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M0 0H368M0 2H368M0 4H368M0 6H368M0 8H368M0 10H368M0 12H368M0 14H368M0 16H368M0 18H368M0 20H368M0 22H368M0 24H368M0 26H368M0 28H368M0 30H368M0 32H368M0 34H368M0 36H368M0 38H368M0 40H368M0 42H368M0 44H368M0 46H368M0 48H368M0 50H368M0 52H368M0 54H368M0 56H368M0 58H368M0 60H368M0 62H368M0 64H368M0 66H368M0 68H368M0 70H368M0 72H368M0 74H368M0 76H368M0 78H368M0 80H368M0 82H368M0 84H368M0 86H368M0 88H368M0 90H368M0 92H368M0 94H368M0 96H368M0 98H368M0 100H368M0 102H368M0 104H368M0 106H368M0 108H368M0 110H368M0 112H368M0 114H368M0 116H368M0 118H368M0 120H368M0 122H368M0 124H368M0 126H368M0 128H368M0 130H368M0 132H368M0 134H368M0 136H368M0 138H368M0 140H368M0 142H368M0 144H368M0 146H368M0 148H368M0 150H368M0 152H368M0 154H368M0 156H368M0 158H368M0 160H368M0 162H368M0 164H368M0 166H368M0 168H368M0 170H368M0 172H368M0 174H368M0 176H368M0 178H368M0 180H368M0 182H368M0 184H368M0 186H368M0 188H368M0 190H368M0 192H368M0 194H368M0 196H368M0 198H368M0 200H368M0 202H368M0 204H368M0 206H368M0 208H368M0 210H368M0 212H368M0 214H368M0 216H368M0 218H368M0 220H368M0 222H368M0 224H368M0 226H368" stroke="#17B26A" stroke-opacity="0.3" stroke-width="0.5"/>
+</svg>
diff --git a/web/app/components/workflow/run/assets/bg-line-warning.svg b/web/app/components/workflow/run/assets/bg-line-warning.svg
new file mode 100644
index 0000000000..21aec57576
--- /dev/null
+++ b/web/app/components/workflow/run/assets/bg-line-warning.svg
@@ -0,0 +1,3 @@
+<svg width="368" height="52" viewBox="0 0 368 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M0 0.5H368M0 2.5H368M0 4.5H368M0 6.5H368M0 8.5H368M0 10.5H368M0 12.5H368M0 14.5H368M0 16.5H368M0 18.5H368M0 20.5H368M0 22.5H368M0 24.5H368M0 26.5H368M0 28.5H368M0 30.5H368M0 32.5H368M0 34.5H368M0 36.5H368M0 38.5H368M0 40.5H368M0 42.5H368M0 44.5H368M0 46.5H368M0 48.5H368M0 50.5H368M0 52.5H368M0 54.5H368M0 56.5H368M0 58.5H368M0 60.5H368M0 62.5H368M0 64.5H368M0 66.5H368M0 68.5H368M0 70.5H368M0 72.5H368M0 74.5H368M0 76.5H368M0 78.5H368M0 80.5H368M0 82.5H368M0 84.5H368M0 86.5H368M0 88.5H368M0 90.5H368M0 92.5H368M0 94.5H368M0 96.5H368M0 98.5H368M0 100.5H368M0 102.5H368M0 104.5H368M0 106.5H368M0 108.5H368M0 110.5H368M0 112.5H368M0 114.5H368M0 116.5H368M0 118.5H368M0 120.5H368M0 122.5H368M0 124.5H368M0 126.5H368M0 128.5H368M0 130.5H368M0 132.5H368M0 134.5H368M0 136.5H368M0 138.5H368M0 140.5H368M0 142.5H368M0 144.5H368M0 146.5H368M0 148.5H368M0 150.5H368M0 152.5H368M0 154.5H368M0 156.5H368M0 158.5H368M0 160.5H368M0 162.5H368M0 164.5H368M0 166.5H368M0 168.5H368M0 170.5H368M0 172.5H368M0 174.5H368M0 176.5H368M0 178.5H368M0 180.5H368M0 182.5H368M0 184.5H368M0 186.5H368M0 188.5H368M0 190.5H368M0 192.5H368M0 194.5H368M0 196.5H368M0 198.5H368M0 200.5H368M0 202.5H368M0 204.5H368M0 206.5H368M0 208.5H368M0 210.5H368M0 212.5H368M0 214.5H368M0 216.5H368M0 218.5H368M0 220.5H368M0 222.5H368M0 224.5H368M0 226.5H368" stroke="#F79009" stroke-opacity="0.3" stroke-width="0.5"/>
+</svg>
diff --git a/web/app/components/workflow/run/meta.tsx b/web/app/components/workflow/run/meta.tsx
index 86eb221ad9..9f03bd7774 100644
--- a/web/app/components/workflow/run/meta.tsx
+++ b/web/app/components/workflow/run/meta.tsx
@@ -27,13 +27,13 @@ const MetaData: FC<Props> = ({
 
   return (
     <div className='relative'>
-      <div className='h-6 leading-6 text-gray-500 text-xs font-medium'>{t('runLog.meta.title')}</div>
+      <div className='h-6 py-1 text-text-tertiary system-xs-medium-uppercase'>{t('runLog.meta.title')}</div>
       <div className='py-1'>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.status')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.status')}</div>
+          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
             {status === 'running' && (
-              <div className='my-[5px] w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='my-1 w-16 h-2 rounded-sm bg-text-quaternary'/>
             )}
             {status === 'succeeded' && (
               <span>SUCCESS</span>
@@ -47,10 +47,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.executor')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.executor')}</div>
+          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
             {status === 'running' && (
-              <div className='my-[5px] w-[88px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='my-1 w-[88px] h-2 rounded-sm bg-text-quaternary'/>
             )}
             {status !== 'running' && (
               <span>{executor || 'N/A'}</span>
@@ -58,10 +58,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.startTime')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.startTime')}</div>
+          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
             {status === 'running' && (
-              <div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
             )}
             {status !== 'running' && (
               <span>{formatTime(startTime, t('appLog.dateTimeFormat') as string)}</span>
@@ -69,10 +69,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.time')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.time')}</div>
+          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
             {status === 'running' && (
-              <div className='my-[5px] w-[72px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='my-1 w-[72px] h-2 rounded-sm bg-text-quaternary'/>
             )}
             {status !== 'running' && (
               <span>{`${time?.toFixed(3)}s`}</span>
@@ -80,10 +80,10 @@ const MetaData: FC<Props> = ({
           </div>
         </div>
         <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.tokens')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+          <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.tokens')}</div>
+          <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
             {status === 'running' && (
-              <div className='my-[5px] w-[48px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='my-1 w-[48px] h-2 rounded-sm bg-text-quaternary'/>
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -92,10 +92,10 @@ const MetaData: FC<Props> = ({
         </div>
         {showSteps && (
           <div className='flex'>
-            <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
-            <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            <div className='shrink-0 w-[104px] px-2 py-1.5 text-text-tertiary system-xs-regular truncate'>{t('runLog.meta.steps')}</div>
+            <div className='grow px-2 py-1.5 text-text-secondary system-xs-regular'>
               {status === 'running' && (
-                <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+                <div className='my-1 w-[24px] h-2 rounded-sm bg-text-quaternary'/>
               )}
               {status !== 'running' && (
                 <span>{steps}</span>
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 2eeafca95d..02b2ab50ed 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -22,11 +22,11 @@ const StatusPanel: FC<ResultProps> = ({
   return (
     <div
       className={cn(
-        'px-3 py-[10px] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs',
-        status === 'running' && '!bg-primary-50',
+        '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',
       )}
     >
       <div className='flex'>