diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx index a2874c4f..43b5102f 100644 --- a/src/components/DownloadButton.tsx +++ b/src/components/DownloadButton.tsx @@ -30,6 +30,7 @@ export default function DownloadButton({ downloadFileFromBrowser(photo.url, downloadFileNameForPhoto(photo)) .finally(() => setIsLoading(false)); }} + hideFocusOutline /> ); } diff --git a/src/components/primitives/LoaderButton.tsx b/src/components/primitives/LoaderButton.tsx index e909e502..1c1a264d 100644 --- a/src/components/primitives/LoaderButton.tsx +++ b/src/components/primitives/LoaderButton.tsx @@ -13,6 +13,7 @@ export default function LoaderButton(props: { confirmText?: string shouldPreventDefault?: boolean primary?: boolean + hideFocusOutline?: boolean } & ButtonHTMLAttributes) { 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} diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx index 237ba6e4..709f2152 100644 --- a/src/photo/PhotoLarge.tsx +++ b/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 && + } + onClick={open} + styleAs="link" + className="text-medium translate-y-[0.25px]" + hideFocusOutline + />} {shouldShare && } - {showZoomControls && - } - onClick={open} - styleAs="link" - className="text-medium" - />} {ALLOW_PUBLIC_DOWNLOADS && } spinnerColor="dim" styleAs="link" + hideFocusOutline /> ); }