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

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>