[web] UI tweaks to the select all checkbox

web/apps/photos/src/components/PhotoFrame.tsx

@@ -17,16 +17,16 @@ import DownloadManager, {
     LivePhotoSourceURL,
     SourceURLs,
 } from "services/download";
-import {
-    handleSelectCreator,
-    updateFileMsrcProps,
-    updateFileSrcProps,
-} from "utils/photoFrame";
 import { EnteFile } from "types/file";
 import {
     SelectedState,
     SetFilesDownloadProgressAttributesCreator,
 } from "types/gallery";
+import {
+    handleSelectCreator,
+    updateFileMsrcProps,
+    updateFileSrcProps,
+} from "utils/photoFrame";
 import { PhotoList } from "./PhotoList";
 import { DedupePhotoList } from "./PhotoList/dedupe";
 import PreviewCard from "./pages/gallery/PreviewCard";
@@ -234,7 +234,7 @@ const PhotoFrame = ({
     const handleSelect = handleSelectCreator(
         setSelected,
         activeCollectionID,
-        setRangeStart
+        setRangeStart,
     );
 
     const onHoverOver = (index: number) => () => {

web/apps/photos/src/components/PhotoList/index.tsx

@@ -1,7 +1,8 @@
 import { FlexWrapper } from "@ente/shared/components/Container";
 import { ENTE_WEBSITE_LINK } from "@ente/shared/constants/urls";
+import { formatDate, getDate, isSameDay } from "@ente/shared/time/format";
 import { convertBytesToHumanReadable } from "@ente/shared/utils/size";
-import { Box, Link, Typography, Checkbox, styled } from "@mui/material";
+import { Box, Checkbox, Link, Typography, styled } from "@mui/material";
 import {
     DATE_CONTAINER_HEIGHT,
     GAP_BTW_TILES,
@@ -22,10 +23,9 @@ import {
     ListChildComponentProps,
     areEqual,
 } from "react-window";
-import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
-import { formatDate, getDate, isSameDay } from "@ente/shared/time/format";
-import { handleSelectCreator } from "utils/photoFrame";
 import { EnteFile } from "types/file";
+import { handleSelectCreator } from "utils/photoFrame";
+import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 
 const A_DAY = 24 * 60 * 60 * 1000;
 const FOOTER_HEIGHT = 90;
@@ -186,10 +186,6 @@ const NothingContainer = styled(ListItemContainer)`
     justify-content: center;
 `;
 
-const SelectAllCheckBoxContainer = styled(Checkbox)<{ margin: number }>`
-    margin-left: ${(props) => props.margin}px;
-`;
-
 interface Props {
     height: number;
     width: number;
@@ -723,15 +719,15 @@ export function PhotoList({
 
     useEffect(() => {
         const notSelectedFiles = displayFiles?.filter(
-            (item) => !galleryContext.selectedFile[item.id]
+            (item) => !galleryContext.selectedFile[item.id],
         );
         const unselectedDates = [
             ...new Set(notSelectedFiles?.map((item) => getDate(item))), // to get file's date which were manually unselected
         ];
 
         const localSelectedFiles = displayFiles.filter(
             // to get files which were manually selected
-            (item) => !unselectedDates.includes(getDate(item))
+            (item) => !unselectedDates.includes(getDate(item)),
         );
 
         const localSelectedDates = [
@@ -756,7 +752,7 @@ export function PhotoList({
 
     const handleSelect = handleSelectCreator(
         galleryContext.setSelectedFiles,
-        activeCollectionID
+        activeCollectionID,
     );
 
     const onChangeSelectAllCheckBox = (date: string) => {
@@ -766,13 +762,13 @@ export function PhotoList({
         setCheckedDates(dates);
 
         const filesOnADay = displayFiles?.filter(
-            (item) => getDate(item) === date
+            (item) => getDate(item) === date,
         ); // all files on a checked/unchecked day
 
         filesOnADay.forEach((file) => {
             handleSelect(
                 file.id,
-                file.ownerID === galleryContext?.user?.id
+                file.ownerID === galleryContext?.user?.id,
             )(isDateSelected);
         });
     };
@@ -787,32 +783,36 @@ export function PhotoList({
                     listItem.dates
                         .map((item) => [
                             <DateContainer key={item.date} span={item.span}>
-                                {item.date}
-                                <SelectAllCheckBoxContainer
+                                <Checkbox
                                     key={item.date}
                                     name={item.date}
                                     checked={checkedDates[item.date]}
                                     onChange={() =>
                                         onChangeSelectAllCheckBox(item.date)
                                     }
-                                    margin={columns}
+                                    size="small"
+                                    sx={{ pl: 0 }}
+                                    disableRipple={true}
                                 />
+                                {item.date}
                             </DateContainer>,
                             <div key={`${item.date}-gap`} />,
                         ])
                         .flat()
                 ) : (
                     <DateContainer span={columns}>
-                        {listItem.date}
-                        <SelectAllCheckBoxContainer
+                        <Checkbox
                             key={listItem.date}
                             name={listItem.date}
                             checked={checkedDates[listItem.date]}
                             onChange={() =>
                                 onChangeSelectAllCheckBox(listItem.date)
                             }
-                            margin={columns}
+                            size="small"
+                            sx={{ pl: 0 }}
+                            disableRipple={true}
                         />
+                        {listItem.date}
                     </DateContainer>
                 );
             case ITEM_TYPE.SIZE_AND_COUNT:

web/apps/photos/src/pages/gallery/index.tsx

@@ -1017,7 +1017,8 @@ export default function Gallery() {
                 isClipSearchResult,
                 selectedFile: selected,
                 setSelectedFiles: setSelected,
-            }}>
+            }}
+        >
             <FullScreenDropZone
                 getDragAndDropRootProps={getDragAndDropRootProps}
             >

web/apps/photos/src/utils/photoFrame/index.ts

@@ -1,7 +1,7 @@
-import { FILE_TYPE } from "constants/file";
-import { EnteFile } from "types/file";
 import { logError } from "@ente/shared/sentry";
+import { FILE_TYPE } from "constants/file";
 import { LivePhotoSourceURL, SourceURLs } from "services/download";
+import { EnteFile } from "types/file";
 import { SetSelectedState } from "types/gallery";
 
 const WAIT_FOR_VIDEO_PLAYBACK = 1 * 1000;
@@ -135,11 +135,11 @@ export const handleSelectCreator =
     (
         setSelected: SetSelectedState,
         activeCollectionID: number,
-        setRangeStart?
+        setRangeStart?,
     ) =>
     (id: number, isOwnFile: boolean, index?: number) =>
     (checked: boolean) => {
-        if (typeof index !== 'undefined') {
+        if (typeof index !== "undefined") {
             if (checked) {
                 setRangeStart(index);
             } else {

web/packages/shared/time/format.ts

@@ -90,10 +90,10 @@ export const isSameDay = (first, second) => {
 export const getDate = (item) => {
     const currentDate = item.metadata.creationTime / 1000;
     const date = isSameDay(new Date(currentDate), new Date())
-        ? t('TODAY')
+        ? t("TODAY")
         : isSameDay(new Date(currentDate), new Date(Date.now() - A_DAY))
-        ? t('YESTERDAY')
-        : formatDate(currentDate);
+          ? t("YESTERDAY")
+          : formatDate(currentDate);
 
     return date;
 };