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

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