renamed FloatingDrawer to AllCollectionContainer

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<any, any> }, ref) => {
+            return <Slide direction={direction} ref={ref} {...props} />;
+        }
+    );

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 (
-        <FloatingDrawer
+        <AllCollectionContainer
             TransitionComponent={LeftSlideTransition}
             onClose={close}
             open={isOpen}>
@@ -64,6 +64,6 @@ export default function AllCollections(props: Iprops) {
                 collectionSummaries={sortedCollectionSummaries}
                 onCollectionClick={onCollectionClick}
             />
-        </FloatingDrawer>
+        </AllCollectionContainer>
     );
 }