Refine lightbox styles

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,

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,
@@ -19,8 +16,6 @@ export default function PhotoLightbox({
   maxPhotosToShow?: number
   moreLink: string
 } & PhotoSetCategory) {  
-  const { utility } = useAppText();
-  
   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>
           </Link>
           : undefined}
+        classNamePhoto="rounded-sm overflow-hidden border-main"
         selectable={false}
         small
       />