From 2a2a19fec7d74c3017466d452ae772ce4a7fc033 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Fri, 26 Jul 2024 07:30:10 +0000
Subject: [PATCH] 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   | 8 ++++++++
 .../src/modules/peek-view/view/image-preview/index.tsx    | 1 +
 2 files changed, 9 insertions(+)

diff --git a/packages/frontend/component/src/ui/button/button.css.ts b/packages/frontend/component/src/ui/button/button.css.ts
index b914ee4803..72c0a0859a 100644
--- a/packages/frontend/component/src/ui/button/button.css.ts
+++ b/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'),
+    },
   },
 });
diff --git a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx b/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
index 8a7c6959e8..5b87cea48b 100644
--- a/packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx
+++ b/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 />}