refactor(home): increase dropzone area

src/components/DrawPDFFields/style.module.scss

@@ -30,6 +30,7 @@
       border: 1px solid rgba(0, 0, 0, 0.137);
       padding: 5px;
       cursor: pointer;
+      -webkit-user-select: none;
       user-select: none;
 
       &.selected {
@@ -42,13 +43,13 @@
           border-color: #01aaad79;
         }
       }
-
     }
   }
 }
 
 .pdfImageWrapper {
   position: relative;
+  -webkit-user-select: none;
   user-select: none;
 
   &.drawing {
@@ -94,7 +95,7 @@
     background-color: #fff;
     border: 1px solid rgb(160, 160, 160);
     border-radius: 50%;
-    color: #E74C3C;
+    color: #e74c3c;
     font-size: 10px;
     cursor: pointer;
   }

src/pages/home/index.tsx

@@ -127,12 +127,16 @@ export const HomePage = () => {
     [navigate]
   )
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    onDrop,
+    noClick: true
+  })
 
   const [filter, setFilter] = useState<Filter>('Show all')
   const [sort, setSort] = useState<Sort>('desc')
 
   return (
+    <div {...getRootProps()}>
       <Container className={styles.container}>
         <div className={styles.header}>
           <div className={styles.filters}>
@@ -208,14 +212,18 @@ export const HomePage = () => {
                   borderBottomLeftRadius: 0
                 }}
                 variant={'contained'}
+                aria-label="Submit Search"
               >
                 <FontAwesomeIcon icon={faSearch} />
               </Button>
             </form>
           </div>
         </div>
-      <div className={styles.dropzone}>
-        <div {...getRootProps()}>
+        <div
+          className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
+          onClick={open}
+        >
+          <div>
             <input {...getInputProps()} />
             {isDragActive ? (
               <p>Drop the files here ...</p>
@@ -256,5 +264,6 @@ export const HomePage = () => {
             ))}
         </div>
       </Container>
+    </div>
   )
 }

src/pages/home/style.module.scss

@@ -53,31 +53,35 @@
 }
 
 .dropzone {
+  position: relative;
+
+  font-size: 16px;
   background-color: $overlay-background-color;
   height: 250px;
-  transition: padding ease 0.2s;
-  padding: 15px;
-
-  &:hover {
-    padding: 10px;
-
-    > div {
-      background: rgba(0, 0, 0, 0.15);
-    }
-  }
-
-  > div {
-    transition: background-color ease 0.2s;
+  color: rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    transition:
+      background-color ease 0.2s,
+      inset ease 0.2s;
     background: rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.25);
-    height: 100%;
     border-radius: 2px;
     border: dashed 3px rgba(0, 0, 0, 0.1);
-    font-size: 16px;
+    inset: 15px;
+  }
+
+  &.isDragActive,
+  &:hover {
+    &::before {
+      inset: 10px;
+      background: rgba(0, 0, 0, 0.15);
+    }
   }
 }