bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: make palette selector buttons clickable with hover/active states

Browse Source 
- 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
This commit is contained in:
Daniel Bedeleanu
2026-04-17 13:38:02 +03:00
parent 95fedda61e
commit 3949b7f3d5
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/color-preview/page.tsx
View File

@@ -93,11 +93,11 @@ export default function ColorPreview() {
<button <button
key={key} key={key}
onClick={() => setSelected(key as keyof typeof palettes)} 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={{ style={{
backgroundColor: selected === key ? p.colors.primary : p.colors.surface, backgroundColor: selected === key ? p.colors.primary : p.colors.surface,
border: `2px solid ${selected === key ? p.colors.foreground : p.colors.muted}`, 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> <div className="font-bold text-sm">{p.name}</div>