update all collections

src/components/Collections/AllCollections/content.tsx

@@ -1,28 +1,22 @@
 import React from 'react';
 import { DialogContent } from '@mui/material';
 import { FlexWrapper } from 'components/Container';
-import AllCollectionCard from './CollectionCard';
+import AllCollectionCard from './collectionCard';
 import { CollectionSummary } from 'types/collection';
 
 interface Iprops {
     collectionSummaries: CollectionSummary[];
     onCollectionClick: (id?: number) => void;
-    collectionTile: any;
 }
 export default function AllCollectionContent({
     collectionSummaries,
     onCollectionClick,
-    collectionTile,
 }: Iprops) {
     return (
         <DialogContent>
-            <FlexWrapper
-                style={{
-                    flexWrap: 'wrap',
-                }}>
+            <FlexWrapper flexWrap="wrap">
                 {collectionSummaries.map((collectionSummary) => (
                     <AllCollectionCard
-                        collectionTile={collectionTile}
                         onCollectionClick={onCollectionClick}
                         collectionSummary={collectionSummary}
                         key={collectionSummary.id}

src/components/Collections/AllCollections/dialog.tsx

@@ -2,22 +2,33 @@ import { Dialog, Slide, styled } from '@mui/material';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const AllCollectionContainer = styled(Dialog)(({ theme }) => ({
+export const AllCollectionDialog = styled(Dialog)<{
+    position: 'flex-start' | 'center' | 'flex-end';
+}>(({ theme, position }) => ({
     '& .MuiDialog-container': {
-        justifyContent: 'flex-end',
+        justifyContent: position,
     },
     '& .MuiPaper-root': {
-        maxWidth: '498px',
+        maxWidth: '494px',
     },
     '& .MuiDialogTitle-root': {
-        padding: theme.spacing(3, 2),
+        padding: theme.spacing(2),
+        paddingRight: theme.spacing(1),
     },
     '& .MuiDialogContent-root': {
         padding: theme.spacing(2),
     },
+    [theme.breakpoints.down(559)]: {
+        '& .MuiPaper-root': {
+            width: '324px',
+        },
+        '& .MuiDialogContent-root': {
+            padding: 6,
+        },
+    },
 }));
 
-AllCollectionContainer.propTypes = {
+AllCollectionDialog.propTypes = {
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
 };

src/components/Collections/AllCollections/index.tsx

@@ -1,18 +1,18 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import Divider from '@mui/material/Divider';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import { sortCollectionSummaries } from 'services/collectionService';
 import {
     Transition,
     AllCollectionDialog,
-} from 'components/Collections/AllCollections/Container';
+} from 'components/Collections/AllCollections/dialog';
 import { useLocalState } from 'hooks/useLocalState';
 import { LS_KEYS } from 'utils/storage/localStorage';
 import AllCollectionsHeader from './header';
 import { CollectionSummaries } from 'types/collection';
 import AllCollectionContent from './content';
-import { AllCollectionTile } from '../styledComponents';
 import { isSystemCollection } from 'utils/collection';
+import { AppContext } from 'pages/_app';
 
 interface Iprops {
     open: boolean;
@@ -25,7 +25,7 @@ const LeftSlideTransition = Transition('up');
 
 export default function AllCollections(props: Iprops) {
     const { collectionSummaries, open, onClose, setActiveCollection } = props;
-
+    const { isMobile } = useContext(AppContext);
     const [collectionSortBy, setCollectionSortBy] =
         useLocalState<COLLECTION_SORT_BY>(
             LS_KEYS.COLLECTION_SORT_BY,
@@ -50,18 +50,19 @@ export default function AllCollections(props: Iprops) {
 
     return (
         <AllCollectionDialog
+            position="flex-end"
             TransitionComponent={LeftSlideTransition}
             onClose={onClose}
-            open={open}>
+            open={open}
+            fullScreen={isMobile}>
             <AllCollectionsHeader
-                onClose={close}
+                onClose={onClose}
                 collectionCount={props.collectionSummaries.size}
                 collectionSortBy={collectionSortBy}
                 setCollectionSortBy={setCollectionSortBy}
             />
             <Divider />
             <AllCollectionContent
-                collectionTile={AllCollectionTile}
                 collectionSummaries={sortedCollectionSummaries}
                 onCollectionClick={onCollectionClick}
             />