style: update delete button style (#3180)

packages/component/src/components/page-list/operation-menu-items/index.css.ts

@@ -0,0 +1,12 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const moveToTrashStyle = style({
+  ':hover': {
+    backgroundColor: 'var(--affine-background-error-color)',
+    color: 'var(--affine-error-color)',
+  },
+});
+
+globalStyle(`${moveToTrashStyle}:hover svg`, {
+  color: 'var(--affine-error-color)',
+});

packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -3,8 +3,8 @@ import { DeleteTemporarilyIcon } from '@blocksuite/icons';
 
 import type { ConfirmProps } from '../../..';
 import { Confirm, MenuItem } from '../../..';
+import { moveToTrashStyle } from './index.css';
 import type { CommonMenuItemProps } from './types';
-
 export const MoveToTrash = ({
   onSelect,
   onItemClick,
@@ -21,6 +21,7 @@ export const MoveToTrash = ({
           onSelect?.();
         }}
         icon={<DeleteTemporarilyIcon />}
+        className={moveToTrashStyle}
       >
         {t['Move to Trash']()}
       </MenuItem>