chore(component): add a danger hover style for buttons (#7600)

Like other delete buttons.

https://github.com/user-attachments/assets/85d1c3cb-bd17-4904-b671-c04c76bfd00b

packages/frontend/component/src/ui/button/button.css.ts

@@ -164,6 +164,10 @@ export const button = style({
     '&.processing.disabled:not(.without-hover):hover': {
       background: cssVar('processingColor'),
     },
+    '&.danger:hover': {
+      color: cssVar('errorColor'),
+      background: cssVar('backgroundErrorColor'),
+    },
   },
 });
 globalStyle(`${button} > span`, {
@@ -359,5 +363,9 @@ export const iconButton = style({
     '&.processing.disabled:not(.without-hover):hover': {
       background: cssVar('processingColor'),
     },
+    '&.danger:hover': {
+      color: cssVar('errorColor'),
+      background: cssVar('backgroundErrorColor'),
+    },
   },
 });

packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx

@@ -423,6 +423,7 @@ const ImagePreviewModalImpl = ({
             <>
               <div className={styles.dividerStyle}></div>
               <ButtonWithTooltip
+                className="danger"
                 data-testid="delete-button"
                 tooltip="Delete"
                 icon={<DeleteIcon />}