From 3949b7f3d53585ee56d886e300c3183c211cf452 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Fri, 17 Apr 2026 13:38:02 +0300
Subject: [PATCH] fix: make palette selector buttons clickable with
 hover/active states

- Added cursor-pointer class
- Added hover:scale-105 and active:scale-95 animations
- Added focus ring for keyboard navigation
- Fixed text color contrast on selected button
---
 frontend/app/color-preview/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/color-preview/page.tsx b/frontend/app/color-preview/page.tsx
index b937fb15..7552806e 100644
--- a/frontend/app/color-preview/page.tsx
+++ b/frontend/app/color-preview/page.tsx
@@ -93,11 +93,11 @@ export default function ColorPreview() {
             <button
               key={key}
               onClick={() => setSelected(key as keyof typeof palettes)}
-              className="p-4 rounded-lg transition-all"
+              className="p-4 rounded-lg transition-all cursor-pointer hover:scale-105 active:scale-95 focus:outline-none focus:ring-2"
               style={{
                 backgroundColor: selected === key ? p.colors.primary : p.colors.surface,
                 border: `2px solid ${selected === key ? p.colors.foreground : p.colors.muted}`,
-                color: selected === key ? palette.colors.foreground : p.colors.secondary,
+                color: selected === key ? p.colors.background : p.colors.secondary,
               }}
             >
               <div className="font-bold text-sm">{p.name}</div>