diff --git a/src/components/Collections/AllCollections/CollectionCard.tsx b/src/components/Collections/AllCollections/CollectionCard.tsx
index 760306341..b9b778191 100644
--- a/src/components/Collections/AllCollections/CollectionCard.tsx
+++ b/src/components/Collections/AllCollections/CollectionCard.tsx
@@ -1,29 +1,29 @@
-import { Box } from '@mui/material';
+import { Typography } from '@mui/material';
import constants from 'utils/strings/constants';
import React from 'react';
import CollectionCard from '../CollectionCard';
import { CollectionSummary } from 'types/collection';
-import { AllCollectionTileText } from '../styledComponents';
+import { AllCollectionTile, AllCollectionTileText } from '../styledComponents';
interface Iprops {
- collectionTile: any;
collectionSummary: CollectionSummary;
onCollectionClick: (collectionID: number) => void;
}
export default function AllCollectionCard({
- collectionTile,
onCollectionClick,
collectionSummary,
}: Iprops) {
return (
onCollectionClick(collectionSummary.id)}>
- {collectionSummary.name}
- {constants.PHOTO_COUNT(collectionSummary.fileCount)}
+ {collectionSummary.name}
+
+ {constants.PHOTO_COUNT(collectionSummary.fileCount)}
+
);
diff --git a/src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx b/src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx
deleted file mode 100644
index b8bf2c753..000000000
--- a/src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { EnteFile } from 'types/file';
-import {
- CollectionTileWrapper,
- ActiveIndicator,
- CollectionBarTile,
- CollectionBarTileText,
-} from '../styledComponents';
-import CollectionCard from '../CollectionCard';
-import TruncateText from 'components/TruncateText';
-
-interface Iprops {
- active: boolean;
- latestFile: EnteFile;
- collectionName: string;
- onClick: () => void;
-}
-
-const CollectionCardWithActiveIndicator = React.forwardRef(
- (props: Iprops, ref: any) => {
- const { active, collectionName, ...others } = props;
-
- return (
-
-
-
-
-
-
- {active && }
-
- );
- }
-);
-
-export default CollectionCardWithActiveIndicator;
diff --git a/src/components/Collections/CollectionListBar/CollectionCard.tsx b/src/components/Collections/CollectionListBar/CollectionCard.tsx
new file mode 100644
index 000000000..48984d2cc
--- /dev/null
+++ b/src/components/Collections/CollectionListBar/CollectionCard.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { EnteFile } from 'types/file';
+import {
+ ActiveIndicator,
+ CollectionBarTile,
+ CollectionBarTileText,
+} from '../styledComponents';
+import CollectionCard from '../CollectionCard';
+import TruncateText from 'components/TruncateText';
+import { Box } from '@mui/material';
+
+interface Iprops {
+ active: boolean;
+ latestFile: EnteFile;
+ collectionName: string;
+ onClick: () => void;
+}
+
+const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
+ const { active, collectionName, ...others } = props;
+
+ return (
+
+
+
+
+
+
+ {active && }
+
+ );
+});
+
+export default CollectionListBarCard;
diff --git a/src/components/Collections/CollectionBar/CreateCollectionTile.tsx b/src/components/Collections/CollectionListBar/CreateCollectionTile.tsx
similarity index 100%
rename from src/components/Collections/CollectionBar/CreateCollectionTile.tsx
rename to src/components/Collections/CollectionListBar/CreateCollectionTile.tsx
diff --git a/src/components/Collections/CollectionBar/ScrollButton.tsx b/src/components/Collections/CollectionListBar/ScrollButton.tsx
similarity index 95%
rename from src/components/Collections/CollectionBar/ScrollButton.tsx
rename to src/components/Collections/CollectionListBar/ScrollButton.tsx
index 20aed9d0e..3bdac2135 100644
--- a/src/components/Collections/CollectionBar/ScrollButton.tsx
+++ b/src/components/Collections/CollectionListBar/ScrollButton.tsx
@@ -15,7 +15,7 @@ const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
border-radius: 50%;
background-color: ${({ theme }) => theme.palette.background.paper};
- color: ${({ theme }) => theme.palette.text.primary};
+ color: ${({ theme }) => theme.palette.primary.main};
${(props) =>
props.direction === SCROLL_DIRECTION.LEFT
diff --git a/src/components/Collections/CollectionBar/index.tsx b/src/components/Collections/CollectionListBar/index.tsx
similarity index 93%
rename from src/components/Collections/CollectionBar/index.tsx
rename to src/components/Collections/CollectionListBar/index.tsx
index e90805d4b..3a3d3d759 100644
--- a/src/components/Collections/CollectionBar/index.tsx
+++ b/src/components/Collections/CollectionListBar/index.tsx
@@ -1,4 +1,4 @@
-import ScrollButton from 'components/Collections/CollectionBar/ScrollButton';
+import ScrollButton from 'components/Collections/CollectionListBar/ScrollButton';
import React, { useEffect, useMemo } from 'react';
import { CollectionSummaries } from 'types/collection';
import constants from 'utils/strings/constants';
@@ -9,7 +9,7 @@ import {
ScrollContainer,
CollectionListWrapper,
} from 'components/Collections/styledComponents';
-import CollectionCardWithActiveIndicator from 'components/Collections/CollectionBar/CollectionCardWithActiveIndicator';
+import CollectionListBarCard from 'components/Collections/CollectionListBar/CollectionCard';
import useComponentScroll, { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
import useWindowSize from 'hooks/useWindowSize';
import LinkButton from 'components/pages/gallery/LinkButton';
@@ -92,7 +92,7 @@ export default function CollectionListBar(props: IProps) {
)}
{sortedCollectionSummary.map((item) => (
- void;
+ open: boolean;
+ onClose: () => void;
collection: Collection;
}
function CollectionShare(props: Props) {
const { isMobile } = useContext(AppContext);
const handleClose = dialogCloseHandler({
- onClose: props.onHide,
+ onClose: props.onClose,
});
if (!props.collection) {
@@ -30,7 +30,7 @@ function CollectionShare(props: Props) {
return (
<>
diff --git a/src/components/Collections/index.tsx b/src/components/Collections/index.tsx
index e361a73f5..79b346469 100644
--- a/src/components/Collections/index.tsx
+++ b/src/components/Collections/index.tsx
@@ -1,5 +1,5 @@
import { Collection, CollectionSummaries } from 'types/collection';
-import CollectionListBar from 'components/Collections/CollectionBar';
+import CollectionListBar from 'components/Collections/CollectionListBar';
import React, { useEffect, useRef, useState } from 'react';
import AllCollections from 'components/Collections/AllCollections';
import CollectionInfoWithOptions from 'components/Collections/CollectionInfoWithOptions';
@@ -79,25 +79,29 @@ export default function Collections(props: Iprops) {
return <>>;
}
+ const closeAllCollections = () => setAllCollectionView(false);
+ const openAllCollections = () => setAllCollectionView(true);
+ const closeCollectionShare = () => setCollectionShareModalView(false);
+
return (
<>
setAllCollectionView(true)}
+ showAllCollections={openAllCollections}
/>
setAllCollectionView(false)}
+ onClose={closeAllCollections}
collectionSummaries={collectionSummaries}
setActiveCollection={setActiveCollectionID}
/>
setCollectionShareModalView(false)}
+ open={collectionShareModalView}
+ onClose={closeCollectionShare}
collection={activeCollection.current}
/>
>
diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts
index e986b9d8d..2220817ad 100644
--- a/src/components/Collections/styledComponents.ts
+++ b/src/components/Collections/styledComponents.ts
@@ -27,6 +27,9 @@ export const ScrollContainer = styled('div')`
overflow: auto;
scroll-behavior: smooth;
display: flex;
+ & > *:not(:last-child) {
+ margin-right: 4px;
+ }
`;
export const CollectionTile = styled('div')`
@@ -44,13 +47,9 @@ export const CollectionTile = styled('div')`
}
`;
-export const CollectionTileWrapper = styled('div')`
- margin-right: 4px;
-`;
-
export const ActiveIndicator = styled('div')`
height: 3px;
- background-color: ${({ theme }) => theme.palette.text.primary};
+ background-color: ${({ theme }) => theme.palette.primary.main};
margin-top: 18px;
border-radius: 2px;
`;
@@ -81,9 +80,7 @@ export const ResultPreviewTile = styled(CollectionTile)`
`;
export const CollectionTileTextOverlay = styled(Overlay)`
- font-size: 14px;
- line-height: 20px;
- padding: 4px 6px;
+ padding: 8px;
`;
export const CollectionBarTileText = styled(CollectionTileTextOverlay)`
diff --git a/src/components/TruncateText.tsx b/src/components/TruncateText.tsx
index 8b51834f1..f20ea2627 100644
--- a/src/components/TruncateText.tsx
+++ b/src/components/TruncateText.tsx
@@ -1,7 +1,7 @@
import Tooltip from '@mui/material/Tooltip';
import React from 'react';
-import { styled } from '@mui/material';
-export const EllipseText = styled('div')`
+import { styled, Typography } from '@mui/material';
+export const EllipseText = styled(Typography)`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -10,7 +10,7 @@ export const EllipseText = styled('div')`
export default function TruncateText({ text }) {
return (
- {text}
+ {text}
);
}
diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx
index 80809ee75..84718e1df 100644
--- a/src/components/pages/gallery/SelectedFileOptions.tsx
+++ b/src/components/pages/gallery/SelectedFileOptions.tsx
@@ -1,5 +1,5 @@
import React, { useContext, useEffect, useState } from 'react';
-import { SetCollectionSelectorAttributes } from './CollectionSelector';
+import { SetCollectionSelectorAttributes } from 'types/gallery';
import { FluidContainer } from 'components/Container';
import constants from 'utils/strings/constants';
import { COLLECTION_OPS_TYPE } from 'utils/collection';
diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx
index 50e1404c2..0bbf5c7da 100644
--- a/src/components/pages/gallery/Upload.tsx
+++ b/src/components/pages/gallery/Upload.tsx
@@ -6,7 +6,7 @@ import UploadProgress from '../../UploadProgress';
import UploadStrategyChoiceModal from './UploadStrategyChoiceModal';
import { SetCollectionNamerAttributes } from '../../Collections/CollectionNamer';
-import { SetCollectionSelectorAttributes } from './CollectionSelector';
+import { SetCollectionSelectorAttributes } from 'types/gallery';
import { GalleryContext } from 'pages/gallery';
import { AppContext } from 'pages/_app';
import { logError } from 'utils/sentry';
diff --git a/src/types/gallery/index.ts b/src/types/gallery/index.ts
index c38a678ae..c4d27ef6e 100644
--- a/src/types/gallery/index.ts
+++ b/src/types/gallery/index.ts
@@ -1,3 +1,4 @@
+import { CollectionSelectorAttributes } from 'components/Collections/CollectionSelector';
import { TimeStampListItem } from 'components/PhotoList';
import { Collection } from 'types/collection';
import { EnteFile } from 'types/file';
@@ -11,6 +12,9 @@ export type SelectedState = {
export type SetFiles = React.Dispatch>;
export type SetCollections = React.Dispatch>;
export type SetLoading = React.Dispatch>;
+export type SetCollectionSelectorAttributes = React.Dispatch<
+ React.SetStateAction
+>;
export type GalleryContextType = {
thumbs: Map;