random refactoring

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 (
         <CollectionCard
-            collectionTile={collectionTile}
+            collectionTile={AllCollectionTile}
             latestFile={collectionSummary.latestFile}
             onClick={() => onCollectionClick(collectionSummary.id)}>
             <AllCollectionTileText zIndex={1}>
-                <Box fontWeight={'bold'}>{collectionSummary.name}</Box>
+                <Typography>{collectionSummary.name}</Typography>
-                <Box>{constants.PHOTO_COUNT(collectionSummary.fileCount)}</Box>
+                <Typography variant="body2" color="text.secondary">
+                    {constants.PHOTO_COUNT(collectionSummary.fileCount)}
+                </Typography>
             </AllCollectionTileText>
         </CollectionCard>
     );

src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx

@@ -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 (
-            <CollectionTileWrapper ref={ref}>
-                <CollectionCard collectionTile={CollectionBarTile} {...others}>
-                    <CollectionBarTileText>
-                        <TruncateText text={collectionName} />
-                    </CollectionBarTileText>
-                </CollectionCard>
-                {active && <ActiveIndicator />}
-            </CollectionTileWrapper>
-        );
-    }
-);
-
-export default CollectionCardWithActiveIndicator;

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 (
+        <Box ref={ref}>
+            <CollectionCard collectionTile={CollectionBarTile} {...others}>
+                <CollectionBarTileText zIndex={1}>
+                    <TruncateText text={collectionName} />
+                </CollectionBarTileText>
+            </CollectionCard>
+            {active && <ActiveIndicator />}
+        </Box>
+    );
+});
+
+export default CollectionListBarCard;

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

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) {
                 )}
                 <ScrollContainer ref={componentRef}>
                     {sortedCollectionSummary.map((item) => (
-                        <CollectionCardWithActiveIndicator
+                        <CollectionListBarCard
                             key={item.id}
                             latestFile={item.latestFile}
                             ref={collectionChipsRef[item.id]}

src/components/Collections/CollectionShare/index.tsx

@@ -12,15 +12,15 @@ import PublicShare from './publicShare';
 import { AppContext } from 'pages/_app';
 
 interface Props {
-    show: boolean;
+    open: boolean;
-    onHide: () => void;
+    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 (
         <>
             <CollectionShareContainer
-                open={props.show}
+                open={props.open}
                 onClose={handleClose}
                 fullScreen={isMobile}>
                 <DialogTitleWithCloseButton onClose={handleClose}>

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 (
         <>
             <CollectionListBar
                 activeCollection={activeCollectionID}
                 setActiveCollection={setActiveCollectionID}
                 collectionSummaries={collectionSummaries}
-                showAllCollections={() => setAllCollectionView(true)}
+                showAllCollections={openAllCollections}
             />
 
             <AllCollections
                 open={allCollectionView}
-                onClose={() => setAllCollectionView(false)}
+                onClose={closeAllCollections}
                 collectionSummaries={collectionSummaries}
                 setActiveCollection={setActiveCollectionID}
             />
 
             <CollectionShare
-                show={collectionShareModalView}
+                open={collectionShareModalView}
-                onHide={() => setCollectionShareModalView(false)}
+                onClose={closeCollectionShare}
                 collection={activeCollection.current}
             />
         </>

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;
+    padding: 8px;
-    line-height: 20px;
-    padding: 4px 6px;
 `;
 
 export const CollectionBarTileText = styled(CollectionTileTextOverlay)`

src/components/TruncateText.tsx

@@ -1,7 +1,7 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import { styled } from '@mui/material';
+import { styled, Typography } from '@mui/material';
-export const EllipseText = styled('div')`
+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 (
         <Tooltip title={text}>
-            <EllipseText>{text}</EllipseText>
+            <EllipseText variant="body2">{text}</EllipseText>
         </Tooltip>
     );
 }

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';

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';

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<React.SetStateAction<EnteFile[]>>;
 export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
 export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
+export type SetCollectionSelectorAttributes = React.Dispatch<
+    React.SetStateAction<CollectionSelectorAttributes>
+>;
 
 export type GalleryContextType = {
     thumbs: Map<number, string>;