Merge branch 'main' into admin-info

src/admin/AdminUploadsTable.tsx

@@ -49,7 +49,7 @@ export default function AdminUploadsTable({
                   aspectRatio={3.0 / 2.0}
                   className={clsx(
                     'rounded-[3px] overflow-hidden',
-                    'border-subtle',
+                    'border-main',
                   )}
                 />
               </div>

src/components/image/useImageZoomControls.ts

@@ -21,32 +21,27 @@ export default function useImageZoomControls(
 
   useMetaThemeColor({ colorLight });
 
-  const open = useCallback(() => {
+  const open = useCallback(() =>
-    viewerRef.current?.show();
+    viewerRef.current?.show(), []);
-  }, [viewerRef]);
 
-  const close = useCallback(() => {
+  const close = useCallback(() =>
-    viewerRef.current?.hide();
+    viewerRef.current?.hide(), []);
-  }, [viewerRef]);
 
-  const zoomTo = useCallback((zoomLevel = 1) => {
+  const zoomTo = useCallback((zoomLevel = 1) =>
-    viewerRef.current?.zoomTo(zoomLevel);
+    viewerRef.current?.zoomTo(zoomLevel), []);
-  }, [viewerRef]);
 
   const reset = useCallback(() => {
     setZoomLevel(1);
     viewerRef.current?.reset();
-  }, [viewerRef]);
+  }, []);
 
   // On 'F' keydown, toggle fullscreen
   const handleKeyDown = useCallback(() => {
-    if (shouldExpandOnFKeydown) {
+    if (shouldExpandOnFKeydown) { open(); }
-      viewerRef.current?.show();
+  }, [shouldExpandOnFKeydown, open]);
-    }
-  }, [shouldExpandOnFKeydown]);
   useKeydownHandler(handleKeyDown, ['F']);
 
-  useEffect(() => {
+  const initialize = useCallback(() => {
     if (imageRef.current && isEnabled) {
       viewerRef.current = new Viewer(imageRef.current, {
         navbar: false,
@@ -61,6 +56,7 @@ export default function useImageZoomControls(
             (target as any).viewer.viewer as HTMLDivElement;
         },
         url: (image: HTMLImageElement) => {
+          // Addresses Safari bug where images don't load
           image.loading = 'eager';
           return image.src;
         },
@@ -69,9 +65,8 @@ export default function useImageZoomControls(
           setColorLight('#000');
         },
         hide: () => {
-          setTimeout(() => {
+          // Optimizes Safari status bar animation
-            setColorLight(undefined);
+          setTimeout(() => setColorLight(undefined), 300);
-          }, 300);
         },
         hidden: () => {
           setShouldRespondToKeyboardCommands?.(true);
@@ -80,20 +75,26 @@ export default function useImageZoomControls(
           setZoomLevel(ratio);
         },
       });
-
-      return () => {
-        viewerRef.current?.destroy();
-        viewerRef.current = null;
-      };
     }
   }, [
     imageRef,
     isEnabled,
-    zoomTo,
     setShouldRespondToKeyboardCommands,
   ]);
 
+  const cleanUp = useCallback(() => {
+    viewerRef.current?.destroy();
+    viewerRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    initialize();
+    return cleanUp;
+  }, [initialize, cleanUp]);
+
   return {
+    initialize,
+    cleanUp,
     open,
     close,
     reset,

src/photo/PhotoLightbox.tsx

@@ -25,7 +25,7 @@ export default function PhotoLightbox({
 
   return (
     <div className={clsx(
-      'border dark:border-gray-800 p-1.5 lg:p-2 rounded-md',
+      'border-main p-1.5 lg:p-2 rounded-md',
       'bg-gray-50 dark:bg-gray-950',
     )}>
       <PhotoGrid

src/photo/PhotoSmall.tsx

@@ -43,7 +43,7 @@ export default function PhotoSmall({
         selected && 'brightness-50',
         'min-w-[50px]',
         'rounded-[3px] overflow-hidden',
-        'border-subtle',
+        'border-main',
       )}
       prefetch={prefetch}
     >

tailwind.css

@@ -121,11 +121,8 @@
 }
 /* Border */
 @utility border-main {
-  @apply border-gray-200 dark:border-gray-700
-}
-@utility border-subtle {
   @apply
-    border border-gray-200 dark:border-gray-800
+    border border-gray-200 dark:border-gray-700
 }
 /* Background */
 @utility bg-main {
@@ -304,7 +301,7 @@
 @layer components {
   .component-surface {
     @apply
-      bg-content border border-main
+      bg-content border-main
       rounded-lg
   }
 }