2024-09-05 07:30:55 +00:00 · 2024-09-04 18:40:16 +00:00
30 changed files with 1044 additions and 715 deletions
--- a/src/App.scss
+++ b/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;
--- a/src/components/DrawPDFFields/index.tsx
+++ b/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(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url
-).toString()
+const DEFAULT_START_SIZE = {
+  width: 140,
+  height: 40
+} 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 = (
-    event: React.MouseEvent<HTMLDivElement>,
-    page: PdfPage
-  ) => {
+  const handlePointerDown = (event: React.PointerEvent, 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),
-      top: to(page.width, mouseY),
-      width: 0,
-      height: 0,
+      left: to(page.width, x),
+      top: to(page.width, y),
+      width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
+      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
-   * which alters the newly created drawing element, resizing it while mouse move
-   * @param event Mouse event
+   * 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 pointer moves
+   * @param event Pointer event
   * @param page PdfPage where moving is happening
   */
-  const onMouseMove = (
-    event: React.MouseEvent<HTMLDivElement>,
-    page: PdfPage
-  ) => {
-    if (mouseState.clicked && selectedTool) {
+  const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
+    if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
      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 height = to(page.width, mouseY) - lastDrawnField.top
+      const width = to(page.width, x) - lastDrawnField.left
+      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
-   * mouseY - offsetY
+   * x - offsetX
+   * y - offsetY
   *
-   * @param event Mouse event
-   * @param drawnField Which we are moving
+   * @param event Pointer event
+   * @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,
-        mouseY: drawingRectangleCoords.mouseY
+        x: drawingRectangleCoords.x,
+        y: drawingRectangleCoords.y
      }
    })
  }

  /**
-   * Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
-   * @param event Mouse event
+   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
+   * @param event Pointer event
   * @param drawnField which we are moving
+   * @param pageWidth pdf value which is used to calculate scaled offset
   */
