From d2d62c6612a540cf5280f41faff557686ee2574f Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 8 Sep 2026 12:12:47 +0700
Subject: [PATCH] Sit library watermark at photo corner; white icons distinct
 from amber text

---
 src/components/Viewfinder.tsx | 13 +++++++++----
 src/utils/exportEngine.ts     |  6 ++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/Viewfinder.tsx b/src/components/Viewfinder.tsx
index 1fa6c53..15f705a 100644
--- a/src/components/Viewfinder.tsx
+++ b/src/components/Viewfinder.tsx
@@ -528,8 +528,13 @@ export default function Viewfinder({
       mode === 'library' && imageFitRect
         ? imageFitRect
         : { dx: 0, dy: 0, dw: vw, dh: vh };
+    const iconSize = Math.round(vw * 0.032); // matches customFont/iconFont size
     const padBottom =
-      selectedFrame === 'polaroid' ? area.dh * 0.18 + 24 : Math.min(150, area.dh * 0.2);
+      selectedFrame === 'polaroid'
+        ? area.dh * 0.18 + 24 // polaroid deck below the photo
+        : mode === 'camera'
+          ? Math.min(150, area.dh * 0.2) // keep clear of the bottom shutter deck
+          : Math.round(iconSize * 1.5); // library: sit at the photo corner
     const yOffset =
       mode === 'library'
         ? Math.min(area.dy + area.dh - padBottom, vh - 190) // never under the deck
@@ -537,16 +542,16 @@ export default function Viewfinder({
     const xOffset =
       area.dx + (selectedFrame === 'polaroid' ? area.dw * 0.08 : Math.min(16, area.dw * 0.04));
     // One clear space (0.6em ≈ a mono space) between each icon and its text.
-    const iconSize = Math.round(vw * 0.032); // matches customFont/iconFont size
     const gap = (w: number) => Math.round(Math.max(w, iconSize) + iconSize * 0.6);
     const pinW = iconFont.measureText('📍');
     const camW = iconFont.measureText('📷');
 
     return (
       <Group>
-        <SkiaText x={xOffset} y={yOffset - 16} text="📍" font={iconFont} color="#f59e0b" />
+        {/* Icons white so they read as glyphs, not part of the amber text */}
+        <SkiaText x={xOffset} y={yOffset - 16} text="📍" font={iconFont} color="#ffffff" />
         <SkiaText x={xOffset + gap(pinW.width)} y={yOffset - 16} text={locationName} font={customFont} color="#f59e0b" />
-        <SkiaText x={xOffset} y={yOffset} text="📷" font={iconFont} color="#f59e0b" />
+        <SkiaText x={xOffset} y={yOffset} text="📷" font={iconFont} color="#ffffff" />
         <SkiaText x={xOffset + gap(camW.width)} y={yOffset} text={timestampStr} font={customFont} color="#f59e0b" />
       </Group>
     );
diff --git a/src/utils/exportEngine.ts b/src/utils/exportEngine.ts
index 4d3de0b..5b71905 100644
--- a/src/utils/exportEngine.ts
+++ b/src/utils/exportEngine.ts
@@ -277,6 +277,8 @@ export async function processAndExportPhoto(
         const iconFont = Skia.Font(iconTypeface, fontSize);
         const textPaint = Skia.Paint();
         textPaint.setColor(Skia.Color('#f59e0b')); // Amber 500
+        const iconPaint = Skia.Paint();
+        iconPaint.setColor(Skia.Color('#ffffff')); // icons white, distinct from text
 
         const locationName = gpsInfo.locality || 'STREET VIEW';
         const d = new Date(gpsInfo.timestamp);
@@ -287,9 +289,9 @@ export async function processAndExportPhoto(
         const xOffset = frameId === 'polaroid' ? width * 0.08 : fontSize * 1.2;
         const gap = Math.round(fontSize * 1.6); // icon box (~1em) + one clear mono space (~0.6em)
 
-        canvas.drawText('📍', xOffset, yOffset - fontSize * 1.4, textPaint, iconFont);
+        canvas.drawText('📍', xOffset, yOffset - fontSize * 1.4, iconPaint, iconFont);
         canvas.drawText(locationName, xOffset + gap, yOffset - fontSize * 1.4, textPaint, font);
-        canvas.drawText('📷', xOffset, yOffset, textPaint, iconFont);
+        canvas.drawText('📷', xOffset, yOffset, iconPaint, iconFont);
         canvas.drawText(timestampStr, xOffset + gap, yOffset, textPaint, font);
       }
     }