Fix: Update the background color and hover effect of secondary buttons (#23186)

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>
   )

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>
   )

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>

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>
+    </>
   )
 }
 

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>
 }