-  const onDrawnFieldMouseMove = (
-    event: React.MouseEvent<HTMLDivElement>,
+  const handleDrawnFieldPointerMove = (
+    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 top = to(pageWidth, mouseY - coordsOffset.mouseY)
+        let left = to(pageWidth, x - coordsOffset.x)
+        let top = to(pageWidth, y - coordsOffset.y)

-        const rightLimit = to(pageWidth, rect.width) - drawnField.width - 3
-        const bottomLimit = to(pageWidth, rect.height) - drawnField.height - 3
+        const rightLimit = to(pageWidth, rect.width) - drawnField.width
+        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 drawnField which we are resizing
+   * @param event Pointer event
+   * @param drawnFieldIndex which we are resizing
   */
-  const onResizeHandleMouseDown = (
-    event: React.MouseEvent<HTMLSpanElement>
+  const handleResizePointerDown = (
+    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 = (
-    event: React.MouseEvent<HTMLSpanElement>,
+  const handleResizePointerMove = (
+    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 height = to(pageWidth, mouseY) - drawnField.top
+      const width = to(pageWidth, x) - drawnField.left
+      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 = (
-    event: React.MouseEvent<HTMLSpanElement>,
+  const handleRemovePointerDown = (
+    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 = (
-    event: React.MouseEvent<HTMLDivElement>
-  ) => {
+  const handleUserSelectPointerDown = (event: React.PointerEvent) => {
    event.stopPropagation()
  }

  /**
-   * Gets the mouse coordinates relative to a element in the `event` param
-   * @param event MouseEvent
-   * @param customTarget mouse coordinates relative to this element, if not provided
+   * Gets the pointer coordinates relative to a element in the `event` param
+   * @param event PointerEvent
+   * @param customTarget coordinates relative to this element, if not provided
   * event.target will be used
   */
-  const getMouseCoordinates = (
-    event: React.MouseEvent<HTMLElement>,
+  const getPointerCoordinates = (
+    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 mouseY = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
+    const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
+    const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.

    return {
-      mouseX,
-      mouseY,
+      x,
+      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) => {
-                  onMouseMove(event, page)
+                onPointerMove={(event) => {
+                  handlePointerMove(event, page)
                }}
-                onMouseDown={(event) => {
-                  onMouseDown(event, page)
+                onPointerDown={(event) => {
+                  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}
-                    onMouseMove={(event) => {
-                      onDrawnFieldMouseMove(event, drawnField, page.width)
+                    onPointerDown={(event) =>
+                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
+                    }
+                    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}
-                      onMouseMove={(event) => {
-                        onResizeHandleMouseMove(event, drawnField, page.width)
+                      onPointerDown={(event) =>
+                        handleResizePointerDown(event, drawnFieldIndex)
+                      }
+                      onPointerMove={(event) => {
+                        handleResizePointerMove(event, drawnField, page.width)
                      }}
                      className={styles.resizeHandle}
+                      style={{
+                        background:
+                          mouseState.resizing &&
+                          activeDrawField === drawnFieldIndex
+                            ? 'var(--primary-main)'
+                            : undefined
+                      }}
                    ></span>
                    <span
-                      onMouseDown={(event) => {
-                        onRemoveHandleMouseDown(
+                      onPointerDown={(event) => {
+                        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 (
-      <Box sx={{ width: '100%', textAlign: 'center' }}>
-        <CircularProgress />
-      </Box>
-    )
+    return <LoadingSpinner variant="small" />
  }

  if (!sigitFiles.length) {
--- a/src/components/FileList/index.tsx
+++ b/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}>
-                  {currentUserFile.file.name}
-                </div>
+              <div className={styles.fileName}>{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>
--- a/src/components/FileList/style.module.scss
+++ b/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: auto;
-  padding: 0 5px 0 0;
-  margin: 0 -5px 0 0;
+  overflow-y: auto;
+  overflow-x: none;
 }

 .files::-webkit-scrollbar {
--- a/src/components/Footer/Footer.tsx
+++ b/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')!
+  )
--- a/src/components/LoadingSpinner/index.tsx
+++ b/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>
      )
+  }
 }
--- a/src/components/LoadingSpinner/style.module.scss
+++ b/src/components/LoadingSpinner/style.module.scss
@ -2,34 +2,48 @@

 .loadingSpinnerOverlay {
  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
  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 {
-    background: url('/favicon.png') no-repeat center / cover;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
+  &[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'] {
+    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;
-  margin-top: 13px;
+  width: 100%;
+  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;
--- a/src/components/MarkFormField/style.module.scss
+++ b/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;
--- a/src/components/PDFView/PdfItem.tsx
+++ b/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)}
--- a/src/components/PDFView/PdfMarking.tsx
+++ b/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
--- a/src/components/PDFView/PdfPageItem.tsx
+++ b/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
--- a/src/components/PDFView/index.tsx
+++ b/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>
  )
 }
--- a/src/components/UsersDetails.tsx/index.tsx
+++ b/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>
--- a/src/layouts/Main.tsx
+++ b/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 />
    </>
  )
 }
--- a/src/layouts/StickySideColumns.module.scss
+++ b/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;
-  flex-grow: 1;
+    gap: 30px;
+  }
 }

 .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 {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 15px;
+.scrollAdjust {
+  @media only screen and (max-width: 767px) {
+    max-height: calc(
+      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;
 }
--- a/src/layouts/StickySideColumns.tsx
+++ b/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
-  right?: ReactNode
+  left: 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>
+    </>
  )
 }
--- a/src/layouts/style.module.scss
+++ b/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;
 }
--- a/src/pages/create/index.tsx
+++ b/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) {
-      toast.error(
-        'No signer/viewer is provided. At least add one signer or viewer.'
-      )
+    if (!users.some((u) => u.role === UserRole.signer)) {
+      toast.error('No signer is provided. At least add one signer.')
      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
-                          ? () => {
-                              handleToolSelect(drawTool)
-                            }
-                          : () => null
-                      }
+                      {...(drawTool.active && {
+                        onClick: () => handleToolSelect(drawTool)
+                      })}
                      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}
--- a/src/pages/create/style.module.scss
+++ b/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;
--- a/src/pages/home/index.tsx
+++ b/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>
  )
 }
--- a/src/pages/landing/index.tsx
+++ b/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>
  )
 }
--- a/src/pages/profile/index.tsx
+++ b/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(
-                        profileMetadata.display_name ||
-                          profileMetadata.name ||
-                          hexToNpub(pubkey),
-                        {
-                          length: 16
-                        }
-                      )}
+                      {profileName}
                    </Typography>
                  )}
                </Box>
@ -285,6 +293,7 @@ export const ProfilePage = () => {
          </Box>
        </Container>
      )}
+      <Footer />
    </>
  )
 }
--- a/src/pages/settings/Settings.tsx
+++ b/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 />
+    </>
  )
 }
--- a/src/pages/settings/cache/index.tsx
+++ b/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 />
+    </>
  )
 }
--- a/src/pages/settings/profile/index.tsx
+++ b/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 />
    </>
  )
 }
--- a/src/pages/settings/relays/index.tsx
+++ b/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 />
+    </>
  )
 }
--- a/src/pages/verify/index.tsx
+++ b/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}
--- a/src/styles/sizes.scss
+++ b/src/styles/sizes.scss
@ -2,3 +2,5 @@ $header-height: 65px;
 $body-vertical-padding: 25px;

 $default-container-padding-inline: 10px;
+
+$tabs-height: 40px;
--- a/src/types/drawing.ts
+++ b/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
-    mouseY: number
+    x: 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
--- a/src/utils/pdf.ts
+++ b/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(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url
-).toString()
+import * as PDFJS from 'pdfjs-dist'
+import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
+if (!PDFJS.GlobalWorkerOptions.workerPort) {
+  // 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