diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx index f6229ac003..858d54bf62 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx @@ -41,6 +41,7 @@ import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined"; import PhotoOutlinedIcon from "@mui/icons-material/PhotoOutlined"; import TextSnippetOutlinedIcon from "@mui/icons-material/TextSnippetOutlined"; import VideocamOutlinedIcon from "@mui/icons-material/VideocamOutlined"; +import FaceRetouchingNaturalIcon from '@mui/icons-material/FaceRetouchingNatural'; import { Box, CircularProgress, @@ -273,7 +274,8 @@ export const FileInfo: React.FC = ({ } /> {isMLEnabled() && annotatedFaces.length > 0 && ( - }> + }> + {/*t("UNIDENTIFIED_FACES") TODO-Cluster remove */} = ({ file, annotatedFaceIDs, onSelectFace, -}) => { - if (annotatedFaceIDs.length == 0) return <>; +}) => ( + + {annotatedFaceIDs.map((annotatedFaceID) => ( + onSelectFace(annotatedFaceID)} + > + + + ))} + +); - return ( - <> - - {t("people")} - {/*t("UNIDENTIFIED_FACES") TODO-Cluster remove */} - - - {annotatedFaceIDs.map((annotatedFaceID) => ( - onSelectFace(annotatedFaceID)} - > - - - ))} - - - ); -}; - -const FileFaceList = styled("div")` +const FilePeopleList_ = styled("div")` display: flex; flex-wrap: wrap; - justify-content: center; - align-items: center; - gap: 5px; - margin: 5px; + gap: 8px; + margin-block-end: 5px; `; const AnnotatedFaceButton = styled(UnstyledButton)( ({ theme }) => ` - width: 79px; - height: 79px; + width: 64px; + height: 64px; border-radius: 50%; overflow: hidden; & > img { @@ -162,7 +149,7 @@ export const SuggestionFaceList: React.FC = ({ {faces.map(({ file, faceID }) => (