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,30 +22,26 @@ const FileList = ({
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
     <div className={styles.wrap}>
-      <div className={styles.container}>
+      <ul className={styles.files}>
-        <ul className={styles.files}>
+        {files.map((currentUserFile: CurrentUserFile) => (
-          {files.map((currentUserFile: CurrentUserFile) => (
+          <li
-            <li
+            key={currentUserFile.id}
-              key={currentUserFile.id}
+            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
-              className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
+            onClick={() => setCurrentFile(currentUserFile)}
-              onClick={() => setCurrentFile(currentUserFile)}
+          >
-            >
+            <div className={styles.fileNumber}>{currentUserFile.id}</div>
-              <div className={styles.fileNumber}>{currentUserFile.id}</div>
+            <div className={styles.fileInfo}>
-              <div className={styles.fileInfo}>
+              <div className={styles.fileName}>{currentUserFile.file.name}</div>
-                <div className={styles.fileName}>
+            </div>
-                  {currentUserFile.file.name}
-                </div>
-              </div>
 
-              <div className={styles.fileVisual}>
+            <div className={styles.fileVisual}>
-                {currentUserFile.isHashValid && (
+              {currentUserFile.isHashValid && (
-                  <FontAwesomeIcon icon={faCheck} />
+                <FontAwesomeIcon icon={faCheck} />
-                )}
+              )}
-              </div>
+            </div>
-            </li>
+          </li>
-          ))}
+        ))}
-        </ul>
+      </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,125 +4,128 @@ 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 = () =>
-  <footer className={`${styles.borderTop} ${styles.footer}`}>
+  createPortal(
-    <Container
+    <footer className={`${styles.borderTop} ${styles.footer}`}>
-      style={{
+      <Container
-        paddingBlock: '50px'
+        style={{
-      }}
+          paddingBlock: '50px'
-    >
-      <Box
-        display={'grid'}
-        sx={{
-          gridTemplateColumns: {
-            xs: '1fr',
-            md: '0.5fr 2fr 0.5fr'
-          },
-          alignItems: {
-            xs: 'center',
-            md: 'start'
-          }
         }}
-        gap={'50px'}
       >
-        <LinkMui
+        <Box
+          display={'grid'}
           sx={{
-            justifySelf: {
+            gridTemplateColumns: {
+              xs: '1fr',
+              md: '0.5fr 2fr 0.5fr'
+            },
+            alignItems: {
               xs: 'center',
               md: 'start'
             }
           }}
-          component={Link}
+          gap={'50px'}
-          to={'/'}
-          className={styles.logo}
         >
-          <img src="/logo.svg" alt="Logo" />
+          <LinkMui
-        </LinkMui>
-        <Box
-          display={'grid'}
-          sx={{
-            gap: '15px',
-            gridTemplateColumns: {
-              xs: '1fr',
-              sm: 'repeat(2, 1fr)',
-              xl: 'repeat(3, 1fr)'
-            },
-            borderBlock: {
-              xs: 'solid 1px rgba(0, 0, 0, 0.1)',
-              md: 'unset'
-            },
-            paddingY: {
-              xs: '10px',
-              md: 'unset'
-            }
-          }}
-          component={'nav'}
-          className={styles.nav}
-        >
-          <Button
             sx={{
-              justifyContent: 'center'
+              justifySelf: {
+                xs: 'center',
+                md: 'start'
+              }
             }}
             component={Link}
             to={'/'}
-            variant={'text'}
+            className={styles.logo}
           >
-            Home
+            <img src="/logo.svg" alt="Logo" />
-          </Button>
+          </LinkMui>
-          <Button
+          <Box
+            display={'grid'}
             sx={{
-              justifyContent: 'center'
+              gap: '15px',
+              gridTemplateColumns: {
+                xs: '1fr',
+                sm: 'repeat(2, 1fr)',
+                xl: 'repeat(3, 1fr)'
+              },
+              borderBlock: {
+                xs: 'solid 1px rgba(0, 0, 0, 0.1)',
+                md: 'unset'
+              },
+              paddingY: {
+                xs: '10px',
+                md: 'unset'
+              }
             }}
-            component={LinkMui}
+            component={'nav'}
-            href={appPublicRoutes.docs}
+            className={styles.nav}
-            target="_blank"
-            variant={'text'}
           >
-            Documentation
+            <Button
-          </Button>
+              sx={{
-          <Button
+                justifyContent: 'center'
+              }}
+              component={Link}
+              to={'/'}
+              variant={'text'}
+            >
+              Home
+            </Button>
+            <Button
+              sx={{
+                justifyContent: 'center'
+              }}
+              component={LinkMui}
+              href={appPublicRoutes.docs}
+              target="_blank"
+              variant={'text'}
+            >
+              Documentation
+            </Button>
+            <Button
+              sx={{
+                justifyContent: 'center'
+              }}
+              component={LinkMui}
+              href={appPublicRoutes.source}
+              target="_blank"
+              variant={'text'}
+            >
+              Source
+            </Button>
+          </Box>
+          <Box
+            className={styles.links}
             sx={{
-              justifyContent: 'center'
+              justifySelf: {
+                xs: 'center',
+                md: 'end'
+              }
             }}
-            component={LinkMui}
-            href={appPublicRoutes.source}
-            target="_blank"
-            variant={'text'}
           >
-            Source
+            <Button
-          </Button>
+              component={LinkMui}
+              href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
+              target="_blank"
+              sx={{
+                minWidth: '45px',
+                padding: '10px'
+              }}
+              variant={'contained'}
+            >
+              <img src={nostrImage} width="25" alt="nostr logo" height="25" />
+            </Button>
+          </Box>
         </Box>
-        <Box
+      </Container>
-          className={styles.links}
+      <div className={`${styles.borderTop} ${styles.credits}`}>
-          sx={{
+        Built by&nbsp;
-            justifySelf: {
+        <a href="https://nostrdev.com/" target="_blank">
-              xs: 'center',
+          Nostr Dev
-              md: 'end'
+        </a>{' '}
-            }
+        2024.
-          }}
+      </div>
-        >
+    </footer>,
-          <Button
+    document.getElementById('root')!
-            component={LinkMui}
+  )
-            href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
-            target="_blank"
-            sx={{
-              minWidth: '45px',
-              padding: '10px'
-            }}
-            variant={'contained'}
-          >
-            <img src={nostrImage} width="25" alt="nostr logo" height="25" />
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-    <div className={`${styles.borderTop} ${styles.credits}`}>
-      Built by&nbsp;
-      <a href="https://nostrdev.com/" target="_blank">
-        Nostr Dev
-      </a>{' '}
-      2024.
-    </div>
-  </footer>
-)

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
 
-  return (
+  switch (variant) {
-    <div className={styles.loadingSpinnerOverlay}>
+    case 'small':
-      <div className={styles.loadingSpinnerContainer}>
+      return (
-        <div className={styles.loadingSpinner}></div>
+        <div
-        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+          className={`${styles.loadingSpinnerContainer}`}
-      </div>
+          data-variant={variant}
-    </div>
+        >
-  )
+          <div className={styles.loadingSpinner}></div>
+        </div>
+      )
+
+    default:
+      return (
+        <div className={styles.loadingSpinnerOverlay}>
+          <div
+            className={styles.loadingSpinnerContainer}
+            data-variant={variant}
+          >
+            <div className={styles.loadingSpinner}></div>
+            {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;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
+
+  &[data-variant='default'] {
+    width: 100%;
+    max-width: 500px;
+    margin: 25px 20px;
+    background: $overlay-background-color;
+    border-radius: 4px;
+    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
   }
-
+  &[data-variant='small'] {
-  .loadingSpinner {
+    min-height: 250px;
-    background: url('/favicon.png') no-repeat center / cover;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
   }
 }
 
+.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;
-  bottom: 0;
+
-  right: 0;
+  @media only screen and (min-width: 768px) {
-  left: 0;
+    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,30 +49,34 @@ const PdfView = ({
     index !== files.length - 1
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, index, arr) => {
+      {files.length > 0 ? (
-        const { hash, file, id } = currentUserFile
+        files.map((currentUserFile, index, arr) => {
+          const { hash, file, id } = currentUserFile
 
-        if (!hash) return
+          if (!hash) return
-        return (
+          return (
-          <React.Fragment key={index}>
+            <React.Fragment key={index}>
-            <div
+              <div
-              id={file.name}
+                id={file.name}
-              className="file-wrapper"
+                className="file-wrapper"
-              ref={(el) => (pdfRefs.current[id] = el)}
+                ref={(el) => (pdfRefs.current[id] = el)}
-            >
+              >
-              <PdfItem
+                <PdfItem
-                file={file}
+                  file={file}
-                currentUserMarks={filterByFile(currentUserMarks, hash)}
+                  currentUserMarks={filterByFile(currentUserMarks, hash)}
-                selectedMark={selectedMark}
+                  selectedMark={selectedMark}
-                handleMarkClick={handleMarkClick}
+                  handleMarkClick={handleMarkClick}
-                selectedMarkValue={selectedMarkValue}
+                  selectedMarkValue={selectedMarkValue}
-                otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
+                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
-              />
+                />
-            </div>
+              </div>
-            {isNotLastPdfFile(index, arr) && <FileDivider />}
+              {isNotLastPdfFile(index, arr) && <FileDivider />}
-          </React.Fragment>
+            </React.Fragment>
-        )
+          )
-      })}
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }

src/components/UsersDetails.tsx/index.tsx

@@ -118,32 +118,44 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 </Tooltip>
               )
             })}
-            {viewers.map((signer) => {
-              const pubkey = npubToHex(signer)!
-              const profile = profiles[pubkey]
-
-              return (
-                <Tooltip
-                  key={signer}
-                  title={
-                    profile?.display_name || profile?.name || shorten(pubkey)
-                  }
-                  placement="top"
-                  arrow
-                  disableInteractive
-                >
-                  <TooltipChild>
-                    <DisplaySigner
-                      status={SignStatus.Viewer}
-                      profile={profile}
-                      pubkey={pubkey}
-                    />
-                  </TooltipChild>
-                </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]
+
+                  return (
+                    <Tooltip
+                      key={signer}
+                      title={
+                        profile?.display_name ||
+                        profile?.name ||
+                        shorten(pubkey)
+                      }
+                      placement="top"
+                      arrow
+                      disableInteractive
+                    >
+                      <TooltipChild>
+                        <DisplaySigner
+                          status={SignStatus.Viewer}
+                          profile={profile}
+                          pubkey={pubkey}
+                        />
+                      </TooltipChild>
+                    </Tooltip>
+                  )
+                })}
+              </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;
-  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+
-  grid-gap: 30px;
+  @media only screen and (max-width: 767px) {
-  flex-grow: 1;
+    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;
+    gap: 30px;
+  }
 }
 
 .sidesWrap {
@@ -16,17 +40,58 @@
 }
 
 .sides {
-  position: sticky;
+  @media only screen and (min-width: 768px) {
-  top: $header-height + $body-vertical-padding;
+    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 {
-  padding: 10px;
+  @media only screen and (min-width: 768px) {
-  border: 10px solid $overlay-background-color;
+    padding: 10px;
-  border-radius: 4px;
+    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 className={styles.sides}>{left}</div>
+        <div
-      </div>
+          id="nav-left"
-      <div>
+          className={styles.sidesWrap}
-        <div id="content-preview" className={styles.content}>
+          ref={(tab) => (tabsRefs.current['nav-left'] = tab)}
-          {children}
+        >
+          <div className={styles.sides}>{left}</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
+          id="nav-right"
+          className={styles.sidesWrap}
+          ref={(tab) => (tabsRefs.current['nav-right'] = tab)}
+        >
+          <div className={styles.sides}>{right}</div>
         </div>
       </div>
-      <div className={styles.sidesWrap}>
+      <ul className={styles.navTabs}>
-        <div className={styles.sides}>{right}</div>
+        <li>
-      </div>
+          <Button
-    </div>
+            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,56 +44,59 @@ export const SettingsPage = () => {
   }
 
   return (
-    <Container>
+    <>
-      <List
+      <Container>
-        sx={{
+        <List
-          width: '100%',
+          sx={{
-          bgcolor: 'background.paper'
+            width: '100%',
-        }}
+            bgcolor: 'background.paper'
-        subheader={
+          }}
-          <ListSubheader
+          subheader={
-            sx={{
+            <ListSubheader
-              fontSize: '1.5rem',
+              sx={{
-              borderBottom: '0.5px solid',
+                fontSize: '1.5rem',
-              paddingBottom: 2,
+                borderBottom: '0.5px solid',
-              paddingTop: 2
+                paddingBottom: 2,
+                paddingTop: 2
+              }}
+            >
+              Settings
+            </ListSubheader>
+          }
+        >
+          <ListItemButton
+            onClick={() => {
+              navigate(getProfileSettingsRoute(usersPubkey!))
             }}
           >
-            Settings
+            <ListItemIcon>
-          </ListSubheader>
+              <AccountCircleIcon />
-        }
+            </ListItemIcon>
-      >
+            {listItem('Profile')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+          <ListItemButton
-            navigate(getProfileSettingsRoute(usersPubkey!))
+            onClick={() => {
-          }}
+              navigate(appPrivateRoutes.relays)
-        >
+            }}
-          <ListItemIcon>
+          >
-            <AccountCircleIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <RouterIcon />
-          {listItem('Profile')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Relays')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+          <ListItemButton
-            navigate(appPrivateRoutes.relays)
+            onClick={() => {
-          }}
+              navigate(appPrivateRoutes.cacheSettings)
-        >
+            }}
-          <ListItemIcon>
+          >
-            <RouterIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <CachedIcon />
-          {listItem('Relays')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Local Cache')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+        </List>
-            navigate(appPrivateRoutes.cacheSettings)
+      </Container>
-          }}
+      <Footer />
-        >
+    </>
-          <ListItemIcon>
-            <CachedIcon />
-          </ListItemIcon>
-          {listItem('Local Cache')}
-        </ListItemButton>
-      </List>
-    </Container>
   )
 }

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,48 +51,51 @@ export const CacheSettingsPage = () => {
   }
 
   return (
-    <Container>
+    <>
-      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
+      <Container>
-      <List
+        {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-        sx={{
+        <List
-          width: '100%',
+          sx={{
-          bgcolor: 'background.paper',
+            width: '100%',
-          marginTop: 2
+            bgcolor: 'background.paper',
-        }}
+            marginTop: 2
-        subheader={
+          }}
-          <ListSubheader
+          subheader={
-            sx={{
+            <ListSubheader
-              fontSize: '1.5rem',
+              sx={{
-              borderBottom: '0.5px solid',
+                fontSize: '1.5rem',
-              paddingBottom: 2,
+                borderBottom: '0.5px solid',
-              paddingTop: 2
+                paddingBottom: 2,
-            }}
+                paddingTop: 2
-          >
+              }}
-            Cache Setting
+            >
-          </ListSubheader>
+              Cache Setting
-        }
+            </ListSubheader>
-      >
+          }
-        <ListItemButton disabled>
+        >
-          <ListItemIcon>
+          <ListItemButton disabled>
-            <IosShareIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <IosShareIcon />
-          {listItem('Export (coming soon)')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Export (coming soon)')}
+          </ListItemButton>
 
-        <ListItemButton disabled>
+          <ListItemButton disabled>
-          <ListItemIcon>
+            <ListItemIcon>
-            <InputIcon />
+              <InputIcon />
-          </ListItemIcon>
+            </ListItemIcon>
-          {listItem('Import (coming soon)')}
+            {listItem('Import (coming soon)')}
-        </ListItemButton>
+          </ListItemButton>
 
-        <ListItemButton onClick={handleClearData}>
+          <ListItemButton onClick={handleClearData}>
-          <ListItemIcon>
+            <ListItemIcon>
-            <ClearIcon sx={{ color: theme.palette.error.main }} />
+              <ClearIcon sx={{ color: theme.palette.error.main }} />
-          </ListItemIcon>
+            </ListItemIcon>
-          {listItem('Clear Cache')}
+            {listItem('Clear Cache')}
-        </ListItemButton>
+          </ListItemButton>
-      </List>
+        </List>
-    </Container>
+      </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,161 +271,164 @@ const RelayItem = ({
   })
 
   return (
-    <Box className={styles.relay}>
+    <>
-      <List>
+      <Box className={styles.relay}>
-        <ListItem>
+        <List>
-          <span
+          <ListItem>
-            className={[
+            <span
-              styles.connectionStatus,
+              className={[
-              relayConnectionStatus
+                styles.connectionStatus,
-                ? relayConnectionStatus === RelayConnectionState.Connected
+                relayConnectionStatus
-                  ? styles.connectionStatusConnected
+                  ? relayConnectionStatus === RelayConnectionState.Connected
-                  : styles.connectionStatusNotConnected
+                    ? styles.connectionStatusConnected
-                : styles.connectionStatusUnknown
+                    : styles.connectionStatusNotConnected
-            ].join(' ')}
+                  : styles.connectionStatusUnknown
-          />
+              ].join(' ')}
-          {relayInfo &&
+            />
-            relayInfo.limitation &&
+            {relayInfo &&
-            relayInfo.limitation?.payment_required && (
+              relayInfo.limitation &&
-              <Tooltip title="Paid Relay" arrow placement="top">
+              relayInfo.limitation?.payment_required && (
-                <ElectricBoltIcon
+                <Tooltip title="Paid Relay" arrow placement="top">
-                  className={styles.lightningIcon}
+                  <ElectricBoltIcon
-                  color="warning"
+                    className={styles.lightningIcon}
-                  onClick={() => setDisplayRelayInfo((prev) => !prev)}
+                    color="warning"
-                />
+                    onClick={() => setDisplayRelayInfo((prev) => !prev)}
-              </Tooltip>
+                  />
-            )}
+                </Tooltip>
+              )}
 
-          <ListItemText primary={relayURI} />
+            <ListItemText primary={relayURI} />
 
-          <Box
+            <Box
-            className={styles.leaveRelayContainer}
+              className={styles.leaveRelayContainer}
-            onClick={() => handleLeaveRelay(relayURI)}
+              onClick={() => handleLeaveRelay(relayURI)}
-          >
+            >
-            <LogoutIcon />
+              <LogoutIcon />
-            <span>Leave</span>
+              <span>Leave</span>
-          </Box>
+            </Box>
-        </ListItem>
+          </ListItem>
-        <Divider className={styles.relayDivider} />
+          <Divider className={styles.relayDivider} />
-        <ListItem>
+          <ListItem>
-          <ListItemText
+            <ListItemText
-            primary="Publish to this relay?"
+              primary="Publish to this relay?"
-            secondary={
+              secondary={
-              relayInfo ? (
+                relayInfo ? (
-                <span
+                  <span
-                  onClick={() => setDisplayRelayInfo((prev) => !prev)}
+                    onClick={() => setDisplayRelayInfo((prev) => !prev)}
-                  className={styles.showInfo}
+                    className={styles.showInfo}
-                >
+                  >
-                  Show info{' '}
+                    Show info{' '}
-                  {displayRelayInfo ? (
+                    {displayRelayInfo ? (
-                    <KeyboardArrowUpIcon className={styles.showInfoIcon} />
+                      <KeyboardArrowUpIcon className={styles.showInfoIcon} />
-                  ) : (
+                    ) : (
-                    <KeyboardArrowDownIcon className={styles.showInfoIcon} />
+                      <KeyboardArrowDownIcon className={styles.showInfoIcon} />
-                  )}
+                    )}
-                </span>
+                  </span>
-              ) : (
+                ) : (
-                ''
+                  ''
-              )
+                )
-            }
+              }
-          />
+            />
-          <Switch
+            <Switch
-            checked={isWriteRelay}
+              checked={isWriteRelay}
-            onChange={(event) => handleRelayWriteChange(relayURI, event)}
+              onChange={(event) => handleRelayWriteChange(relayURI, event)}
-          />
+            />
-        </ListItem>
+          </ListItem>
-        {displayRelayInfo && (
+          {displayRelayInfo && (
-          <>
+            <>
-            <Divider className={styles.relayDivider} />
+              <Divider className={styles.relayDivider} />
-            <ListItem>
+              <ListItem>
-              <Box className={styles.relayInfoContainer}>
+                <Box className={styles.relayInfoContainer}>
-                {relayInfo &&
+                  {relayInfo &&
-                  Object.keys(relayInfo).map((key: string) => {
+                    Object.keys(relayInfo).map((key: string) => {
-                    const infoTitle = capitalizeFirstLetter(
+                      const infoTitle = capitalizeFirstLetter(
-                      key.replace('_', ' ')
+                        key.replace('_', ' ')
-                    )
+                      )
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    let infoValue = (relayInfo as any)[key]
+                      let infoValue = (relayInfo as any)[key]
 
-                    switch (key) {
+                      switch (key) {
-                      case 'pubkey':
+                        case 'pubkey':
-                        infoValue = shorten(hexToNpub(infoValue), 15)
+                          infoValue = shorten(hexToNpub(infoValue), 15)
 
-                        break
+                          break
 
-                      case 'limitation':
+                        case 'limitation':
-                        infoValue = (
+                          infoValue = (
-                          <ul>
+                            <ul>
-                            {Object.keys(infoValue).map((valueKey) => (
+                              {Object.keys(infoValue).map((valueKey) => (
-                              <li key={`${relayURI}_${key}_${valueKey}`}>
+                                <li key={`${relayURI}_${key}_${valueKey}`}>
-                                <span className={styles.relayInfoSubTitle}>
+                                  <span className={styles.relayInfoSubTitle}>
-                                  {capitalizeFirstLetter(
+                                    {capitalizeFirstLetter(
-                                    valueKey.split('_').join(' ')
+                                      valueKey.split('_').join(' ')
-                                  )}
+                                    )}
-                                  :
+                                    :
-                                </span>{' '}
+                                  </span>{' '}
-                                {`${infoValue[valueKey]}`}
+                                  {`${infoValue[valueKey]}`}
-                              </li>
+                                </li>
-                            ))}
+                              ))}
-                          </ul>
+                            </ul>
-                        )
+                          )
 
-                        break
+                          break
 
-                      case 'fees':
+                        case 'fees':
-                        infoValue = (
+                          infoValue = (
-                          <ul>
+                            <ul>
-                            {Object.keys(infoValue).map((valueKey) => (
+                              {Object.keys(infoValue).map((valueKey) => (
-                              <li key={`${relayURI}_${key}_${valueKey}`}>
+                                <li key={`${relayURI}_${key}_${valueKey}`}>
-                                <span className={styles.relayInfoSubTitle}>
+                                  <span className={styles.relayInfoSubTitle}>
-                                  {capitalizeFirstLetter(
+                                    {capitalizeFirstLetter(
-                                    valueKey.split('_').join(' ')
+                                      valueKey.split('_').join(' ')
-                                  )}
+                                    )}
-                                  :
+                                    :
-                                </span>{' '}
+                                  </span>{' '}
-                                {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`}
+                                  {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`}
-                              </li>
+                                </li>
-                            ))}
+                              ))}
-                          </ul>
+                            </ul>
-                        )
+                          )
-                        break
+                          break
-                      default:
+                        default:
-                        break
+                          break
-                    }
+                      }
 
-                    if (Array.isArray(infoValue)) {
+                      if (Array.isArray(infoValue)) {
-                      infoValue = infoValue.join(', ')
+                        infoValue = infoValue.join(', ')
-                    }
+                      }
 
-                    return (
+                      return (
-                      <span key={`${relayURI}_${key}_container`}>
+                        <span key={`${relayURI}_${key}_container`}>
-                        <span className={styles.relayInfoTitle}>
+                          <span className={styles.relayInfoTitle}>
-                          {infoTitle}:
+                            {infoTitle}:
-                        </span>{' '}
+                          </span>{' '}
-                        {infoValue}
+                          {infoValue}
-                        {key === 'pubkey' ? (
+                          {key === 'pubkey' ? (
-                          <ContentCopyIcon
+                            <ContentCopyIcon
-                            className={styles.copyItem}
+                              className={styles.copyItem}
-                            onClick={() => {
+                              onClick={() => {
-                              navigator.clipboard.writeText(
+                                navigator.clipboard.writeText(
-                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                hexToNpub((relayInfo as any)[key])
+                                  hexToNpub((relayInfo as any)[key])
-                              )
+                                )
 
-                              toast.success('Copied to clipboard', {
+                                toast.success('Copied to clipboard', {
-                                autoClose: 1000,
+                                  autoClose: 1000,
-                                hideProgressBar: true
+                                  hideProgressBar: true
-                              })
+                                })
-                            }}
+                              }}
-                          />
+                            />
-                        ) : null}
+                          ) : null}
-                      </span>
+                        </span>
-                    )
+                      )
-                  })}
+                    })}
-              </Box>
+                </Box>
-            </ListItem>
+              </ListItem>
-          </>
+            </>
-        )}
+          )}
-      </List>
+        </List>
-    </Box>
+      </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,70 +83,80 @@ const SlimPdfView = ({
   }, [currentFile])
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, i) => {
+      {files.length > 0 ? (
-        const { hash, file, id } = currentUserFile
+        files.map((currentUserFile, i) => {
-        const signatureEvents = Object.keys(parsedSignatureEvents)
+          const { hash, file, id } = currentUserFile
-        if (!hash) return
+          const signatureEvents = Object.keys(parsedSignatureEvents)
-        return (
+          if (!hash) return
-          <React.Fragment key={file.name}>
+          return (
-            <div
+            <React.Fragment key={file.name}>
-              id={file.name}
+              <div
-              ref={(el) => (pdfRefs.current[id] = el)}
+                id={file.name}
-              className="file-wrapper"
+                ref={(el) => (pdfRefs.current[id] = el)}
-            >
+                className="file-wrapper"
-              {file.isPdf &&
+              >
-                file.pages?.map((page, i) => {
+                {file.isPdf &&
-                  const marks: Mark[] = []
+                  file.pages?.map((page, i) => {
+                    const marks: Mark[] = []
 
-                  signatureEvents.forEach((e) => {
+                    signatureEvents.forEach((e) => {
-                    const m = parsedSignatureEvents[
+                      const m = parsedSignatureEvents[
-                      e as `npub1${string}`
+                        e as `npub1${string}`
-                    ].parsedContent?.marks.filter(
+                      ].parsedContent?.marks.filter(
-                      (m) => m.pdfFileHash == hash && m.location.page == i
+                        (m) => m.pdfFileHash == hash && m.location.page == i
+                      )
+                      if (m) {
+                        marks.push(...m)
+                      }
+                    })
+                    return (
+                      <div className="image-wrapper" key={i}>
+                        <img
+                          draggable="false"
+                          src={page.image}
+                          alt={`page ${i} of ${file.name}`}
+                        />
+                        {marks.map((m) => {
+                          return (
+                            <div
+                              className={`file-mark ${styles.mark}`}
+                              key={m.id}
+                              style={{
+                                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)
+                                ),
+                                fontFamily: FONT_TYPE,
+                                fontSize: inPx(from(page.width, FONT_SIZE))
+                              }}
+                            >
+                              {m.value}
+                            </div>
+                          )
+                        })}
+                      </div>
                     )
-                    if (m) {
+                  })}
-                      marks.push(...m)
+                {file.isImage && (
-                    }
+                  <img
-                  })
+                    className="file-image"
-                  return (
+                    src={file.objectUrl}
-                    <div className="image-wrapper" key={i}>
+                    alt={file.name}
-                      <img draggable="false" src={page.image} />
+                  />
-                      {marks.map((m) => {
+                )}
-                        return (
+                {!(file.isPdf || file.isImage) && (
-                          <div
+                  <ExtensionFileBox extension={file.extension} />
-                            className={`file-mark ${styles.mark}`}
+                )}
-                            key={m.id}
+              </div>
-                            style={{
+              {i < files.length - 1 && <FileDivider />}
-                              left: inPx(from(page.width, m.location.left)),
+            </React.Fragment>
-                              top: inPx(from(page.width, m.location.top)),
+          )
-                              width: inPx(from(page.width, m.location.width)),
+        })
-                              height: inPx(from(page.width, m.location.height)),
+      ) : (
-                              fontFamily: FONT_TYPE,
+        <LoadingSpinner variant="small" />
-                              fontSize: inPx(from(page.width, FONT_SIZE))
+      )}
-                            }}
-                          >
-                            {m.value}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  )
-                })}
-              {file.isImage && (
-                <img
-                  className="file-image"
-                  src={file.objectUrl}
-                  alt={file.name}
-                />
-              )}
-              {!(file.isPdf || file.isImage) && (
-                <ExtensionFileBox extension={file.extension} />
-              )}
-            </div>
-            {i < files.length - 1 && <FileDivider />}
-          </React.Fragment>
-        )
-      })}
     </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