diff --git a/src/components/pages/gallery/PreviewCard.tsx b/src/components/pages/gallery/PreviewCard.tsx index dba14b273..d7b814d54 100644 --- a/src/components/pages/gallery/PreviewCard.tsx +++ b/src/components/pages/gallery/PreviewCard.tsx @@ -8,10 +8,11 @@ import { GalleryContext } from 'pages/gallery'; import { GAP_BTW_TILES, IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery'; import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery'; import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager'; -import LivePhotoIndicatorOverlay from '@mui/icons-material/LightMode'; +import LivePhotoIcon from '@mui/icons-material/LightMode'; import { isLivePhoto } from 'utils/file'; import { DeduplicateContext } from 'pages/deduplicate'; import { logError } from 'utils/sentry'; +import { Overlay } from 'components/Container'; interface IProps { file: EnteFile; @@ -146,6 +147,12 @@ export const SelectedOverlay = styled('div')<{ selected: boolean }>` border-radius: 4px; `; +export const LivePhotoIndicatorOverlay = styled(Overlay)` + display: flex; + justify-content: flex-end; + padding: 8px; +`; + const Cont = styled('div')<{ disabled: boolean }>` background: #222; display: flex; @@ -311,7 +318,7 @@ export default function PreviewCard(props: IProps) { - {isLivePhoto(file) && } + {isLivePhoto(file) && } {deduplicateContext.isOnDeduplicatePage && (

{file.metadata.title}

@@ -325,3 +332,11 @@ export default function PreviewCard(props: IProps) { ); } + +function LivePhotoIndicator() { + return ( + + + + ); +}