From e4345350ad3d7bebce80bfb976729c0509f680dc Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Thu, 9 Apr 2026 12:17:09 +0200
Subject: [PATCH] fix(planner): RecipePicker UI polish from review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Badge font-size 8px → 9px (WCAG minimum)
- Score badge toFixed(1) to avoid misleading "+0 Punkte"
- Self-contain @keyframes pulse in component <style> block
- Wählen buttons use var(--green-dark) per design system

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/planner/RecipePicker.svelte | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/planner/RecipePicker.svelte b/frontend/src/lib/planner/RecipePicker.svelte
index 41544f2..1488b2e 100644
--- a/frontend/src/lib/planner/RecipePicker.svelte
+++ b/frontend/src/lib/planner/RecipePicker.svelte
@@ -108,15 +108,15 @@
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
 							data-type="good"
-							style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
+							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--green-tint); color: var(--green-dark);"
 						>
-							↑ +{(suggestion.scoreDelta ?? 0).toFixed(0)} Punkte
+							↑ +{(suggestion.scoreDelta ?? 0).toFixed(1)} Punkte
 						</span>
 					{:else}
 						<span
 							data-testid="badge-{suggestion.recipe.id}"
 							data-type="warning"
-							style="display: inline-block; margin-top: 3px; font-size: 8px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
+							style="display: inline-block; margin-top: 3px; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: var(--yellow-tint); color: var(--yellow-text);"
 						>
 							⚠ Variationskonflikt
 						</span>
@@ -126,7 +126,7 @@
 					type="button"
 					aria-label="Wählen"
 					onclick={() => onpick(suggestion.recipe.id, suggestion.recipe.name)}
-					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green); color: #fff; border: none; cursor: pointer;"
+					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
 				>
 					+ Wählen
 				</button>
@@ -167,7 +167,7 @@
 					type="button"
 					aria-label="Wählen"
 					onclick={() => onpick(recipe.id, recipe.name)}
-					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green); color: #fff; border: none; cursor: pointer;"
+					style="flex-shrink: 0; font-family: var(--font-sans); font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-md); background: var(--green-dark); color: #fff; border: none; cursor: pointer;"
 				>
 					+ Wählen
 				</button>
@@ -175,3 +175,10 @@
 		{/each}
 	{/if}
 </div>
+
+<style>
+	@keyframes pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.4; }
+	}
+</style>