seperate DropZone component for collections

src/pages/gallery/components/CollectionDropZone.tsx

@@ -19,24 +19,23 @@ const enableBorder = (props) => (props.isDragActive ? 'dashed' : 'none');
 const DropDiv = styled.div`
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: center;
   border-width: 2px;
   border-radius: 2px;
+  height:10px;
+  width:30%;
   border-color: ${(props) => getColor(props)};
   border-style: ${(props) => enableBorder(props)};
   outline: none;
   transition: border 0.24s ease-in-out;
 `;
 
-const FileUpload = ({
+const CollectionDropZone = ({
   children,
-  noClick = null,
+  closeModal,
-  closeModal = null,
+  collectionLatestFile,
-  showModal = null,
+  noDragEventsBubbling,
-  collectionLatestFile = null,
+  showProgress,
-  noDragEventsBubbling = null,
-  showProgress = null,
 }) => {
   return (
     <>
@@ -46,9 +45,6 @@ const FileUpload = ({
           closeModal();
           showProgress();
         }}
-        noClick={noClick}
-        onDragOver={showModal}
-        onDragLeave={closeModal}
         noDragEventsBubbling={noDragEventsBubbling}
       >
         {({
@@ -78,4 +74,4 @@ const FileUpload = ({
   );
 };
 
-export default FileUpload;
+export default CollectionDropZone;

src/pages/gallery/components/CollectionSelector.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button, Card, Col, Container, Modal, Row } from 'react-bootstrap';
+import { Button, Card, Modal } from 'react-bootstrap';
-import FileUpload from './DragAndDropUpload';
+import CollectionDropZone from './CollectionDropZone';
 
 function CollectionSelector({
   modalView,
@@ -9,38 +9,19 @@ function CollectionSelector({
   showProgress,
 }) {
   const CollectionIcons = collectionLatestFile.map((item) => (
-    <FileUpload
+    <CollectionDropZone key={item.collectionID}
       closeModal={closeModal}
       collectionLatestFile={item}
       noDragEventsBubbling
       showProgress={showProgress}
     >
-      <Card
+      <Card style={{ maxHeight: "20%", cursor: 'pointer', border: 'solid', flexWrap: "nowrap" }}>
-        style={{
+        <Card.Img variant="top" src={item.thumb} />
-          margin: '5px',
+        <Card.Body>
-          padding: '5px',
+          <Card.Text>{item.collectionName}</Card.Text>
-          width: '95%',
+        </Card.Body>
-          height: '150px',
-          position: 'relative',
-          border: 'solid',
-          float: 'left',
-          cursor: 'pointer',
-        }}
-      >
-        <Card.Img
-          variant='top'
-          src={item.thumb}
-          style={{ width: '100%', height: '100%' }}
-        />
-        <Card.Body
-          style={{
-            padding: '5px',
-          }}
-        >
-          {item.collectionName}
-        </Card.Body>{' '}
       </Card>
-    </FileUpload>
+    </CollectionDropZone>
   ));
   return (
     <Modal
@@ -54,10 +35,8 @@ function CollectionSelector({
           Select/Click on Collection to upload
         </Modal.Title>
       </Modal.Header>
-      <Modal.Body>
+      <Modal.Body style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
-        <Container>
+        {CollectionIcons}
-          <Row>{CollectionIcons}</Row>
-        </Container>
       </Modal.Body>
       <Modal.Footer>
         <Button onClick={closeModal}>Close</Button>

src/pages/gallery/index.tsx

@@ -22,8 +22,6 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import Collections from './components/Collections';
 import SadFace from 'components/SadFace';
-import FileUpload from './components/DragAndDropUpload';
-import UploadButton from 'pages/gallery/components/UploadButton';
 import CollectionSelector from './components/CollectionSelector';
 import UploadProgress from './components/UploadProgress';
 
@@ -306,7 +304,6 @@ export default function Gallery(props) {
       <CollectionSelector
         modalView={props.modalView}
         closeModal={props.closeModal}
-        showModal={props.showModal}
         collectionLatestFile={collectionLatestFile}
         showProgress={() => setProgressView(true)}
       />