Update zoom icon

src/components/DownloadButton.tsx

@@ -30,6 +30,7 @@ export default function DownloadButton({
         downloadFileFromBrowser(photo.url, downloadFileNameForPhoto(photo))
           .finally(() => setIsLoading(false));
       }}
+      hideFocusOutline
     />
   );
 }

src/components/primitives/LoaderButton.tsx

@@ -13,6 +13,7 @@ export default function LoaderButton(props: {
   confirmText?: string
   shouldPreventDefault?: boolean
   primary?: boolean
+  hideFocusOutline?: boolean
 } & ButtonHTMLAttributes<HTMLButtonElement>) {
   const {
     children,
@@ -24,6 +25,7 @@ export default function LoaderButton(props: {
     confirmText,
     shouldPreventDefault,
     primary,
+    hideFocusOutline,
     type = 'button',
     onClick,
     disabled,
@@ -53,6 +55,7 @@ export default function LoaderButton(props: {
         styleAs === 'link-without-hover' && 'hover:text-main',
         'inline-flex items-center gap-2 self-start whitespace-nowrap',
         primary && 'primary',
+        hideFocusOutline && 'focus:outline-none',
         className,
       )}
       disabled={isLoading || disabled}

src/photo/PhotoLarge.tsx

@@ -37,7 +37,7 @@ import useOnVisible from '@/utility/useOnVisible';
 import PhotoDate from './PhotoDate';
 import { useAppState } from '@/state/AppState';
 import useImageZoomControls from '@/components/image/useImageZoomControls';
-import { LuZoomIn } from 'react-icons/lu';
+import { LuExpand } from 'react-icons/lu';
 import LoaderButton from '@/components/primitives/LoaderButton';
 
 export default function PhotoLarge({
@@ -301,6 +301,15 @@ export default function PhotoLarge({
                   ? 'translate-x-[-2.5px]'
                   : 'md:translate-x-[-2.5px]',
               )}>
+                {showZoomControls &&
+                  <LoaderButton
+                    title="Open Image Viewer"
+                    icon={<LuExpand size={15} />}
+                    onClick={open}
+                    styleAs="link"
+                    className="text-medium translate-y-[0.25px]"
+                    hideFocusOutline
+                  />}
                 {shouldShare &&
                   <ShareButton
                     title="Share Photo"
@@ -313,14 +322,6 @@ export default function PhotoLarge({
                     focal={shouldShareFocalLength ? photo.focalLength : undefined}
                     prefetch={prefetchRelatedLinks}
                   />}
-                {showZoomControls &&
-                  <LoaderButton
-                    title="Open Image Viewer"
-                    icon={<LuZoomIn size={17} />}
-                    onClick={open}
-                    styleAs="link"
-                    className="text-medium"
-                  />}
                 {ALLOW_PUBLIC_DOWNLOADS && 
                   <DownloadButton 
                     className={clsx(

src/share/ShareButton.tsx

@@ -46,6 +46,7 @@ export default function ShareButton({
       icon={<TbPhotoShare size={16} />}
       spinnerColor="dim"
       styleAs="link"
+      hideFocusOutline
     />
   );
 }