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',