style: update delete button style (#3180)

apps/web/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -87,7 +87,7 @@ const CollectionOperations = ({
         element: <div key="divider" className={styles.menuDividerStyle}></div>,
       },
       {
-        icon: <DeleteIcon style={{ color: 'var(--affine-warning-color)' }} />,
+        icon: <DeleteIcon />,
         name: t['Delete'](),
         click: () => {
           return setting.deleteCollection(view.id);

apps/web/src/components/pure/workspace-slider-bar/collections/page.tsx

@@ -77,7 +77,7 @@ export const PageOperations = ({
         element: <div key="divider" className={styles.menuDividerStyle}></div>,
       },
       {
-        icon: <DeleteIcon style={{ color: 'var(--affine-warning-color)' }} />,
+        icon: <DeleteIcon />,
         name: t['Delete'](),
         click: () => {
           removeToTrash(page.id);

apps/web/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   userSelect: 'none',
@@ -36,11 +36,14 @@ export const more = style({
   },
 });
 export const deleteFolder = style({
-  color: 'var(--affine-warning-color)',
   ':hover': {
-    backgroundColor: 'var(--affine-background-warning-color)',
+    color: 'var(--affine-error-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
   },
 });
+globalStyle(`${deleteFolder}:hover svg`, {
+  color: 'var(--affine-error-color)',
+});
 export const menuDividerStyle = style({
   marginTop: '2px',
   marginBottom: '2px',

packages/component/src/components/image-preview-modal/index.css.ts

@@ -138,7 +138,7 @@ export const buttonStyle = style({
   margin: '10px 6px',
   padding: '0 0',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
     backgroundSize: '24px 24px',
   },
 });

packages/component/src/components/image-preview-modal/index.tsx

@@ -478,7 +478,7 @@ const ImagePreviewModalImpl = (
               noBorder={true}
               className={buttonStyle}
               onClick={() => blockId && deleteHandler(blockId)}
-              hoverColor={'-moz-initial'}
+              hoverColor="var(--affine-error-color)"
             />
           </Tooltip>
         </div>

packages/component/src/components/page-list/operation-cell.tsx

@@ -147,6 +147,8 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
           onClick={() => {
             setOpen(true);
           }}
+          hoverBackground="var(--affine-background-error-color)"
+          hoverColor="var(--affine-error-color)"
         >
           <DeletePermanentlyIcon />
         </IconButton>

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>

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -69,7 +69,7 @@ export const CollectionBar = ({
         },
       },
       {
-        icon: <DeleteIcon style={{ color: 'red' }} />,
+        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
         name: 'delete',
         click: () => {
           setting.deleteCollection(collection.id).catch(err => {

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -202,6 +202,7 @@ export const deleteIcon = style({
   padding: 4,
   cursor: 'pointer',
   ':hover': {
-    backgroundColor: 'var(--affine-hover-color)',
+    color: 'var(--affine-error-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
   },
 });

packages/component/src/components/page-list/view/collection-list.tsx

@@ -57,7 +57,7 @@ const CollectionOption = ({
         },
       },
       {
-        icon: <DeleteIcon style={{ color: 'red' }} />,
+        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
         name: 'delete',
         click: () => {
           setting.deleteCollection(collection.id).catch(err => {