From b0c27b8ab9b1ac938a24d4e51e4ae424f96a15f5 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Fri, 13 Mar 2026 11:51:34 +0100
Subject: [PATCH] Add red hover effect to destructive buttons

ConfirmButton now shows hover:text-hover-destructive in its default
state. Source manager delete buttons and Clear All get matching
destructive hover styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/source-manager.tsx    | 9 +++++++--
 apps/web/src/components/ui/confirm-button.tsx | 5 +++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/source-manager.tsx b/apps/web/src/components/source-manager.tsx
index 0e3f1f1..34edb29 100644
--- a/apps/web/src/components/source-manager.tsx
+++ b/apps/web/src/components/source-manager.tsx
@@ -47,7 +47,12 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 				<span className="text-sm font-semibold text-foreground">
 					Cached Sources
 				</span>
-				<Button size="sm" variant="outline" onClick={handleClearAll}>
+				<Button
+					size="sm"
+					variant="outline"
+					className="hover:text-hover-destructive hover:border-hover-destructive"
+					onClick={handleClearAll}
+				>
 					<Trash2 className="mr-1 h-3 w-3" />
 					Clear All
 				</Button>
@@ -69,7 +74,7 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 						<button
 							type="button"
 							onClick={() => handleClearSource(source.sourceCode)}
-							className="text-muted-foreground hover:text-hover-danger"
+							className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-hover-destructive-bg hover:text-hover-destructive"
 						>
 							<Trash2 className="h-3.5 w-3.5" />
 						</button>
diff --git a/apps/web/src/components/ui/confirm-button.tsx b/apps/web/src/components/ui/confirm-button.tsx
index 0bb47b5..446adef 100644
--- a/apps/web/src/components/ui/confirm-button.tsx
+++ b/apps/web/src/components/ui/confirm-button.tsx
@@ -97,8 +97,9 @@ export function ConfirmButton({
 				size="icon"
 				className={cn(
 					className,
-					isConfirming &&
-						"bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground",
+					isConfirming
+						? "bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground"
+						: "hover:text-hover-destructive",
 				)}
 				onClick={handleClick}
 				onKeyDown={handleKeyDown}