chore(git): merge pull request #179 from 177-sticky-side-columns into staging

Reviewed-on: #179
Reviewed-by: b <b@4j.cx>
Reviewed-by: eugene <eugene@nostrdev.com>

src/App.scss

@@ -41,6 +41,7 @@ p {
 
 body {
   color: $text-color;
+  background: $body-background-color;
   font-family: $font-familiy;
   letter-spacing: $letter-spacing;
   font-size: $body-font-size;
@@ -70,6 +71,18 @@ input {
   font-family: inherit;
 }
 
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0; /* Removes default margin */
+  padding: 0; /* Removes default padding */
+}
+
+li {
+  list-style-type: none; /* Removes the bullets */
+  margin: 0; /* Removes any default margin */
+  padding: 0; /* Removes any default padding */
+}
+
 // Shared styles for center content (Create, Sign, Verify)
 .files-wrapper {
   display: flex;

src/components/DrawPDFFields/index.tsx

@@ -1,7 +1,5 @@
 import { Close } from '@mui/icons-material'
 import {
-  Box,
-  CircularProgress,
   FormControl,
   InputLabel,
   ListItemIcon,
@@ -11,7 +9,6 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import * as PDFJS from 'pdfjs-dist'
 import { ProfileMetadata, User, UserRole } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
 import { truncate } from 'lodash'
@@ -22,11 +19,12 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
 import { inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
+import { LoadingSpinner } from '../LoadingSpinner'
 
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+const DEFAULT_START_SIZE = {
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+  width: 140,
-  import.meta.url
+  height: 40
-).toString()
+} as const
 
 interface Props {
   selectedFiles: File[]
@@ -47,6 +45,8 @@ export const DrawPDFFields = (props: Props) => {
     clicked: false
   })
 
+  const [activeDrawField, setActiveDrawField] = useState<number>()
+
   useEffect(() => {
     if (selectedFiles) {
       /**
@@ -78,10 +78,12 @@ export const DrawPDFFields = (props: Props) => {
    * Drawing events
    */
   useEffect(() => {
-    window.addEventListener('mouseup', onMouseUp)
+    window.addEventListener('pointerup', handlePointerUp)
+    window.addEventListener('pointercancel', handlePointerUp)
 
     return () => {
-      window.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('pointerup', handlePointerUp)
+      window.removeEventListener('pointercancel', handlePointerUp)
     }
   }, [])
 
@@ -90,17 +92,14 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * Fired only when left click and mouse over pdf page
+   * Fired only on when left (primary pointer interaction) clicking page image
    * Creates new drawnElement and pushes in the array
    * It is re rendered and visible right away
    *
-   * @param event Mouse event
+   * @param event Pointer event
    * @param page PdfPage where press happened
    */
-  const onMouseDown = (
+  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
-    event: React.MouseEvent<HTMLDivElement>,
-    page: PdfPage
-  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -108,13 +107,13 @@ export const DrawPDFFields = (props: Props) => {
       return
     }
 
-    const { mouseX, mouseY } = getMouseCoordinates(event)
+    const { x, y } = getPointerCoordinates(event)
 
     const newField: DrawnField = {
-      left: to(page.width, mouseX),
+      left: to(page.width, x),
-      top: to(page.width, mouseY),
+      top: to(page.width, y),
-      width: 0,
+      width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
-      height: 0,
+      height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
       counterpart: '',
       type: selectedTool.identifier
     }
@@ -131,9 +130,9 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Drawing is finished, resets all the variables used to draw
-   * @param event Mouse event
+   * @param event Pointer event
    */
-  const onMouseUp = () => {
+  const handlePointerUp = () => {
     setMouseState((prev) => {
       return {
         ...prev,
@@ -145,16 +144,13 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
+   * After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
-   * which alters the newly created drawing element, resizing it while mouse move
+   * which alters the newly created drawing element, resizing it while pointer moves
-   * @param event Mouse event
+   * @param event Pointer event
    * @param page PdfPage where moving is happening
    */
-  const onMouseMove = (
+  const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
-    event: React.MouseEvent<HTMLDivElement>,
+    if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
-    page: PdfPage
-  ) => {
-    if (mouseState.clicked && selectedTool) {
       const lastElementIndex = page.drawnFields.length - 1
 
       const lastDrawnField = page.drawnFields[lastElementIndex]
@@ -164,10 +160,10 @@ export const DrawPDFFields = (props: Props) => {
       // to the page below (without releaseing mouse click)
       if (!lastDrawnField) return
 
-      const { mouseX, mouseY } = getMouseCoordinates(event)
+      const { x, y } = getPointerCoordinates(event)
 
-      const width = to(page.width, mouseX) - lastDrawnField.left
+      const width = to(page.width, x) - lastDrawnField.left
-      const height = to(page.width, mouseY) - lastDrawnField.top
+      const height = to(page.width, y) - lastDrawnField.top
 
       lastDrawnField.width = width
       lastDrawnField.height = height
@@ -182,55 +178,60 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when event happens on the drawn element which will be moved
-   * mouse coordinates relative to drawn element will be stored
+   * pointer coordinates relative to drawn element will be stored
    * so when we start moving, offset can be calculated
-   * mouseX - offsetX
+   * x - offsetX
-   * mouseY - offsetY
+   * y - offsetY
    *
-   * @param event Mouse event
+   * @param event Pointer event
-   * @param drawnField Which we are moving
+   * @param drawnFieldIndex Which we are moving
    */
-  const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleDrawnFieldPointerDown = (
+    event: React.PointerEvent,
+    drawnFieldIndex: number
+  ) => {
     event.stopPropagation()
 
     // Proceed only if left click
     if (event.button !== 0) return
 
-    const drawingRectangleCoords = getMouseCoordinates(event)
+    const drawingRectangleCoords = getPointerCoordinates(event)
 
+    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       dragging: true,
       clicked: false,
       coordsInWrapper: {
-        mouseX: drawingRectangleCoords.mouseX,
+        x: drawingRectangleCoords.x,
-        mouseY: drawingRectangleCoords.mouseY
+        y: drawingRectangleCoords.y
       }
     })
   }
 
   /**
-   * Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
+   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnField which we are moving
+   * @param pageWidth pdf value which is used to calculate scaled offset
    */
-  const onDrawnFieldMouseMove = (
+  const handleDrawnFieldPointerMove = (
-    event: React.MouseEvent<HTMLDivElement>,
+    event: React.PointerEvent,
     drawnField: DrawnField,
     pageWidth: number
   ) => {
     if (mouseState.dragging) {
-      const { mouseX, mouseY, rect } = getMouseCoordinates(
+      const { x, y, rect } = getPointerCoordinates(
         event,
         event.currentTarget.parentElement
       )
       const coordsOffset = mouseState.coordsInWrapper
 
       if (coordsOffset) {
-        let left = to(pageWidth, mouseX - coordsOffset.mouseX)
+        let left = to(pageWidth, x - coordsOffset.x)
-        let top = to(pageWidth, mouseY - coordsOffset.mouseY)
+        let top = to(pageWidth, y - coordsOffset.y)
 
-        const rightLimit = to(pageWidth, rect.width) - drawnField.width - 3
+        const rightLimit = to(pageWidth, rect.width) - drawnField.width
-        const bottomLimit = to(pageWidth, rect.height) - drawnField.height - 3
+        const bottomLimit = to(pageWidth, rect.height) - drawnField.height
 
         if (left < 0) left = 0
         if (top < 0) top = 0
@@ -247,17 +248,18 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when clicked on the resize handle, sets the state for a resize action
-   * @param event Mouse event
+   * @param event Pointer event
-   * @param drawnField which we are resizing
+   * @param drawnFieldIndex which we are resizing
    */
-  const onResizeHandleMouseDown = (
+  const handleResizePointerDown = (
-    event: React.MouseEvent<HTMLSpanElement>
+    event: React.PointerEvent,
+    drawnFieldIndex: number
   ) => {
     // Proceed only if left click
     if (event.button !== 0) return
-
     event.stopPropagation()
 
+    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       resizing: true
     })
@@ -265,16 +267,17 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Resizes the drawn element by the mouse position
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnField which we are resizing
+   * @param pageWidth pdf value which is used to calculate scaled offset
    */
-  const onResizeHandleMouseMove = (
+  const handleResizePointerMove = (
-    event: React.MouseEvent<HTMLSpanElement>,
+    event: React.PointerEvent,
     drawnField: DrawnField,
     pageWidth: number
   ) => {
     if (mouseState.resizing) {
-      const { mouseX, mouseY } = getMouseCoordinates(
+      const { x, y } = getPointerCoordinates(
         event,
         // currentTarget = span handle
         // 1st parent = drawnField
@@ -282,8 +285,8 @@ export const DrawPDFFields = (props: Props) => {
         event.currentTarget.parentElement?.parentElement
       )
 
-      const width = to(pageWidth, mouseX) - drawnField.left
+      const width = to(pageWidth, x) - drawnField.left
-      const height = to(pageWidth, mouseY) - drawnField.top
+      const height = to(pageWidth, y) - drawnField.top
 
       drawnField.width = width
       drawnField.height = height
@@ -294,13 +297,13 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Removes the drawn element using the indexes in the params
-   * @param event Mouse event
+   * @param event Pointer event
    * @param pdfFileIndex pdf file index
    * @param pdfPageIndex pdf page index
    * @param drawnFileIndex drawn file index
    */
-  const onRemoveHandleMouseDown = (
+  const handleRemovePointerDown = (
-    event: React.MouseEvent<HTMLSpanElement>,
+    event: React.PointerEvent,
     pdfFileIndex: number,
     pdfPageIndex: number,
     drawnFileIndex: number
@@ -314,40 +317,37 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * Used to stop mouse click propagating to the parent elements
+   * Used to stop pointer click propagating to the parent elements
    * so select can work properly
-   * @param event Mouse event
+   * @param event Pointer event
    */
-  const onUserSelectHandleMouseDown = (
+  const handleUserSelectPointerDown = (event: React.PointerEvent) => {
-    event: React.MouseEvent<HTMLDivElement>
-  ) => {
     event.stopPropagation()
   }
 
   /**
-   * Gets the mouse coordinates relative to a element in the `event` param
+   * Gets the pointer coordinates relative to a element in the `event` param
-   * @param event MouseEvent
+   * @param event PointerEvent
-   * @param customTarget mouse coordinates relative to this element, if not provided
+   * @param customTarget coordinates relative to this element, if not provided
    * event.target will be used
    */
-  const getMouseCoordinates = (
+  const getPointerCoordinates = (
-    event: React.MouseEvent<HTMLElement>,
+    event: React.PointerEvent,
     customTarget?: HTMLElement | null
   ) => {
     const target = customTarget ? customTarget : event.currentTarget
     const rect = target.getBoundingClientRect()
 
     // Clamp X Y within the target
-    const mouseX = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
+    const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
-    const mouseY = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
+    const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
 
     return {
-      mouseX,
+      x,
-      mouseY,
+      y,
       rect
     }
   }
-
   /**
    * Renders the pdf pages and drawing elements
    */
@@ -364,43 +364,67 @@ export const DrawPDFFields = (props: Props) => {
               className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
             >
               <img
-                onMouseMove={(event) => {
+                onPointerMove={(event) => {
-                  onMouseMove(event, page)
+                  handlePointerMove(event, page)
                 }}
-                onMouseDown={(event) => {
+                onPointerDown={(event) => {
-                  onMouseDown(event, page)
+                  handlePointerDown(event, page)
                 }}
                 draggable="false"
                 src={page.image}
+                alt={`page ${pageIndex + 1} of ${file.name}`}
               />
 
               {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
                 return (
                   <div
                     key={drawnFieldIndex}
-                    onMouseDown={onDrawnFieldMouseDown}
+                    onPointerDown={(event) =>
-                    onMouseMove={(event) => {
+                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
-                      onDrawnFieldMouseMove(event, drawnField, page.width)
+                    }
+                    onPointerMove={(event) => {
+                      handleDrawnFieldPointerMove(event, drawnField, page.width)
                     }}
                     className={styles.drawingRectangle}
                     style={{
+                      backgroundColor: drawnField.counterpart
+                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
+                        : undefined,
+                      borderColor: drawnField.counterpart
+                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
+                        : undefined,
                       left: inPx(from(page.width, drawnField.left)),
                       top: inPx(from(page.width, drawnField.top)),
                       width: inPx(from(page.width, drawnField.width)),
                       height: inPx(from(page.width, drawnField.height)),
-                      pointerEvents: mouseState.clicked ? 'none' : 'all'
+                      pointerEvents: mouseState.clicked ? 'none' : 'all',
+                      touchAction: 'none',
+                      opacity:
+                        mouseState.dragging &&
+                        activeDrawField === drawnFieldIndex
+                          ? 0.8
+                          : undefined
                     }}
                   >
                     <span
-                      onMouseDown={onResizeHandleMouseDown}
+                      onPointerDown={(event) =>
-                      onMouseMove={(event) => {
+                        handleResizePointerDown(event, drawnFieldIndex)
-                        onResizeHandleMouseMove(event, drawnField, page.width)
+                      }
+                      onPointerMove={(event) => {
+                        handleResizePointerMove(event, drawnField, page.width)
                       }}
                       className={styles.resizeHandle}
+                      style={{
+                        background:
+                          mouseState.resizing &&
+                          activeDrawField === drawnFieldIndex
+                            ? 'var(--primary-main)'
+                            : undefined
+                      }}
                     ></span>
                     <span
-                      onMouseDown={(event) => {
+                      onPointerDown={(event) => {
-                        onRemoveHandleMouseDown(
+                        handleRemovePointerDown(
                           event,
                           fileIndex,
                           pageIndex,
@@ -412,7 +436,7 @@ export const DrawPDFFields = (props: Props) => {
                       <Close fontSize="small" />
                     </span>
                     <div
-                      onMouseDown={onUserSelectHandleMouseDown}
+                      onPointerDown={handleUserSelectPointerDown}
                       className={styles.userSelect}
                     >
                       <FormControl fullWidth size="small">
@@ -529,11 +553,7 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   if (parsingPdf) {
-    return (
+    return <LoadingSpinner variant="small" />
-      <Box sx={{ width: '100%', textAlign: 'center' }}>
-        <CircularProgress />
-      </Box>
-    )
   }
 
   if (!sigitFiles.length) {

src/components/FileList/index.tsx

@@ -22,7 +22,6 @@ const FileList = ({
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
     <div className={styles.wrap}>
-      <div className={styles.container}>
       <ul className={styles.files}>
         {files.map((currentUserFile: CurrentUserFile) => (
           <li
@@ -32,9 +31,7 @@ const FileList = ({
           >
             <div className={styles.fileNumber}>{currentUserFile.id}</div>
             <div className={styles.fileInfo}>
-                <div className={styles.fileName}>
+              <div className={styles.fileName}>{currentUserFile.file.name}</div>
-                  {currentUserFile.file.name}
-                </div>
             </div>
 
             <div className={styles.fileVisual}>
@@ -45,7 +42,6 @@ const FileList = ({
           </li>
         ))}
       </ul>
-      </div>
       <Button variant="contained" fullWidth onClick={handleDownload}>
         {downloadLabel || 'Download Files'}
       </Button>

src/components/FileList/style.module.scss

@@ -1,12 +1,3 @@
-.container {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-}
-
 .filesPageContainer {
   width: 100%;
   display: grid;
@@ -15,18 +6,6 @@
   flex-grow: 1;
 }
 
-ul {
-  list-style-type: none; /* Removes bullet points */
-  margin: 0; /* Removes default margin */
-  padding: 0; /* Removes default padding */
-}
-
-li {
-  list-style-type: none; /* Removes the bullets */
-  margin: 0; /* Removes any default margin */
-  padding: 0; /* Removes any default padding */
-}
-
 .wrap {
   display: flex;
   flex-direction: column;
@@ -34,14 +13,16 @@ li {
 }
 
 .files {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+
   display: flex;
   flex-direction: column;
   width: 100%;
   grid-gap: 15px;
-  max-height: 350px;
+  overflow-y: auto;
-  overflow: auto;
+  overflow-x: none;
-  padding: 0 5px 0 0;
-  margin: 0 -5px 0 0;
 }
 
 .files::-webkit-scrollbar {

src/components/Footer/Footer.tsx

@@ -4,8 +4,10 @@ import styles from './style.module.scss'
 import { Container } from '../Container'
 import nostrImage from '../../assets/images/nostr.gif'
 import { appPublicRoutes } from '../../routes'
+import { createPortal } from 'react-dom'
 
-export const Footer = () => (
+export const Footer = () =>
+  createPortal(
     <footer className={`${styles.borderTop} ${styles.footer}`}>
       <Container
         style={{
@@ -124,5 +126,6 @@ export const Footer = () => (
         </a>{' '}
         2024.
       </div>
-  </footer>
+    </footer>,
-)
+    document.getElementById('root')!
+  )

src/components/LoadingSpinner/index.tsx

@@ -1,18 +1,35 @@
 import styles from './style.module.scss'
 
 interface Props {
-  desc: string
+  desc?: string
+  variant?: 'small' | 'default'
 }
 
 export const LoadingSpinner = (props: Props) => {
-  const { desc } = props
+  const { desc, variant = 'default' } = props
 
+  switch (variant) {
+    case 'small':
+      return (
+        <div
+          className={`${styles.loadingSpinnerContainer}`}
+          data-variant={variant}
+        >
+          <div className={styles.loadingSpinner}></div>
+        </div>
+      )
+
+    default:
       return (
         <div className={styles.loadingSpinnerOverlay}>
-      <div className={styles.loadingSpinnerContainer}>
+          <div
+            className={styles.loadingSpinnerContainer}
+            data-variant={variant}
+          >
             <div className={styles.loadingSpinner}></div>
-        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
           </div>
         </div>
       )
+  }
 }

src/components/LoadingSpinner/style.module.scss

@@ -2,34 +2,48 @@
 
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
+  inset: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
+  backdrop-filter: blur(10px);
+}
 
-  .loadingSpinnerContainer {
+.loadingSpinnerContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  }
 
-  .loadingSpinner {
+  &[data-variant='default'] {
-    background: url('/favicon.png') no-repeat center / cover;
+    width: 100%;
-    width: 40px;
+    max-width: 500px;
-    height: 40px;
+    margin: 25px 20px;
-    animation: spin 1s linear infinite;
+    background: $overlay-background-color;
+    border-radius: 4px;
+    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+  }
+  &[data-variant='small'] {
+    min-height: 250px;
   }
 }
 
+.loadingSpinner {
+  background: url('/favicon.png') no-repeat center / cover;
+  margin: 40px 25px;
+  width: 65px;
+  height: 65px;
+  animation: spin 1s linear infinite;
+}
+
 .loadingSpinnerDesc {
-  color: white;
+  width: 100%;
-  margin-top: 13px;
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;

src/components/MarkFormField/style.module.scss

@@ -1,11 +1,19 @@
+@import '../../styles/sizes.scss';
+
 .container {
-  width: 100%;
   display: flex;
   flex-direction: column;
   position: fixed;
+
+  @media only screen and (min-width: 768px) {
     bottom: 0;
     right: 0;
     left: 0;
+  }
+  bottom: $tabs-height + 5px;
+  right: 5px;
+  left: 5px;
+
   align-items: center;
   z-index: 1000;
 
@@ -107,7 +115,7 @@
 .actions {
   background: white;
   width: 100%;
-  border-radius: 4px;
+  border-radius: 5px;
   padding: 10px 20px;
   display: none;
   flex-direction: column;

src/components/PDFView/PdfItem.tsx

@@ -36,6 +36,8 @@ const PdfItem = ({
     return file.pages?.map((page, i) => {
       return (
         <PdfPageItem
+          fileName={file.name}
+          pageIndex={i}
           page={page}
           key={i}
           currentUserMarks={filterByPage(currentUserMarks, i)}

src/components/PDFView/PdfMarking.tsx

@@ -15,6 +15,11 @@ import FileList from '../FileList'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { UsersDetails } from '../UsersDetails.tsx'
 import { Meta } from '../../types'
+import {
+  faCircleInfo,
+  faFileDownload,
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
 
 interface PdfMarkingProps {
   currentUserMarks: CurrentUserMark[]
@@ -132,6 +137,9 @@ const PdfMarking = (props: PdfMarkingProps) => {
             </div>
           }
           right={meta !== null && <UsersDetails meta={meta} />}
+          leftIcon={faFileDownload}
+          centerIcon={faPen}
+          rightIcon={faCircleInfo}
         >
           {currentUserMarks?.length > 0 && (
             <PdfView

src/components/PDFView/PdfPageItem.tsx

@@ -7,6 +7,8 @@ import pdfViewStyles from './style.module.scss'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
 interface PdfPageProps {
+  fileName: string
+  pageIndex: number
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   otherUserMarks: Mark[]
@@ -19,6 +21,8 @@ interface PdfPageProps {
  * Responsible for rendering a single Pdf Page and its Marks
  */
 const PdfPageItem = ({
+  fileName,
+  pageIndex,
   page,
   currentUserMarks,
   handleMarkClick,
@@ -38,7 +42,11 @@ const PdfPageItem = ({
 
   return (
     <div className={`image-wrapper ${styles.pdfImageWrapper}`}>
-      <img draggable="false" src={page.image} />
+      <img
+        draggable="false"
+        src={page.image}
+        alt={`page ${pageIndex + 1} of ${fileName}`}
+      />
       {currentUserMarks.map((m, i) => (
         <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
           <PdfMarkItem

src/components/PDFView/index.tsx

@@ -4,6 +4,7 @@ import { CurrentUserFile } from '../../types/file.ts'
 import { useEffect, useRef } from 'react'
 import { FileDivider } from '../FileDivider.tsx'
 import React from 'react'
+import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
 
 interface PdfViewProps {
   currentFile: CurrentUserFile | null
@@ -48,7 +49,8 @@ const PdfView = ({
     index !== files.length - 1
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, index, arr) => {
+      {files.length > 0 ? (
+        files.map((currentUserFile, index, arr) => {
           const { hash, file, id } = currentUserFile
 
           if (!hash) return
@@ -71,7 +73,10 @@ const PdfView = ({
               {isNotLastPdfFile(index, arr) && <FileDivider />}
             </React.Fragment>
           )
-      })}
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }

src/components/UsersDetails.tsx/index.tsx

@@ -118,6 +118,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 </Tooltip>
               )
             })}
+          </UserAvatarGroup>
+        </div>
+
+        {viewers.length > 0 && (
+          <>
+            <p>Viewers</p>
+            <div className={styles.users}>
+              <UserAvatarGroup max={20}>
                 {viewers.map((signer) => {
                   const pubkey = npubToHex(signer)!
                   const profile = profiles[pubkey]
@@ -126,7 +134,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                     <Tooltip
                       key={signer}
                       title={
-                    profile?.display_name || profile?.name || shorten(pubkey)
+                        profile?.display_name ||
+                        profile?.name ||
+                        shorten(pubkey)
                       }
                       placement="top"
                       arrow
@@ -144,6 +154,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 })}
               </UserAvatarGroup>
             </div>
+          </>
+        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>

src/layouts/Main.tsx

@@ -26,7 +26,6 @@ import {
 } from '../utils'
 import { useAppSelector } from '../hooks'
 import styles from './style.module.scss'
-import { Footer } from '../components/Footer/Footer'
 
 export const MainLayout = () => {
   const dispatch: Dispatch = useDispatch()
@@ -160,7 +159,6 @@ export const MainLayout = () => {
       >
         <Outlet />
       </main>
-      <Footer />
     </>
   )
 }

src/layouts/StickySideColumns.module.scss

@@ -3,9 +3,33 @@
 
 .container {
   display: grid;
+
+  @media only screen and (max-width: 767px) {
+    gap: 20px;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+
+    // Hide Scrollbar and let's use tabs to navigate
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar {
+      display: none; /* Safari and Chrome */
+    }
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-snap-type: inline mandatory;
+
+    > * {
+      scroll-margin-top: $header-height + $body-vertical-padding;
+      scroll-snap-align: start;
+      scroll-snap-stop: always; // Touch devices will always stop on each element
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
     grid-template-columns: 0.75fr 1.5fr 0.75fr;
-  grid-gap: 30px;
+    gap: 30px;
-  flex-grow: 1;
+  }
 }
 
 .sidesWrap {
@@ -16,17 +40,58 @@
 }
 
 .sides {
+  @media only screen and (min-width: 768px) {
     position: sticky;
     top: $header-height + $body-vertical-padding;
+  }
+  > :first-child {
+    max-height: calc(
+      100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
+    );
+  }
 }
 
-.files {
+.scrollAdjust {
-  display: flex;
+  @media only screen and (max-width: 767px) {
-  flex-direction: column;
+    max-height: calc(
-  grid-gap: 15px;
+      100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
+    );
+    overflow-y: auto;
+  }
 }
+
 .content {
+  @media only screen and (min-width: 768px) {
     padding: 10px;
     border: 10px solid $overlay-background-color;
     border-radius: 4px;
+  }
+}
+
+.navTabs {
+  display: none;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: $tabs-height;
+  z-index: 2;
+  background: $overlay-background-color;
+  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
+
+  padding: 5px;
+  gap: 5px;
+
+  @media only screen and (max-width: 767px) {
+    display: flex;
+  }
+
+  > li {
+    flex-grow: 1;
+  }
+}
+
+.active {
+  background-color: $primary-main !important;
+  color: white !important;
 }

src/layouts/StickySideColumns.tsx

@@ -1,30 +1,147 @@
-import { PropsWithChildren, ReactNode } from 'react'
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
 
 import styles from './StickySideColumns.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+import { Button } from '@mui/material'
 
 interface StickySideColumnsProps {
-  left?: ReactNode
+  left: ReactNode
-  right?: ReactNode
+  right: ReactNode
+  leftIcon: IconDefinition
+  centerIcon: IconDefinition
+  rightIcon: IconDefinition
 }
 
+const DEFAULT_TAB = 'nav-content'
 export const StickySideColumns = ({
   left,
   right,
+  leftIcon,
+  centerIcon,
+  rightIcon,
   children
 }: PropsWithChildren<StickySideColumnsProps>) => {
+  const [tab, setTab] = useState(DEFAULT_TAB)
+  const ref = useRef<HTMLDivElement>(null)
+  const tabsRefs = useRef<{ [id: string]: HTMLDivElement | null }>({})
+  const handleNavClick = (id: string) => {
+    if (ref.current && tabsRefs.current) {
+      const x = tabsRefs.current[id]?.offsetLeft
+      ref.current.scrollTo({
+        left: x,
+        behavior: 'smooth'
+      })
+    }
+  }
+  const isActive = (id: string) => id === tab
+
+  useEffect(() => {
+    setTab(DEFAULT_TAB)
+    handleNavClick(DEFAULT_TAB)
+  }, [])
+
+  useEffect(() => {
+    const tabs = tabsRefs.current
+    // Set up the observer
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setTab(entry.target.id)
+          }
+        })
+      },
+      {
+        root: ref.current,
+        threshold: 0.5,
+        rootMargin: '-20px'
+      }
+    )
+
+    if (tabs) {
+      Object.values(tabs).forEach((tab) => {
+        if (tab) observer.observe(tab)
+      })
+    }
+
+    return () => {
+      if (tabs) {
+        Object.values(tabs).forEach((tab) => {
+          if (tab) observer.unobserve(tab)
+        })
+      }
+    }
+  }, [])
+
   return (
-    <div className={styles.container}>
+    <>
-      <div className={`${styles.sidesWrap} ${styles.files}`}>
+      <div className={styles.container} ref={ref}>
+        <div
+          id="nav-left"
+          className={styles.sidesWrap}
+          ref={(tab) => (tabsRefs.current['nav-left'] = tab)}
+        >
           <div className={styles.sides}>{left}</div>
         </div>
-      <div>
+        <div
+          id="nav-content"
+          className={styles.scrollAdjust}
+          ref={(tab) => (tabsRefs.current['nav-content'] = tab)}
+        >
           <div id="content-preview" className={styles.content}>
             {children}
           </div>
         </div>
-      <div className={styles.sidesWrap}>
+        <div
+          id="nav-right"
+          className={styles.sidesWrap}
+          ref={(tab) => (tabsRefs.current['nav-right'] = tab)}
+        >
           <div className={styles.sides}>{right}</div>
         </div>
       </div>
+      <ul className={styles.navTabs}>
+        <li>
+          <Button
+            fullWidth
+            variant="text"
+            onClick={() => handleNavClick('nav-left')}
+            className={`${isActive('nav-left') && styles.active}`}
+            aria-label="nav left"
+          >
+            <FontAwesomeIcon icon={leftIcon} />
+          </Button>
+        </li>
+        <li>
+          <Button
+            fullWidth
+            variant="text"
+            onClick={() => handleNavClick('nav-content')}
+            className={`${isActive('nav-content') && styles.active}`}
+            aria-label="nav middle"
+          >
+            <FontAwesomeIcon icon={centerIcon} />
+          </Button>
+        </li>
+        <li>
+          <Button
+            fullWidth
+            variant="text"
+            onClick={() => handleNavClick('nav-right')}
+            className={`${isActive('nav-right') && styles.active}`}
+            aria-label="nav right"
+          >
+            <FontAwesomeIcon icon={rightIcon} />
+          </Button>
+        </li>
+      </ul>
+    </>
   )
 }

src/layouts/style.module.scss

@@ -4,5 +4,4 @@
 .main {
   flex-grow: 1;
   padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
-  background-color: $body-background-color;
 }

src/pages/create/index.tsx

@@ -66,6 +66,8 @@ import {
   faCreditCard,
   faEllipsis,
   faEye,
+  faFile,
+  faFileCirclePlus,
   faGripLines,
   faHeading,
   faIdCard,
@@ -80,6 +82,7 @@ import {
   faStamp,
   faT,
   faTableCellsLarge,
+  faToolbox,
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
@@ -132,109 +135,109 @@ export const CreatePage = () => {
   const [toolbox] = useState<DrawTool[]>([
     {
       identifier: MarkType.TEXT,
-      icon: <FontAwesomeIcon icon={faT} />,
+      icon: faT,
       label: 'Text',
       active: true
     },
     {
       identifier: MarkType.SIGNATURE,
-      icon: <FontAwesomeIcon icon={faSignature} />,
+      icon: faSignature,
       label: 'Signature',
       active: false
     },
     {
       identifier: MarkType.JOBTITLE,
-      icon: <FontAwesomeIcon icon={faBriefcase} />,
+      icon: faBriefcase,
       label: 'Job Title',
       active: false
     },
     {
       identifier: MarkType.FULLNAME,
-      icon: <FontAwesomeIcon icon={faIdCard} />,
+      icon: faIdCard,
       label: 'Full Name',
       active: false
     },
     {
       identifier: MarkType.INITIALS,
-      icon: <FontAwesomeIcon icon={faHeading} />,
+      icon: faHeading,
       label: 'Initials',
       active: false
     },
     {
       identifier: MarkType.DATETIME,
-      icon: <FontAwesomeIcon icon={faClock} />,
+      icon: faClock,
       label: 'Date Time',
       active: false
     },
     {
       identifier: MarkType.DATE,
-      icon: <FontAwesomeIcon icon={faCalendarDays} />,
+      icon: faCalendarDays,
       label: 'Date',
       active: false
     },
     {
       identifier: MarkType.NUMBER,
-      icon: <FontAwesomeIcon icon={fa1} />,
+      icon: fa1,
       label: 'Number',
       active: false
     },
     {
       identifier: MarkType.IMAGES,
-      icon: <FontAwesomeIcon icon={faImage} />,
+      icon: faImage,
       label: 'Images',
       active: false
     },
     {
       identifier: MarkType.CHECKBOX,
-      icon: <FontAwesomeIcon icon={faSquareCheck} />,
+      icon: faSquareCheck,
       label: 'Checkbox',
       active: false
     },
     {
       identifier: MarkType.MULTIPLE,
-      icon: <FontAwesomeIcon icon={faCheckDouble} />,
+      icon: faCheckDouble,
       label: 'Multiple',
       active: false
     },
     {
       identifier: MarkType.FILE,
-      icon: <FontAwesomeIcon icon={faPaperclip} />,
+      icon: faPaperclip,
       label: 'File',
       active: false
     },
     {
       identifier: MarkType.RADIO,
-      icon: <FontAwesomeIcon icon={faCircleDot} />,
+      icon: faCircleDot,
       label: 'Radio',
       active: false
     },
     {
       identifier: MarkType.SELECT,
-      icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
+      icon: faSquareCaretDown,
       label: 'Select',
       active: false
     },
     {
       identifier: MarkType.CELLS,
-      icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
+      icon: faTableCellsLarge,
       label: 'Cells',
       active: false
     },
     {
       identifier: MarkType.STAMP,
-      icon: <FontAwesomeIcon icon={faStamp} />,
+      icon: faStamp,
       label: 'Stamp',
       active: false
     },
     {
       identifier: MarkType.PAYMENT,
-      icon: <FontAwesomeIcon icon={faCreditCard} />,
+      icon: faCreditCard,
       label: 'Payment',
       active: false
     },
     {
       identifier: MarkType.PHONE,
-      icon: <FontAwesomeIcon icon={faPhone} />,
+      icon: faPhone,
       label: 'Phone',
       active: false
     }
@@ -457,10 +460,8 @@ export const CreatePage = () => {
       return false
     }
 
-    if (users.length === 0) {
+    if (!users.some((u) => u.role === UserRole.signer)) {
-      toast.error(
+      toast.error('No signer is provided. At least add one signer.')
-        'No signer/viewer is provided. At least add one signer or viewer.'
-      )
       return false
     }
 
@@ -1001,7 +1002,7 @@ export const CreatePage = () => {
                 </Button>
               </div>
 
-              <div className={styles.paperGroup}>
+              <div className={`${styles.paperGroup} ${styles.users}`}>
                 <DisplayUser
                   metadata={metadata}
                   users={users}
@@ -1020,20 +1021,16 @@ export const CreatePage = () => {
                   return (
                     <div
                       key={index}
-                      onClick={
+                      {...(drawTool.active && {
-                        drawTool.active
+                        onClick: () => handleToolSelect(drawTool)
-                          ? () => {
+                      })}
-                              handleToolSelect(drawTool)
-                            }
-                          : () => null
-                      }
                       className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
                       `}
                     >
-                      {drawTool.icon}
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
                       {drawTool.label}
                       {drawTool.active ? (
-                        <FontAwesomeIcon icon={faEllipsis} />
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
                       ) : (
                         <span
                           style={{
@@ -1053,6 +1050,9 @@ export const CreatePage = () => {
               )}
             </div>
           }
+          leftIcon={faFileCirclePlus}
+          centerIcon={faFile}
+          rightIcon={faToolbox}
         >
           <DrawPDFFields
             metadata={metadata}

src/pages/create/style.module.scss

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  container-type: inline-size;
 }
 
 .orderedFilesList {
@@ -67,10 +69,6 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
-
-  // Automatic scrolling if paper-group gets large enough
-  // used for files on the left and users on the right
-  max-height: 350px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -78,6 +76,7 @@
 .inputWrapper {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 
   height: 34px;
   overflow: hidden;
@@ -92,6 +91,11 @@
   }
 }
 
+.users {
+  flex-shrink: 0;
+  max-height: 33vh;
+}
+
 .user {
   display: flex;
   gap: 10px;
@@ -130,26 +134,35 @@
 
 .toolbox {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
+
+  @container (min-width: 204px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @container (min-width: 309px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   gap: 15px;
 
-  max-height: 450px;
   overflow-x: hidden;
   overflow-y: auto;
+
+  container-type: inline-size;
 }
 
 .toolItem {
-  width: 90px;
-  height: 90px;
-
   transition: ease 0.2s;
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   gap: 5px;
   border-radius: 4px;
   padding: 10px 5px 5px 5px;
   background: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.5);
+
+  text-align: center;
   align-items: center;
   justify-content: center;
   font-size: 14px;
@@ -162,7 +175,7 @@
     color: white;
   }
 
-  &:not(.selected) {
+  &:not(.selected, .comingSoon) {
     &:hover {
       background: $primary-light;
       color: white;

src/pages/home/index.tsx

@@ -18,6 +18,7 @@ import {
   SigitCardDisplayInfo,
   SigitStatus
 } from '../../utils'
+import { Footer } from '../../components/Footer/Footer'
 
 // Unsupported Filter options are commented
 const FILTERS = [
@@ -262,6 +263,7 @@ export const HomePage = () => {
             ))}
         </div>
       </Container>
+      <Footer />
     </div>
   )
 }

src/pages/landing/index.tsx

@@ -19,6 +19,7 @@ import {
   faWifi
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
+import { Footer } from '../../components/Footer/Footer'
 
 export const LandingPage = () => {
   const navigate = useNavigate()
@@ -162,6 +163,7 @@ export const LandingPage = () => {
 
         <Outlet />
       </Container>
+      <Footer />
     </div>
   )
 }

src/pages/profile/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../utils'
 import styles from './style.module.scss'
 import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
 
 export const ProfilePage = () => {
   const navigate = useNavigate()
@@ -41,6 +42,16 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
+  const profileName =
+    pubkey &&
+    profileMetadata &&
+    truncate(
+      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
+      {
+        length: 16
+      }
+    )
+
   useEffect(() => {
     if (npub) {
       try {
@@ -165,7 +176,10 @@ export const ProfilePage = () => {
             className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
           >
             {profileMetadata && profileMetadata.banner ? (
-              <img src={profileMetadata.banner} />
+              <img
+                src={profileMetadata.banner}
+                alt={`banner image for ${profileName}`}
+              />
             ) : (
               ''
             )}
@@ -185,6 +199,7 @@ export const ProfilePage = () => {
                   <img
                     className={styles['image-placeholder']}
                     src={getProfileImage(profileMetadata!)}
+                    alt={profileName}
                   />
                 </div>
               </Box>
@@ -224,14 +239,7 @@ export const ProfilePage = () => {
                       variant="h6"
                       className={styles.bold}
                     >
-                      {truncate(
+                      {profileName}
-                        profileMetadata.display_name ||
-                          profileMetadata.name ||
-                          hexToNpub(pubkey),
-                        {
-                          length: 16
-                        }
-                      )}
                     </Typography>
                   )}
                 </Box>
@@ -285,6 +293,7 @@ export const ProfilePage = () => {
           </Box>
         </Container>
       )}
+      <Footer />
     </>
   )
 }

src/pages/settings/Settings.tsx

@@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
 
 export const SettingsPage = () => {
   const theme = useTheme()
@@ -43,6 +44,7 @@ export const SettingsPage = () => {
   }
 
   return (
+    <>
       <Container>
         <List
           sx={{
@@ -94,5 +96,7 @@ export const SettingsPage = () => {
           </ListItemButton>
         </List>
       </Container>
+      <Footer />
+    </>
   )
 }

src/pages/settings/cache/index.tsx

@@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
 import { localCache } from '../../../services'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'
 import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const CacheSettingsPage = () => {
   const theme = useTheme()
@@ -50,6 +51,7 @@ export const CacheSettingsPage = () => {
   }
 
   return (
+    <>
       <Container>
         {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
         <List
@@ -93,5 +95,7 @@ export const CacheSettingsPage = () => {
           </ListItemButton>
         </List>
       </Container>
+      <Footer />
+    </>
   )
 }

src/pages/settings/profile/index.tsx

@@ -32,6 +32,7 @@ import {
   unixNow
 } from '../../../utils'
 import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const ProfileSettingsPage = () => {
   const theme = useTheme()
@@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
           </LoadingButton>
         )}
       </Container>
+      <Footer />
     </>
   )
 }

src/pages/settings/relays/index.tsx

@@ -27,6 +27,7 @@ import {
   shorten
 } from '../../../utils'
 import styles from './style.module.scss'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const RelaysPage = () => {
   const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
@@ -270,6 +271,7 @@ const RelayItem = ({
   })
 
   return (
+    <>
       <Box className={styles.relay}>
         <List>
           <ListItem>
@@ -426,5 +428,7 @@ const RelayItem = ({
           )}
         </List>
       </Box>
+      <Footer />
+    </>
   )
 }

src/pages/verify/index.tsx

@@ -53,6 +53,11 @@ import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
 import { FileDivider } from '../../components/FileDivider.tsx'
 import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
 import { useScale } from '../../hooks/useScale.tsx'
+import {
+  faCircleInfo,
+  faFile,
+  faFileDownload
+} from '@fortawesome/free-solid-svg-icons'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -78,7 +83,8 @@ const SlimPdfView = ({
   }, [currentFile])
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, i) => {
+      {files.length > 0 ? (
+        files.map((currentUserFile, i) => {
           const { hash, file, id } = currentUserFile
           const signatureEvents = Object.keys(parsedSignatureEvents)
           if (!hash) return
@@ -105,7 +111,11 @@ const SlimPdfView = ({
                     })
                     return (
                       <div className="image-wrapper" key={i}>
-                      <img draggable="false" src={page.image} />
+                        <img
+                          draggable="false"
+                          src={page.image}
+                          alt={`page ${i} of ${file.name}`}
+                        />
                         {marks.map((m) => {
                           return (
                             <div
@@ -115,7 +125,9 @@ const SlimPdfView = ({
                                 left: inPx(from(page.width, m.location.left)),
                                 top: inPx(from(page.width, m.location.top)),
                                 width: inPx(from(page.width, m.location.width)),
-                              height: inPx(from(page.width, m.location.height)),
+                                height: inPx(
+                                  from(page.width, m.location.height)
+                                ),
                                 fontFamily: FONT_TYPE,
                                 fontSize: inPx(from(page.width, FONT_SIZE))
                               }}
@@ -141,7 +153,10 @@ const SlimPdfView = ({
               {i < files.length - 1 && <FileDivider />}
             </React.Fragment>
           )
-      })}
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }
@@ -557,6 +572,9 @@ export const VerifyPage = () => {
               </>
             }
             right={<UsersDetails meta={meta} />}
+            leftIcon={faFileDownload}
+            centerIcon={faFile}
+            rightIcon={faCircleInfo}
           >
             <SlimPdfView
               currentFile={currentFile}

src/styles/sizes.scss

@@ -2,3 +2,5 @@ $header-height: 65px;
 $body-vertical-padding: 25px;
 
 $default-container-padding-inline: 10px;
+
+$tabs-height: 40px;

src/types/drawing.ts

@@ -1,3 +1,4 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { MarkRect } from './mark'
 
 export interface MouseState {
@@ -5,8 +6,8 @@ export interface MouseState {
   dragging?: boolean
   resizing?: boolean
   coordsInWrapper?: {
-    mouseX: number
+    x: number
-    mouseY: number
+    y: number
   }
 }
 
@@ -27,7 +28,7 @@ export interface DrawnField extends MarkRect {
 export interface DrawTool {
   identifier: MarkType
   label: string
-  icon: JSX.Element
+  icon: IconDefinition
   defaultValue?: string
   selected?: boolean
   active?: boolean

src/utils/pdf.ts

@@ -1,12 +1,14 @@
 import { PdfPage } from '../types/drawing.ts'
-import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+import * as PDFJS from 'pdfjs-dist'
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
-  import.meta.url
+if (!PDFJS.GlobalWorkerOptions.workerPort) {
-).toString()
+  // Use workerPort and allow worker to be shared between all getDocument calls
+  const worker = new PDFJSWorker()
+  PDFJS.GlobalWorkerOptions.workerPort = worker
+}
 
 /**
  * Defined font size used when generating a PDF. Currently it is difficult to fully