From 11925a42b05cbba7549d020057c695a7c86ad5f3 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 18:21:44 +0200
Subject: [PATCH] style: make trash icon red in delete confirmation

Change from CompactButton to regular button with explicit red color
styling so the trash icon inherits the red color (rgb(220 38 38))
---
 src/components/HighlightItem.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 0e6f880d..8a604b26 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -545,17 +545,27 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
             {showDeleteConfirm && canDelete && (
               <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginRight: '0.5rem' }}>
                 <span style={{ fontSize: '0.875rem', color: 'rgb(220 38 38)', fontWeight: 500 }}>Confirm?</span>
-                <CompactButton
-                  icon={faTrash}
+                <button
                   onClick={handleConfirmDeleteClick}
-                  title="Confirm deletion"
                   disabled={isDeleting}
+                  title="Confirm deletion"
                   style={{ 
                     color: 'rgb(220 38 38)',
                     background: 'rgba(220, 38, 38, 0.1)',
-                    borderColor: 'rgb(220 38 38)'
+                    border: '1px solid rgb(220 38 38)',
+                    borderRadius: '4px',
+                    padding: '0.375rem',
+                    cursor: isDeleting ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minWidth: '33px',
+                    minHeight: '33px',
+                    transition: 'all 0.2s'
                   }}
-                />
+                >
+                  <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                </button>
               </div>
             )}