update collection selector to use the same all collection dialog

src/components/Collections/CollectionSelector/AddCollectionButton.tsx

@@ -0,0 +1,37 @@
+import { Typography } from '@mui/material';
+import CollectionCard from 'components/Collections/CollectionCard';
+import {
+    AllCollectionTile,
+    AllCollectionTileText,
+} from 'components/Collections/styledComponents';
+import React from 'react';
+import { styled } from '@mui/material';
+import constants from 'utils/strings/constants';
+import { CenteredFlex, Overlay } from 'components/Container';
+
+const ImageContainer = styled(Overlay)`
+    display: flex;
+    font-size: 42px;
+`;
+
+interface Iprops {
+    showNextModal: () => void;
+}
+
+export default function AddCollectionButton({ showNextModal }: Iprops) {
+    return (
+        <CollectionCard
+            collectionTile={AllCollectionTile}
+            onClick={() => showNextModal()}
+            latestFile={null}>
+            <AllCollectionTileText zIndex={1}>
+                <Typography variant="body2" fontWeight={'bold'}>
+                    {constants.CREATE_COLLECTION}
+                </Typography>
+            </AllCollectionTileText>
+            <ImageContainer zIndex={0}>
+                <CenteredFlex>+</CenteredFlex>
+            </ImageContainer>
+        </CollectionCard>
+    );
+}

src/components/Collections/CollectionSelector/CollectionCard.tsx

@@ -0,0 +1,26 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import CollectionCard from '../CollectionCard';
+import { CollectionSummary } from 'types/collection';
+import { AllCollectionTile, AllCollectionTileText } from '../styledComponents';
+
+interface Iprops {
+    collectionSummary: CollectionSummary;
+    onCollectionClick: (collectionID: number) => void;
+}
+
+export default function CollectionSelectorCard({
+    onCollectionClick,
+    collectionSummary,
+}: Iprops) {
+    return (
+        <CollectionCard
+            collectionTile={AllCollectionTile}
+            latestFile={collectionSummary.latestFile}
+            onClick={() => onCollectionClick(collectionSummary.id)}>
+            <AllCollectionTileText zIndex={1}>
+                <Typography>{collectionSummary.name}</Typography>
+            </AllCollectionTileText>
+        </CollectionCard>
+    );
+}

src/components/Collections/CollectionSelector/index.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo } from 'react';
-import AddCollectionButton from './AddCollectionButton';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Collection, CollectionSummaries } from 'types/collection';
-import DialogBoxBase from 'components/DialogBox/base';
 import DialogTitleWithCloseButton from 'components/DialogBox/titleWithCloseButton';
+import { isSystemCollection } from 'utils/collection';
+import { AppContext } from 'pages/_app';
+import { AllCollectionDialog } from 'components/Collections/AllCollections/dialog';
 import { DialogContent } from '@mui/material';
 import { FlexWrapper } from 'components/Container';
-import { CollectionSelectorTile } from 'components/Collections/styledComponents';
-import AllCollectionCard from 'components/Collections/AllCollections/CollectionCard';
-import { isSystemCollection } from 'utils/collection';
+import CollectionSelectorCard from './CollectionCard';
+import AddCollectionButton from './AddCollectionButton';
 
 export interface CollectionSelectorAttributes {
     callback: (collection: Collection) => void;
@@ -15,9 +15,6 @@ export interface CollectionSelectorAttributes {
     title: string;
     fromCollection?: number;
 }
-export type SetCollectionSelectorAttributes = React.Dispatch<
-    React.SetStateAction<CollectionSelectorAttributes>
->;
 
 interface Props {
     open: boolean;
@@ -32,6 +29,7 @@ function CollectionSelector({
     collections,
     ...props
 }: Props) {
+    const appContext = useContext(AppContext);
     const collectionToShow = useMemo(() => {
         const personalCollectionsOtherThanFrom = [
             ...collectionSummaries.values(),
@@ -62,27 +60,27 @@ function CollectionSelector({
         props.onClose();
     };
 
+    const onCloseButtonClick = () => props.onClose(true);
+
     return (
-        <DialogBoxBase
-            {...props}
-            maxWidth="md"
-            PaperProps={{ sx: { maxWidth: '848px' } }}>
-            <DialogTitleWithCloseButton onClose={() => props.onClose(true)}>
+        <AllCollectionDialog
+            onClose={props.onClose}
+            open={props.open}
+            position="center"
+            fullScreen={appContext.isMobile}>
+            <DialogTitleWithCloseButton onClose={onCloseButtonClick}>
                 {attributes.title}
             </DialogTitleWithCloseButton>
-            <DialogContent
-                sx={{
-                    '&&&': {
-                        px: 0,
-                    },
-                }}>
-                <FlexWrapper style={{ flexWrap: 'wrap' }}>
+            <DialogContent>
+                <FlexWrapper
+                    style={{
+                        flexWrap: 'wrap',
+                    }}>
                     <AddCollectionButton
                         showNextModal={attributes.showNextModal}
                     />
                     {collectionToShow.map((collectionSummary) => (
-                        <AllCollectionCard
-                            collectionTile={CollectionSelectorTile}
+                        <CollectionSelectorCard
                             onCollectionClick={handleCollectionClick}
                             collectionSummary={collectionSummary}
                             key={collectionSummary.id}
@@ -90,7 +88,7 @@ function CollectionSelector({
                     ))}
                 </FlexWrapper>
             </DialogContent>
-        </DialogBoxBase>
+        </AllCollectionDialog>
     );
 }
 

src/components/Collections/styledComponents.ts

@@ -79,11 +79,11 @@ export const ResultPreviewTile = styled(CollectionTile)`
     border-radius: 4px;
 `;
 
-export const CollectionTileTextOverlay = styled(Overlay)`
+export const CollectionTileText = styled(Overlay)`
     padding: 8px;
 `;
 
-export const CollectionBarTileText = styled(CollectionTileTextOverlay)`
+export const CollectionBarTileText = styled(CollectionTileText)`
     background: linear-gradient(
         180deg,
         rgba(0, 0, 0, 0.1) 0%,
@@ -93,7 +93,7 @@ export const CollectionBarTileText = styled(CollectionTileTextOverlay)`
     align-items: flex-end;
 `;
 
-export const AllCollectionTileText = styled(CollectionTileTextOverlay)`
+export const AllCollectionTileText = styled(CollectionTileText)`
     background: linear-gradient(
         0deg,
         rgba(0, 0, 0, 0.1) 0%,

src/components/pages/gallery/AddCollectionButton.tsx

@@ -1,34 +0,0 @@
-import { Typography } from '@mui/material';
-import CollectionCard from 'components/Collections/CollectionCard';
-import { CollectionSelectorTile } from 'components/Collections/styledComponents';
-import React from 'react';
-import { styled } from '@mui/material';
-import constants from 'utils/strings/constants';
-
-const ImageContainer = styled('div')`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 42px;
-`;
-
-export default function AddCollectionButton({
-    showNextModal,
-}: {
-    showNextModal: () => void;
-}) {
-    return (
-        <CollectionCard
-            collectionTile={CollectionSelectorTile}
-            onClick={() => showNextModal()}
-            latestFile={null}>
-            <Typography variant="body2" fontWeight={'bold'}>
-                {constants.CREATE_COLLECTION}
-            </Typography>
-            <ImageContainer>+</ImageContainer>
-        </CollectionCard>
-    );
-}