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,15 +42,15 @@
           border-color: #01aaad79;
         }
       }
+
     }
   }
 }
 
 .pdfImageWrapper {
   position: relative;
-  -webkit-user-select: none;
   user-select: none;
-
+  
   &.drawing {
     cursor: crosshair;
   }
@@ -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;
   }
@@ -111,4 +110,4 @@
     background: #fff;
     padding: 5px 0;
   }
-}
+}

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,143 +118,131 @@ 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}>
-      <Container className={styles.container}>
+      <div className={styles.header}>
-        <div className={styles.header}>
+        <div className={styles.filters}>
-          <div className={styles.filters}>
+          <Select
-            <Select
+            name={'filter-select'}
-              name={'filter-select'}
+            value={filter}
-              value={filter}
+            setValue={setFilter}
-              setValue={setFilter}
+            options={FILTERS.map((f) => {
-              options={FILTERS.map((f) => {
+              return {
-                return {
+                label: f,
-                  label: f,
+                value: f
-                  value: f
-                }
-              })}
-            />
-            <Select
-              name={'sort-select'}
-              value={sort}
-              setValue={setSort}
-              options={SORT_BY.map((s) => {
-                return { ...s }
-              })}
-            />
-          </div>
-          <div className={styles.actionButtons}>
-            <form
-              className={styles.search}
-              onSubmit={(e) => {
-                e.preventDefault()
-                const searchInput = e.currentTarget.elements.namedItem(
-                  'q'
-                ) as HTMLInputElement
-                searchParams.set('q', 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')
-                    setSearchParams(searchParams)
-                  }
-                }}
-                sx={{
-                  width: '100%',
-                  fontSize: '16px',
-                  borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
-                  borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
-                  '& .MuiInputBase-root': {
-                    borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0
-                  },
-                  '& .MuiInputBase-input': {
-                    padding: '7px 14px'
-                  },
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    display: 'none'
-                  }
-                }}
-              />
-              <Button
-                type="submit"
-                sx={{
-                  minWidth: '44px',
-                  padding: '11.5px 12px',
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0
-                }}
-                variant={'contained'}
-                aria-label="Submit Search"
-              >
-                <FontAwesomeIcon icon={faSearch} />
-              </Button>
-            </form>
-          </div>
-        </div>
-        <div
-          className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
-          onClick={open}
-        >
-          <div>
-            <input {...getInputProps()} />
-            {isDragActive ? (
-              <p>Drop the files here ...</p>
-            ) : (
-              <p>Click or drag files to upload!</p>
-            )}
-          </div>
-        </div>
-        <div className={styles.submissions}>
-          {Object.keys(parsedSigits)
-            .filter((s) => {
-              const { title, signedStatus } = parsedSigits[s]
-              const isMatch = title?.toLowerCase().includes(q.toLowerCase())
-              switch (filter) {
-                case 'Completed':
-                  return signedStatus === SignedStatus.Complete && isMatch
-                case 'In-progress':
-                  return signedStatus === SignedStatus.Partial && isMatch
-                case 'Show all':
-                  return isMatch
-                default:
-                  console.error('Filter case not handled.')
               }
-            })
+            })}
-            .sort((a, b) => {
+          />
-              const x = parsedSigits[a].createdAt ?? 0
+          <Select
-              const y = parsedSigits[b].createdAt ?? 0
+            name={'sort-select'}
-              return sort === 'desc' ? y - x : x - y
+            value={sort}
-            })
+            setValue={setSort}
-            .map((key) => (
+            options={SORT_BY.map((s) => {
-              <DisplaySigit
+              return { ...s }
-                key={`sigit-${key}`}
+            })}
-                parsedMeta={parsedSigits[key]}
+          />
-                meta={sigits[key]}
-                profiles={profiles}
-                setProfiles={setProfiles}
-              />
-            ))}
         </div>
-      </Container>
+        <div className={styles.actionButtons}>
-    </div>
+          <form
+            className={styles.search}
+            onSubmit={(e) => {
+              e.preventDefault()
+              const searchInput = e.currentTarget.elements.namedItem(
+                'q'
+              ) as HTMLInputElement
+              setSearch(searchInput.value)
+            }}
+          >
+            <TextField
+              name="q"
+              placeholder="Search"
+              size="small"
+              type="search"
+              onChange={(e) => {
+                // Handle the case when users click native search input's clear or x
+                if (e.currentTarget.value === '') {
+                  setSearch(e.currentTarget.value)
+                }
+              }}
+              sx={{
+                width: '100%',
+                fontSize: '16px',
+                borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
+                borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
+                '& .MuiInputBase-root': {
+                  borderTopRightRadius: 0,
+                  borderBottomRightRadius: 0
+                },
+                '& .MuiInputBase-input': {
+                  padding: '7px 14px'
+                },
+                '& .MuiOutlinedInput-notchedOutline': {
+                  display: 'none'
+                }
+              }}
+            />
+            <Button
+              type="submit"
+              sx={{
+                minWidth: '44px',
+                padding: '11.5px 12px',
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0
+              }}
+              variant={'contained'}
+            >
+              <FontAwesomeIcon icon={faSearch} />
+            </Button>
+          </form>
+        </div>
+      </div>
+      <div className={styles.dropzone}>
+        <div {...getRootProps()}>
+          <input {...getInputProps()} />
+          {isDragActive ? (
+            <p>Drop the files here ...</p>
+          ) : (
+            <p>Click or drag files to upload!</p>
+          )}
+        </div>
+      </div>
+      <div className={styles.submissions}>
+        {Object.keys(parsedSigits)
+          .filter((s) => {
+            const { title, signedStatus } = parsedSigits[s]
+            const isMatch = title?.toLowerCase().includes(search.toLowerCase())
+            switch (filter) {
+              case 'Completed':
+                return signedStatus === SignedStatus.Complete && isMatch
+              case 'In-progress':
+                return signedStatus === SignedStatus.Partial && isMatch
+              case 'Show all':
+                return isMatch
+              default:
+                console.error('Filter case not handled.')
+            }
+          })
+          .sort((a, b) => {
+            const x = parsedSigits[a].createdAt ?? 0
+            const y = parsedSigits[b].createdAt ?? 0
+            return sort === 'desc' ? y - x : x - y
+          })
+          .map((key) => (
+            <DisplaySigit
+              key={`sigit-${key}`}
+              parsedMeta={parsedSigits[key]}
+              meta={sigits[key]}
+              profiles={profiles}
+              setProfiles={setProfiles}
+            />
+          ))}
+      </div>
+    </Container>
   )
 }

src/pages/home/style.module.scss

@@ -53,36 +53,32 @@
 }
 
 .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;
-  display: flex;
+  padding: 15px;
-  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);
-    border-radius: 2px;
-    border: dashed 3px rgba(0, 0, 0, 0.1);
-    inset: 15px;
-  }
-
-  &.isDragActive,
   &:hover {
-    &::before {
+    padding: 10px;
-      inset: 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;
+    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;
+  }
 }
 
 .submissions {