marc/luna-recipes
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: heart button - bigger tap target, stopPropagation, scale animation on tap

Browse Source
This commit is contained in:
clawd
2026-02-18 10:50:45 +00:00
parent 4d34e8304d
commit 931e2a3c1d
4 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/recipe/RecipeCard.tsx
View File

@@ -43,11 +43,11 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
</span>
)}
<button
onClick={(e) => { e.preventDefault(); favMutation.mutate() }}
className="ml-auto"
onClick={(e) => { e.preventDefault(); e.stopPropagation(); favMutation.mutate() }}
className="ml-auto p-2 -mr-2 min-w-[44px] min-h-[44px] flex items-center justify-center active:scale-125 transition-transform"
>
<Heart
size={20}
size={22}
className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-warm-grey'}
/>
</button>

4
frontend/src/pages/RecipePage.tsx
View File

@@ -126,8 +126,8 @@ export function RecipePage() {
<Link to={`/recipe/${recipe.slug}/edit`} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
<Pencil size={20} className="text-espresso" />
</Link>
<button onClick={() => favMutation.mutate()} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center">
<Heart size={20} className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-espresso'} />
<button onClick={() => favMutation.mutate()} className="bg-surface/80 backdrop-blur-sm rounded-full p-2 min-w-[44px] min-h-[44px] flex items-center justify-center active:scale-125 transition-transform">
<Heart size={22} className={recipe.is_favorite ? 'fill-primary text-primary' : 'text-espresso'} />
</button>
</div>
</div>