src/components/DrawPDFFields/style.module.scss

@@ -30,7 +30,6 @@
       border: 1px solid rgba(0, 0, 0, 0.137);
       padding: 5px;
       cursor: pointer;
-      -webkit-user-select: none;
       user-select: none;
 
       &.selected {
@@ -43,13 +42,13 @@
           border-color: #01aaad79;
         }
       }
+
     }
   }
 }
 
 .pdfImageWrapper {
   position: relative;
-  -webkit-user-select: none;
   user-select: none;
   
   &.drawing {
@@ -95,7 +94,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

@@ -1,7 +1,7 @@
 import { Button, TextField } from '@mui/material'
 import JSZip from 'jszip'
 import { useCallback, useEffect, useState } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { useAppSelector } from '../../hooks'
 import { appPrivateRoutes, appPublicRoutes } from '../../routes'
@@ -40,15 +40,6 @@ type Sort = (typeof SORT_BY)[number]['value']
 
 export const HomePage = () => {
   const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
-  const q = searchParams.get('q') ?? ''
-
-  useEffect(() => {
-    const searchInput = document.getElementById('q') as HTMLInputElement | null
-    if (searchInput) {
-      searchInput.value = q
-    }
-  }, [q])
 
   const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
   const [parsedSigits, setParsedSigits] = useState<{
@@ -127,16 +118,13 @@ export const HomePage = () => {
     [navigate]
   )
 
-  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
-    onDrop,
-    noClick: true
-  })
 
+  const [search, setSearch] = useState('')
   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}>
@@ -168,22 +156,18 @@ export const HomePage = () => {
               const searchInput = e.currentTarget.elements.namedItem(
                 'q'
               ) as HTMLInputElement
-                searchParams.set('q', searchInput.value)
+              setSearch(searchInput.value)
-                setSearchParams(searchParams)
             }}
           >
             <TextField
-                id="q"
               name="q"
               placeholder="Search"
               size="small"
               type="search"
-                defaultValue={q}
               onChange={(e) => {
                 // Handle the case when users click native search input's clear or x
                 if (e.currentTarget.value === '') {
-                    searchParams.delete('q')
+                  setSearch(e.currentTarget.value)
-                    setSearchParams(searchParams)
                 }
               }}
               sx={{
@@ -212,18 +196,14 @@ export const HomePage = () => {
                 borderBottomLeftRadius: 0
               }}
               variant={'contained'}
-                aria-label="Submit Search"
             >
               <FontAwesomeIcon icon={faSearch} />
             </Button>
           </form>
         </div>
       </div>
-        <div
+      <div className={styles.dropzone}>
-          className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
+        <div {...getRootProps()}>
-          onClick={open}
-        >
-          <div>
           <input {...getInputProps()} />
           {isDragActive ? (
             <p>Drop the files here ...</p>
@@ -236,7 +216,7 @@ export const HomePage = () => {
         {Object.keys(parsedSigits)
           .filter((s) => {
             const { title, signedStatus } = parsedSigits[s]
-              const isMatch = title?.toLowerCase().includes(q.toLowerCase())
+            const isMatch = title?.toLowerCase().includes(search.toLowerCase())
             switch (filter) {
               case 'Completed':
                 return signedStatus === SignedStatus.Complete && isMatch
@@ -264,6 +244,5 @@ export const HomePage = () => {
           ))}
       </div>
     </Container>
-    </div>
   )
 }

src/pages/home/style.module.scss

@@ -53,35 +53,31 @@
 }
 
 .dropzone {
-  position: relative;
-
-  font-size: 16px;
   background-color: $overlay-background-color;
   height: 250px;
-  color: rgba(0, 0, 0, 0.25);
+  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;
     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);
-    inset: 15px;
+    font-size: 16px;
-  }
-
-  &.isDragActive,
-  &:hover {
-    &::before {
-      inset: 10px;
-      background: rgba(0, 0, 0, 0.15);
-    }
   }
 }