From 600c29db8a75fa44e72da55bc5288908de614d9d Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Wed, 20 May 2026 17:23:20 +0200
Subject: [PATCH] fix(lightbox): fill the heart icon when liked (#538
 follow-up)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@Tietge86 spotted that both branches of the heart-icon className were
`text-white` — the conditional was a no-op, the `fill-current` class
that would actually fill the icon was missing entirely. The button
background was turning red on like, but the heart icon stayed as a
white outline against the red, making it nearly invisible.

Move text-white outside the conditional (always white against the
red/dark backgrounds the button uses), and add fill-current to the
liked branch so the heart fills in.

Same shape as bug 2 of the original report — the like state needed to
be visually unambiguous. PhotoLikes.tsx was already fixed in this PR;
this catches the equivalent latent bug in the inline lightbox toolbar
button.

Also: bug 4 of the original report (recovery flow) turned out to be
SMTP misconfig on the reporter's end (mailhog silently dropping
emails), not a PicPeak bug. Confirmed in this thread; no further
backend changes needed.

Refs: #538
---
 frontend/src/components/gallery/PhotoLightbox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/gallery/PhotoLightbox.tsx b/frontend/src/components/gallery/PhotoLightbox.tsx
index f8c4cf66..41330f47 100644
--- a/frontend/src/components/gallery/PhotoLightbox.tsx
+++ b/frontend/src/components/gallery/PhotoLightbox.tsx
@@ -662,7 +662,11 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
                   aria-label={myLiked ? 'Unlike photo' : 'Like photo'}
                   title={myLiked ? 'Unlike' : 'Like'}
                 >
-                  <Heart className={`w-5 h-5 ${myLiked ? 'text-white' : 'text-white'}`} />
+                  {/* fill-current on the liked state so the heart is
+                      actually visible against the red background — both
+                      branches were `text-white` only (#538 follow-on
+                      bug from @Tietge86). */}
+                  <Heart className={`w-5 h-5 text-white ${myLiked ? 'fill-current' : ''}`} />
                 </button>
                 {/* Aggregate like count is admin-only when the admin
                     has hidden feedback from guests (#538 bug 3). Without