From 13e5be229625a299859ebd413e9c6a84dd56d9a8 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 21 Sep 2024 16:11:02 -0500
Subject: [PATCH] Refine public download button layout

---
 src/components/DownloadButton.tsx |  2 -
 src/components/ShareButton.tsx    |  2 -
 src/photo/PhotoLarge.tsx          | 61 +++++++++++++++++--------------
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx
index 26cd4256..a2874c4f 100644
--- a/src/components/DownloadButton.tsx
+++ b/src/components/DownloadButton.tsx
@@ -20,8 +20,6 @@ export default function DownloadButton({
       className={clsx(
         className,
         'text-medium',
-        '-mx-0.5 translate-x-0.5',
-        'sm:mx-0 sm:translate-x-0'
       )}
       icon={<MdOutlineFileDownload size={18} />}
       spinnerColor='dim'
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
index 25875e55..bb9d5d33 100644
--- a/src/components/ShareButton.tsx
+++ b/src/components/ShareButton.tsx
@@ -21,8 +21,6 @@ export default function ShareButton({
       className={clsx(
         className,
         dim ? 'text-dim' : 'text-medium',
-        '-mx-0.5 translate-x-0.5',
-        'sm:mx-0 sm:translate-x-0',
       )}
       icon={<TbPhotoShare size={16} />}
       spinnerColor="dim"
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index fef27e9f..15fc2c29 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -236,8 +236,11 @@ export default function PhotoLarge({
                   />}
               </>}
             <div className={clsx(
-              'flex gap-x-2 gap-y-baseline',
-              'md:flex-col md:justify-normal',
+              'flex gap-x-2.5 gap-y-baseline',
+              ALLOW_PUBLIC_DOWNLOADS
+                ? 'flex-col'
+                : 'md:flex-col',
+              'md:justify-normal',
             )}>
               <PhotoDate
                 photo={photo}
@@ -247,32 +250,34 @@ export default function PhotoLarge({
                   !hasNonDateContent && isUserSignedIn && 'md:pr-7',
                 )}
               />
-              {ALLOW_PUBLIC_DOWNLOADS && 
-                <DownloadButton 
-                  className={clsx(
-                    'md:translate-x-[-2.5px]',
-                    'translate-y-[1.5px] md:translate-y-0',
-                  )}
-                  photo={photo} 
-                />}
-              {shouldShare &&
-                <ShareButton
-                  className={clsx(
-                    'md:translate-x-[-2.5px]',
-                    'translate-y-[1.5px] md:translate-y-0',
-                  )}
-                  path={pathForPhotoShare({
-                    photo,
-                    tag: shouldShareTag ? primaryTag : undefined,
-                    camera: shouldShareCamera ? camera : undefined,
-                    // eslint-disable-next-line max-len
-                    simulation: shouldShareSimulation ? photo.filmSimulation : undefined,
-                    // eslint-disable-next-line max-len
-                    focal: shouldShareFocalLength ? photo.focalLength : undefined,
-                  })}
-                  prefetch={prefetchRelatedLinks}
-                  shouldScroll={shouldScrollOnShare}
-                />}
+              <div className={clsx(
+                'flex gap-1 translate-y-[0.5px]',
+                ALLOW_PUBLIC_DOWNLOADS
+                  ? 'translate-x-[-3px]'
+                  : 'md:translate-x-[-3px]',
+              )}>
+                {shouldShare &&
+                  <ShareButton
+                    path={pathForPhotoShare({
+                      photo,
+                      tag: shouldShareTag ? primaryTag : undefined,
+                      camera: shouldShareCamera ? camera : undefined,
+                      // eslint-disable-next-line max-len
+                      simulation: shouldShareSimulation ? photo.filmSimulation : undefined,
+                      // eslint-disable-next-line max-len
+                      focal: shouldShareFocalLength ? photo.focalLength : undefined,
+                    })}
+                    prefetch={prefetchRelatedLinks}
+                    shouldScroll={shouldScrollOnShare}
+                  />}
+                {ALLOW_PUBLIC_DOWNLOADS && 
+                  <DownloadButton 
+                    className={clsx(
+                      'translate-y-[0.5px] md:translate-y-0',
+                    )}
+                    photo={photo} 
+                  />}
+              </div>
             </div>
           </div>
         </DivDebugBaselineGrid>}