diff --git a/src/components/Collections/AllCollections/Container.tsx b/src/components/Collections/AllCollections/Container.tsx new file mode 100644 index 000000000..b7931eb99 --- /dev/null +++ b/src/components/Collections/AllCollections/Container.tsx @@ -0,0 +1,30 @@ +import { Dialog, Slide, styled } from '@mui/material'; +import React from 'react'; +import PropTypes from 'prop-types'; + +export const AllCollectionContainer = styled(Dialog)(({ theme }) => ({ + '& .MuiDialog-container': { + justifyContent: 'flex-end', + }, + '& .MuiPaper-root': { + maxWidth: '498px', + }, + '& .MuiDialogTitle-root': { + padding: theme.spacing(3, 2), + }, + '& .MuiDialogContent-root': { + padding: theme.spacing(2), + }, +})); + +AllCollectionContainer.propTypes = { + children: PropTypes.node, + onClose: PropTypes.func.isRequired, +}; + +export const Transition = (direction: 'left' | 'right' | 'up') => + React.forwardRef( + (props: { children: React.ReactElement }, ref) => { + return ; + } + ); diff --git a/src/components/Collections/AllCollections/index.tsx b/src/components/Collections/AllCollections/index.tsx index e76ea8479..cbcfd2d31 100644 --- a/src/components/Collections/AllCollections/index.tsx +++ b/src/components/Collections/AllCollections/index.tsx @@ -4,8 +4,8 @@ import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection'; import { sortCollectionSummaries } from 'services/collectionService'; import { Transition, - FloatingDrawer, -} from 'components/Collections/FloatingDrawer'; + AllCollectionContainer, +} from 'components/Collections/AllCollections/Container'; import { useLocalState } from 'hooks/useLocalState'; import { LS_KEYS } from 'utils/storage/localStorage'; import AllCollectionsHeader from './header'; @@ -48,7 +48,7 @@ export default function AllCollections(props: Iprops) { }; return ( - @@ -64,6 +64,6 @@ export default function AllCollections(props: Iprops) { collectionSummaries={sortedCollectionSummaries} onCollectionClick={onCollectionClick} /> - + ); }