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

BIN
backend/data/recipes.db-shm
View File

Binary file not shown.

BIN
backend/data/recipes.db-wal
View File

Binary file not shown.

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

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