added closeButton to dropZone and close on escape key press

src/components/FullScreenDropZone.tsx

@@ -1,22 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
+import Container from './Container';
+import CrossIcon from './CrossIcon';
 
-export const getColor = (props) => {
+const CloseButtonWrapper=styled.div`
-    if (props.isDragActive) {
+    position: absolute;
-        return '#00e676';
+    top:10px;
-    }
+    right:10px;
-    return '#191919';
+    cursor:pointer;
-};
-
-export const enableBorder = (props) => (props.isDragActive ? 'solid' : 'none');
-const DropDiv = styled.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
 `;
-
+const Overlay = styled.div`
-const Overlay = styled.div<{ isDragActive: boolean }>`
     border-width: 8px;
     left: 0;
     top: 0;
@@ -32,7 +26,7 @@ const Overlay = styled.div<{ isDragActive: boolean }>`
     font-weight: 900;
     text-align: center;
     position: absolute;
-    border-color: ${(props) => getColor(props)};
+    border-color: #2dc262;
     border-style: solid;
     background: rgba(0, 0, 0, 0.9);
     z-index: 3000;
@@ -48,10 +42,20 @@ export default function FullScreenDropZone(props: Props) {
     const [isDragActive, setIsDragActive] = useState(false);
     const onDragEnter = () => setIsDragActive(true);
     const onDragLeave = () => setIsDragActive(false);
+
+    useEffect(()=>{
+        window.addEventListener('keydown', (event)=>{
+            console .log(event.code);
+            if (event.code==='Escape') {
+                onDragLeave();
+            }
+        });
+    }, []);
     return (
-        <DropDiv
+        <Container
             {...props.getRootProps({
                 onDragEnter,
+                onDragLeave,
                 onDrop: (e) => {
                     e.preventDefault();
                     props.showCollectionSelector();
@@ -62,13 +66,14 @@ export default function FullScreenDropZone(props: Props) {
             {isDragActive && (
                 <Overlay
                     onDrop={onDragLeave}
-                    onDragLeave={onDragLeave}
-                    isDragActive={isDragActive}
                 >
+                    <CloseButtonWrapper onClick={onDragLeave}>
+                        <CrossIcon/>
+                    </CloseButtonWrapper>
                     {constants.UPLOAD_DROPZONE_MESSAGE}
                 </Overlay>
             )}
             {props.children}
-        </DropDiv>
+        </Container>
     );
 }