Prevented EventPropgration to gallery dropzone and style changes

src/pages/gallery/components/CollectionSelector.tsx

@@ -4,7 +4,7 @@ import FileUpload from './DragAndDropUpload';
 
 function CollectionSelector({ modalView, closeModal, collections }) {
   const CollectionIcons = collections.map((item) => (
-    <FileUpload>
+    <FileUpload closeModal={closeModal} collection={item} noDragEventsBubbling>
       <Card
         style={{
           margin: '5px',
@@ -15,13 +15,13 @@ function CollectionSelector({ modalView, closeModal, collections }) {
           border: 'solid',
           overflow: 'auto',
           float: 'left',
+          cursor: 'pointer',
         }}
       >
         <Card.Body>{item.name}</Card.Body>{' '}
       </Card>
     </FileUpload>
   ));
-  console.log(CollectionIcons);
   return (
     <Modal
       show={modalView}

src/pages/gallery/components/DragAndDropUpload.tsx

@@ -36,16 +36,20 @@ const FileUpload = ({
   noClick = null,
   closeModal = null,
   showModal = null,
+  collection = null,
+  noDragEventsBubbling,
 }) => {
   return (
     <>
       <Dropzone
         onDrop={(acceptedFiles) => {
-          console.log(acceptedFiles);
+          console.log(collection.name);
+          closeModal();
         }}
         noClick={noClick}
         onDragOver={showModal}
         onDragLeave={closeModal}
+        noDragEventsBubbling={noDragEventsBubbling}
       >
         {({
           getRootProps,