From e8517c6cdd0b8a6110c65007294f8f12867d3b59 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 5 Oct 2025 10:56:11 -0500
Subject: [PATCH] Refine lightbox styles

---
 src/photo/PhotoGrid.tsx     |  9 ++++++++-
 src/photo/PhotoLightbox.tsx | 18 ++++++------------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx
index f43dbd01..53cba1dc 100644
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@@ -17,6 +17,8 @@ export default function PhotoGrid({
   photos,
   selectedPhoto,
   prioritizeInitialPhotos,
+  className,
+  classNamePhoto,
   animate = true,
   canStart,
   animateOnFirstLoadOnly,
@@ -31,6 +33,8 @@ export default function PhotoGrid({
   photos: Photo[]
   selectedPhoto?: Photo
   prioritizeInitialPhotos?: boolean
+  className?: string
+  classNamePhoto?: string
   animate?: boolean
   canStart?: boolean
   animateOnFirstLoadOnly?: boolean
@@ -52,7 +56,9 @@ export default function PhotoGrid({
   } = useSelectPhotosState();
 
   return (
-    <div {...{ [DATA_KEY_PHOTO_GRID]: selectable }}>
+    <div
+      {...{ [DATA_KEY_PHOTO_GRID]: selectable, className }}
+    >
       <AnimateItems
         className={clsx(
           'grid',
@@ -91,6 +97,7 @@ export default function PhotoGrid({
                 'flex w-full h-full',
                 // Prevent photo navigation when selecting
                 isSelectingPhotos && 'pointer-events-none',
+                classNamePhoto,
               )}
               {...{
                 photo,
diff --git a/src/photo/PhotoLightbox.tsx b/src/photo/PhotoLightbox.tsx
index 7d1df054..9ef5f7d7 100644
--- a/src/photo/PhotoLightbox.tsx
+++ b/src/photo/PhotoLightbox.tsx
@@ -1,11 +1,8 @@
-'use client';
-
 import { clsx } from 'clsx/lite';
 import { Photo } from '.';
 import { PhotoSetCategory } from '../category';
 import PhotoGrid from './PhotoGrid';
 import Link from 'next/link';
-import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoLightbox({
   count,
@@ -18,9 +15,7 @@ export default function PhotoLightbox({
   photos: Photo[]
   maxPhotosToShow?: number
   moreLink: string
-} & PhotoSetCategory) {
-  const { utility } = useAppText();
-  
+} & PhotoSetCategory) {  
   const photoCountToShow = maxPhotosToShow < count
     ? maxPhotosToShow - 1
     : maxPhotosToShow;
@@ -31,7 +26,7 @@ export default function PhotoLightbox({
 
   return (
     <div className={clsx(
-      'border-main p-1.5 lg:p-2 rounded-md',
+      'border-main p-1 rounded-md',
       'bg-gray-50 dark:bg-gray-950',
     )}>
       <PhotoGrid
@@ -43,15 +38,14 @@ export default function PhotoLightbox({
             href={moreLink}
             className={clsx(
               'flex flex-col items-center justify-center',
-              'gap-0.5 lg:gap-1',
+              'gap-0.5',
+              'text-[1.1rem] lg:text-[1.25rem]',
             )}
           >
-            <div className="text-[1.1rem] lg:text-[1.5rem]">
-              +{countNotShown}
-            </div>
-            <div className="text-dim">{utility.more}</div>
+            +{countNotShown}
           </Link>
           : undefined}
+        classNamePhoto="rounded-sm overflow-hidden border-main"
         selectable={false}
         small
       />