From 98aea05ad26c9d2dcc034d61439f3e91d94065b3 Mon Sep 17 00:00:00 2001
From: GuanMu <ballmanjq@gmail.com>
Date: Thu, 31 Jul 2025 21:19:34 +0800
Subject: [PATCH] Fix: Update the background color and hover effect of
 secondary buttons (#23186)

---
 .../workflow-header/features-trigger.tsx      | 11 +++++-
 .../workflow/header/chat-variable-button.tsx  | 12 +++++-
 .../components/workflow/header/env-button.tsx | 12 +++++-
 .../workflow/header/header-in-restoring.tsx   | 39 ++++++++++++-------
 .../workflow/header/run-and-history.tsx       | 29 ++++++++------
 .../header/version-history-button.tsx         | 20 ++++++----
 web/themes/manual-dark.css                    |  4 +-
 web/themes/manual-light.css                   |  4 +-
 8 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index fd4893514..c7455f1b1 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -27,9 +27,12 @@ import { useInvalidateAppWorkflow, usePublishWorkflow, useResetWorkflowVersionHi
 import type { PublishWorkflowParams } from '@/types/workflow'
 import { fetchAppDetail } from '@/service/apps'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const FeaturesTrigger = () => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const appID = appDetail?.id
@@ -121,7 +124,13 @@ const FeaturesTrigger = () => {
 
   return (
     <>
-      <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
+      <Button
+        className={cn(
+          'text-components-button-secondary-text',
+          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        )}
+        onClick={handleShowFeatures}
+      >
         <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
         {t('workflow.common.features')}
       </Button>
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index b816e44d2..36c4a640c 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -2,8 +2,11 @@ import { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
+  const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
@@ -15,7 +18,14 @@ const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+    >
       <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index e3196ee66..48bb1da4a 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -2,8 +2,11 @@ import { memo } from 'react'
 import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
+  const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
@@ -15,7 +18,14 @@ const EnvButton = ({ disabled }: { disabled: boolean }) => {
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+    >
       <Env className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index afa4e6209..da436336e 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -19,6 +19,8 @@ import RestoringTitle from './restoring-title'
 import Button from '@/app/components/base/button'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
@@ -27,6 +29,7 @@ const HeaderInRestoring = ({
   onRestoreSettled,
 }: HeaderInRestoringProps) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore.getState().appDetail
 
@@ -78,21 +81,27 @@ const HeaderInRestoring = ({
       <div>
         <RestoringTitle />
       </div>
-      <div className='flex items-center justify-end gap-x-2'>
-        <Button
-          onClick={handleRestore}
-          disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
-          variant='primary'
-        >
-          {t('workflow.common.restore')}
-        </Button>
-        <Button
-          className='text-components-button-secondary-accent-text'
-          onClick={handleCancelRestore}
-        >
-          <div className='flex items-center gap-x-0.5'>
-            <RiHistoryLine className='h-4 w-4' />
-            <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+      <div className=' flex items-center justify-end gap-x-2'>
+          <Button
+            onClick={handleRestore}
+            disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
+            variant='primary'
+            className={cn(
+              theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            )}
+          >
+            {t('workflow.common.restore')}
+          </Button>
+          <Button
+            onClick={handleCancelRestore}
+            className={cn(
+              'text-components-button-secondary-accent-text',
+              theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            )}
+          >
+            <div className='flex items-center gap-x-0.5'>
+              <RiHistoryLine className='h-4 w-4' />
+              <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
           </div>
         </Button>
       </div>
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 225e2805a..bf10e2a3c 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+import useTheme from '@/hooks/use-theme'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
@@ -102,21 +103,27 @@ const PreviewMode = memo(() => {
 PreviewMode.displayName = 'PreviewMode'
 
 const RunAndHistory: FC = () => {
+  const { theme } = useTheme()
   const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
 
   return (
-    <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
-      {
-        !isChatMode && <RunMode />
-      }
-      {
-        isChatMode && <PreviewMode />
-      }
-      <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
-      <ViewHistory />
-      <Checklist disabled={nodesReadOnly} />
-    </div>
+    <>
+      <div className={cn(
+        'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}>
+        {
+          !isChatMode && <RunMode />
+        }
+        {
+          isChatMode && <PreviewMode />
+        }
+        <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
+        <ViewHistory />
+        <Checklist disabled={nodesReadOnly} />
+      </div>
+    </>
   )
 }
 
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 5a842055a..0dee845b5 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -5,6 +5,8 @@ import { useKeyPress } from 'ahooks'
 import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import { getKeyboardKeyCodeBySystem } from '../utils'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
@@ -38,6 +40,7 @@ PopupContent.displayName = 'PopupContent'
 const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
   onClick,
 }) => {
+  const { theme } = useTheme()
   const handleViewVersionHistory = useCallback(async () => {
     await onClick?.()
   }, [onClick])
@@ -46,7 +49,7 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
     e.preventDefault()
     handleViewVersionHistory()
   },
-  { exactMatch: true, useCapture: true })
+    { exactMatch: true, useCapture: true })
 
   return <Tooltip
     popupContent={<PopupContent />}
@@ -54,12 +57,15 @@ const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
     popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
     shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
   >
-    <Button
-      className={'p-2'}
-      onClick={handleViewVersionHistory}
-    >
-      <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
-    </Button>
+      <Button
+        className={cn(
+          'p-2',
+          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        )}
+        onClick={handleViewVersionHistory}
+      >
+        <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
+      </Button>
   </Tooltip>
 }
 
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 316fd7573..fc9a64420 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -53,8 +53,8 @@ html[data-theme="dark"] {
     --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
     --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
     --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-            rgba(24, 24, 27, 0.08) 0%,
-            rgba(0, 0, 0, 0) 100%);
+            rgba(29, 29, 32, 0.9) 0%,
+            rgba(29, 29, 32, 0.08) 100%);
     --color-line-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
     --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
     --color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 1198ab839..bb17e0940 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -53,8 +53,8 @@ html[data-theme="light"] {
     --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
     --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
     --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-            rgba(200, 206, 218, 0.2) 0%,
-            rgba(255, 255, 255, 0) 100%);
+            rgba(242, 244, 247, 0.9) 0%,
+            rgba(242, 244, 247, 0.05) 100%);
     --color-line-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
     --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
     --color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);