fix(create-page): show other file types in content

Closes #147

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 25",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 14",
     "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",

src/components/DrawPDFFields/index.tsx

@@ -1,40 +1,27 @@
-import {
+import { Close } from '@mui/icons-material'
-  AccessTime,
-  CalendarMonth,
-  ExpandMore,
-  Gesture,
-  PictureAsPdf,
-  Badge,
-  Work,
-  Close
-} from '@mui/icons-material'
 import {
   Box,
-  Typography,
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   CircularProgress,
+  Divider,
   FormControl,
   InputLabel,
   MenuItem,
   Select
 } from '@mui/material'
 import styles from './style.module.scss'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import * as PDFJS from 'pdfjs-dist'
-import { ProfileMetadata, User } from '../../types'
+import { ProfileMetadata, User, UserRole } from '../../types'
 import {
   PdfFile,
-  DrawTool,
   MouseState,
   PdfPage,
   DrawnField,
-  MarkType
+  DrawTool
 } from '../../types/drawing'
 import { truncate } from 'lodash'
-import { hexToNpub } from '../../utils'
+import { extractFileExtension, hexToNpub } from '../../utils'
 import { toPdfFiles } from '../../utils/pdf.ts'
 PDFJS.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -46,48 +33,14 @@ interface Props {
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
   onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
+  selectedTool?: DrawTool
 }
 
 export const DrawPDFFields = (props: Props) => {
-  const { selectedFiles } = props
+  const { selectedFiles, selectedTool } = props
 
   const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
   const [parsingPdf, setParsingPdf] = useState<boolean>(false)
-  const [showDrawToolBox, setShowDrawToolBox] = useState<boolean>(false)
-
-  const [selectedTool, setSelectedTool] = useState<DrawTool | null>()
-  const [toolbox] = useState<DrawTool[]>([
-    {
-      identifier: MarkType.SIGNATURE,
-      icon: <Gesture />,
-      label: 'Signature',
-      active: false
-    },
-    {
-      identifier: MarkType.FULLNAME,
-      icon: <Badge />,
-      label: 'Full Name',
-      active: true
-    },
-    {
-      identifier: MarkType.JOBTITLE,
-      icon: <Work />,
-      label: 'Job Title',
-      active: false
-    },
-    {
-      identifier: MarkType.DATE,
-      icon: <CalendarMonth />,
-      label: 'Date',
-      active: false
-    },
-    {
-      identifier: MarkType.DATETIME,
-      icon: <AccessTime />,
-      label: 'Datetime',
-      active: false
-    }
-  ])
 
   const [mouseState, setMouseState] = useState<MouseState>({
     clicked: false
@@ -95,6 +48,16 @@ export const DrawPDFFields = (props: Props) => {
 
   useEffect(() => {
     if (selectedFiles) {
+      /**
+       * Reads the pdf binary files and converts it's pages to images
+       * creates the pdfFiles object and sets to a state
+       */
+      const parsePdfPages = async () => {
+        const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
+
+        setPdfFiles(pdfFiles)
+      }
+
       setParsingPdf(true)
 
       parsePdfPages().finally(() => {
@@ -105,7 +68,7 @@ export const DrawPDFFields = (props: Props) => {
 
   useEffect(() => {
     if (pdfFiles) props.onDrawFieldsChange(pdfFiles)
-  }, [pdfFiles])
+  }, [pdfFiles, props])
 
   /**
    * Drawing events
@@ -132,14 +95,14 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param page PdfPage where press happened
    */
-  const onMouseDown = (event: any, page: PdfPage) => {
+  const onMouseDown = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    page: PdfPage
+  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
-    // Only allow drawing if mouse is not over other drawn element
+    if (!selectedTool) {
-    const isOverPdfImageWrapper = event.target.tagName === 'IMG'
-
-    if (!selectedTool || !isOverPdfImageWrapper) {
       return
     }
 
@@ -185,11 +148,20 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param page PdfPage where moving is happening
    */
-  const onMouseMove = (event: any, page: PdfPage) => {
+  const onMouseMove = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    page: PdfPage
+  ) => {
     if (mouseState.clicked && selectedTool) {
       const lastElementIndex = page.drawnFields.length - 1
+
       const lastDrawnField = page.drawnFields[lastElementIndex]
 
+      // Return early if we don't have lastDrawnField
+      // Issue noticed in the console when dragging out of bounds
+      // to the page below (without releaseing mouse click)
+      if (!lastDrawnField) return
+
       const { mouseX, mouseY } = getMouseCoordinates(event)
 
       const width = mouseX - lastDrawnField.left
@@ -216,7 +188,9 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField Which we are moving
    */
-  const onDrawnFieldMouseDown = (event: any) => {
+  const onDrawnFieldMouseDown = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
     event.stopPropagation()
 
     // Proceed only if left click
@@ -239,11 +213,14 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are moving
    */
-  const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
+  const onDrawnFieldMouseMove = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    drawnField: DrawnField
+  ) => {
     if (mouseState.dragging) {
       const { mouseX, mouseY, rect } = getMouseCoordinates(
         event,
-        event.target.parentNode
+        event.currentTarget.parentElement
       )
       const coordsOffset = mouseState.coordsInWrapper
 
@@ -272,7 +249,9 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are resizing
    */
-  const onResizeHandleMouseDown = (event: any) => {
+  const onResizeHandleMouseDown = (
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>
+  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -288,11 +267,17 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are resizing
    */
-  const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
+  const onResizeHandleMouseMove = (
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
+    drawnField: DrawnField
+  ) => {
     if (mouseState.resizing) {
       const { mouseX, mouseY } = getMouseCoordinates(
         event,
-        event.target.parentNode.parentNode
+        // currentTarget = span handle
+        // 1st parent = drawnField
+        // 2nd parent = img
+        event.currentTarget.parentElement?.parentElement
       )
 
       const width = mouseX - drawnField.left
@@ -313,7 +298,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param drawnFileIndex drawn file index
    */
   const onRemoveHandleMouseDown = (
-    event: any,
+    event: React.MouseEvent<HTMLSpanElement, MouseEvent>,
     pdfFileIndex: number,
     pdfPageIndex: number,
     drawnFileIndex: number
@@ -331,7 +316,9 @@ export const DrawPDFFields = (props: Props) => {
    * so select can work properly
    * @param event Mouse event
    */
-  const onUserSelectHandleMouseDown = (event: any) => {
+  const onUserSelectHandleMouseDown = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ) => {
     event.stopPropagation()
   }
 
@@ -341,8 +328,11 @@ export const DrawPDFFields = (props: Props) => {
    * @param customTarget mouse coordinates relative to this element, if not provided
    * event.target will be used
    */
-  const getMouseCoordinates = (event: any, customTarget?: any) => {
+  const getMouseCoordinates = (
-    const target = customTarget ? customTarget : event.target
+    event: React.MouseEvent<HTMLElement, MouseEvent>,
+    customTarget?: HTMLElement | null
+  ) => {
+    const target = customTarget ? customTarget : event.currentTarget
     const rect = target.getBoundingClientRect()
     const mouseX = event.clientX - rect.left //x position within the element.
     const mouseY = event.clientY - rect.top //y position within the element.
@@ -354,74 +344,26 @@ export const DrawPDFFields = (props: Props) => {
     }
   }
 
-  /**
-   * Reads the pdf binary files and converts it's pages to images
-   * creates the pdfFiles object and sets to a state
-   */
-  const parsePdfPages = async () => {
-    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
-
-    setPdfFiles(pdfFiles)
-  }
-
-  /**
-   *
-   * @returns if expanded pdf accordion is present
-   */
-  const hasExpandedPdf = () => {
-    return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length
-  }
-
-  const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
-    pdfFile.expanded = expanded
-
-    refreshPdfFiles()
-    setShowDrawToolBox(hasExpandedPdf())
-  }
-
-  /**
-   * Changes the drawing tool
-   * @param drawTool to draw with
-   */
-  const handleToolSelect = (drawTool: DrawTool) => {
-    // If clicked on the same tool, unselect
-    if (drawTool.identifier === selectedTool?.identifier) {
-      setSelectedTool(null)
-      return
-    }
-
-    setSelectedTool(drawTool)
-  }
-
   /**
    * Renders the pdf pages and drawing elements
    */
   const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
     return (
-      <Box
+      <>
-        sx={{
-          width: '100%'
-        }}
-      >
         {pdfFile.pages.map((page, pdfPageIndex: number) => {
           return (
             <div
               key={pdfPageIndex}
-              style={{
-                border: '1px solid #c4c4c4',
-                marginBottom: '10px'
-              }}
               className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
-              onMouseMove={(event) => {
-                onMouseMove(event, page)
-              }}
-              onMouseDown={(event) => {
-                onMouseDown(event, page)
-              }}
             >
               <img
+                onMouseMove={(event) => {
+                  onMouseMove(event, page)
+                }}
+                onMouseDown={(event) => {
+                  onMouseDown(event, page)
+                }}
                 draggable="false"
-                style={{ width: '100%' }}
                 src={page.image}
               />
 
@@ -431,7 +373,7 @@ export const DrawPDFFields = (props: Props) => {
                     key={drawnFieldIndex}
                     onMouseDown={onDrawnFieldMouseDown}
                     onMouseMove={(event) => {
-                      onDranwFieldMouseMove(event, drawnField)
+                      onDrawnFieldMouseMove(event, drawnField)
                     }}
                     className={styles.drawingRectangle}
                     style={{
@@ -477,36 +419,38 @@ export const DrawPDFFields = (props: Props) => {
                           labelId="counterparts"
                           label="Counterparts"
                         >
-                          {props.users.map((user, index) => {
+                          {props.users
-                            let displayValue = truncate(
+                            .filter((u) => u.role === UserRole.signer)
-                              hexToNpub(user.pubkey),
+                            .map((user, index) => {
-                              {
+                              let displayValue = truncate(
-                                length: 16
+                                hexToNpub(user.pubkey),
-                              }
-                            )
-
-                            const metadata = props.metadata[user.pubkey]
-
-                            if (metadata) {
-                              displayValue = truncate(
-                                metadata.name ||
-                                  metadata.display_name ||
-                                  metadata.username,
                                 {
                                   length: 16
                                 }
                               )
-                            }
 
-                            return (
+                              const metadata = props.metadata[user.pubkey]
-                              <MenuItem
+
-                                key={index}
+                              if (metadata) {
-                                value={hexToNpub(user.pubkey)}
+                                displayValue = truncate(
-                              >
+                                  metadata.name ||
-                                {displayValue}
+                                    metadata.display_name ||
-                              </MenuItem>
+                                    metadata.username,
-                            )
+                                  {
-                          })}
+                                    length: 16
+                                  }
+                                )
+                              }
+
+                              return (
+                                <MenuItem
+                                  key={index}
+                                  value={hexToNpub(user.pubkey)}
+                                >
+                                  {displayValue}
+                                </MenuItem>
+                              )
+                            })}
                         </Select>
                       </FormControl>
                     </div>
@@ -516,7 +460,7 @@ export const DrawPDFFields = (props: Props) => {
             </div>
           )
         })}
-      </Box>
+      </>
     )
   }
 
@@ -533,57 +477,38 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   return (
-    <Box>
+    <div className={styles.view}>
-      <Box sx={{ mt: 1 }}>
+      {selectedFiles.map((file, i) => {
-        <Typography sx={{ mb: 1 }}>Draw fields on the PDFs:</Typography>
+        const name = file.name
-
+        const extension = extractFileExtension(name)
-        {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
+        const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
-          return (
+        return (
-            <Accordion
+          <React.Fragment key={name}>
-              key={pdfFileIndex}
+            <div
-              expanded={pdfFile.expanded}
+              className={`${styles.fileWrapper} ${styles.scrollTarget}`}
-              onChange={(_event, expanded) => {
+              id={`file-${name}`}
-                handleAccordionExpandChange(expanded, pdfFile)
-              }}
             >
-              <AccordionSummary
+              {pdfFile ? (
-                expandIcon={<ExpandMore />}
+                getPdfPages(pdfFile, i)
-                aria-controls={`panel${pdfFileIndex}-content`}
+              ) : (
-                id={`panel${pdfFileIndex}header`}
+                <div className={styles.otherFile}>
+                  This is a {extension} file
+                </div>
+              )}
+            </div>
+            {i < selectedFiles.length - 1 && (
+              <Divider
+                sx={{
+                  fontSize: '12px',
+                  color: 'rgba(0,0,0,0.15)'
+                }}
               >
-                <PictureAsPdf sx={{ mr: 1 }} />
+                File Separator
-                {pdfFile.file.name}
+              </Divider>
-              </AccordionSummary>
+            )}
-              <AccordionDetails>
+          </React.Fragment>
-                {getPdfPages(pdfFile, pdfFileIndex)}
+        )
-              </AccordionDetails>
+      })}
-            </Accordion>
+    </div>
-          )
-        })}
-      </Box>
-
-      {showDrawToolBox && (
-        <Box className={styles.drawToolBoxContainer}>
-          <Box className={styles.drawToolBox}>
-            {toolbox
-              .filter((drawTool) => drawTool.active)
-              .map((drawTool: DrawTool, index: number) => {
-                return (
-                  <Box
-                    key={index}
-                    onClick={() => {
-                      handleToolSelect(drawTool)
-                    }}
-                    className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
-                  >
-                    {drawTool.icon}
-                    {drawTool.label}
-                  </Box>
-                )
-              })}
-          </Box>
-        </Box>
-      )}
-    </Box>
   )
 }

src/components/DrawPDFFields/style.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/sizes.scss';
+
 .pdfFieldItem {
   background: white;
   padding: 10px;
@@ -5,53 +7,10 @@
   cursor: pointer;
 }
 
-.drawToolBoxContainer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  z-index: 50;
-
-  .drawToolBox {
-    display: flex;
-    gap: 10px;
-    min-width: 100px;
-    background-color: white;
-    padding: 15px;
-    box-shadow: 0 0 10px 1px #0000003b;
-    border-radius: 4px;
-
-    .toolItem {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      border: 1px solid rgba(0, 0, 0, 0.137);
-      padding: 5px;
-      cursor: pointer;
-      -webkit-user-select: none;
-      user-select: none;
-
-      &.selected {
-        border-color: #01aaad;
-        color: #01aaad;
-      }
-
-      &:not(.selected) {
-        &:hover {
-          border-color: #01aaad79;
-        }
-      }
-    }
-  }
-}
-
 .pdfImageWrapper {
   position: relative;
   -webkit-user-select: none;
   user-select: none;
-  margin-bottom: 10px;
 
   > img {
     display: block;
@@ -81,7 +40,7 @@
   }
 
   &.edited {
-    border: 1px dotted #01aaad
+    border: 1px dotted #01aaad;
   }
 
   .resizeHandle {
@@ -93,7 +52,14 @@
     background-color: #fff;
     border: 1px solid rgb(160, 160, 160);
     border-radius: 50%;
-    cursor: pointer;
+    cursor: nwse-resize;
+
+    // Increase the area a bit so it's easier to click
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -14px;
+    }
   }
 
   .removeHandle {
@@ -124,3 +90,29 @@
     padding: 5px 0;
   }
 }
+
+.fileWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  position: relative;
+  scroll-margin-top: $header-height + $body-vertical-padding;
+}
+
+.view {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.otherFile {
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+}

src/components/FileList/index.tsx

@@ -1,6 +1,8 @@
 import { CurrentUserFile } from '../../types/file.ts'
 import styles from './style.module.scss'
 import { Button } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
 
 interface FileListProps {
   files: CurrentUserFile[]
@@ -26,8 +28,14 @@ const FileList = ({
               className={`${styles.fileItem} ${isActive(file) && styles.active}`}
               onClick={() => setCurrentFile(file)}
             >
-              <span className={styles.fileNumber}>{file.id}</span>
+              <div className={styles.fileNumber}>{file.id}</div>
-              <span className={styles.fileName}>{file.filename}</span>
+              <div className={styles.fileInfo}>
+                <div className={styles.fileName}>{file.filename}</div>
+              </div>
+
+              <div className={styles.fileVisual}>
+                {file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
+              </div>
             </li>
           ))}
         </ul>

src/components/FileList/style.module.scss

@@ -17,10 +17,15 @@
 
 ul {
   list-style-type: none; /* Removes bullet points */
-  margin: 0;             /* Removes default margin */
+  margin: 0; /* Removes default margin */
-  padding: 0;            /* Removes default padding */
+  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;
@@ -44,7 +49,7 @@ ul {
 }
 
 .files::-webkit-scrollbar-track {
-  background-color: rgba(0,0,0,0.15);
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
 .files::-webkit-scrollbar-thumb {
@@ -64,12 +69,12 @@ ul {
   background: #ffffff;
   padding: 5px 10px;
   align-items: center;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   flex-grow: 1;
   font-size: 16px;
   font-weight: 500;
-
+  min-height: 45px;
 
   &.active {
     background: #4c82a3;
@@ -78,16 +83,22 @@ ul {
 }
 
 .fileItem:hover {
-  transition: ease 0.2s;
   background: #4c82a3;
   color: white;
 }
 
+.fileInfo {
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 500;
+}
+
 .fileName {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
   -webkit-line-clamp: 1;
+  line-clamp: 1;
 }
 
 .fileNumber {
@@ -97,4 +108,15 @@ ul {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 10px;
+}
+
+.fileVisual {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 25px;
+  width: 25px;
 }

src/components/MarkFormField/style.module.scss

@@ -8,6 +8,39 @@
   left: 0;
   align-items: center;
   z-index: 1000;
+
+  button {
+    transition: ease 0.2s;
+    width: auto;
+    border-radius: 4px;
+    outline: unset;
+    border: unset;
+    background: unset;
+    color: #ffffff;
+    background: #4c82a3;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 8px 15px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 12px;
+    justify-content: center;
+    align-items: center;
+    text-decoration: unset;
+    position: relative;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #5e8eab;
+    color: white;
+  }
+
+  button:active {
+    background: #447592;
+    color: white;
+  }
 }
 
 .actions {
@@ -19,7 +52,7 @@
   flex-direction: column;
   align-items: center;
   grid-gap: 15px;
-  box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
+  box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
   max-width: 750px;
 
   &.expanded {
@@ -73,7 +106,7 @@
 
 .textInput {
   height: 100px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   border: solid 2px #4c82a3;
   display: flex;
@@ -84,17 +117,19 @@
 
 .input {
   border-radius: 4px;
-  border: solid 1px rgba(0,0,0,0.15);
+  border: solid 1px rgba(0, 0, 0, 0.15);
   padding: 5px 10px;
   font-size: 16px;
   width: 100%;
-  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
+    linear-gradient(white, white);
 }
 
 .input:focus {
-  border: solid 1px rgba(0,0,0,0.15);
+  border: solid 1px rgba(0, 0, 0, 0.15);
   outline: none;
-  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
+  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
+    linear-gradient(white, white);
 }
 
 .actionsBottom {
@@ -105,41 +140,6 @@
   align-items: center;
 }
 
-button {
-  transition: ease 0.2s;
-  width: auto;
-  border-radius: 4px;
-  outline: unset;
-  border: unset;
-  background: unset;
-  color: #ffffff;
-  background: #4c82a3;
-  font-weight: 500;
-  font-size: 14px;
-  padding: 8px 15px;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  grid-gap: 12px;
-  justify-content: center;
-  align-items: center;
-  text-decoration: unset;
-  position: relative;
-  cursor: pointer;
-}
-
-button:hover {
-  transition: ease 0.2s;
-  background: #5e8eab;
-  color: white;
-}
-
-button:active {
-  transition: ease 0.2s;
-  background: #447592;
-  color: white;
-}
-
 .submitButton {
   width: 100%;
   max-width: 300px;
@@ -172,18 +172,18 @@ button:active {
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 3px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.1);
-  color: rgba(0,0,0,0.5);
+  color: rgba(0, 0, 0, 0.5);
 }
 
 .paginationButton:hover {
   background: #447592;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .paginationButtonDone {
   background: #5e8eab;
-  color: rgb(255,255,255);
+  color: rgb(255, 255, 255);
 }
 
 .paginationButtonCurrent {
@@ -204,7 +204,7 @@ button:active {
   background: white;
   color: #434343;
   padding: 5px 30px;
-  box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
+  box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
   position: absolute;
   top: -25px;
 }

src/components/UserAvatar/index.tsx

@@ -30,7 +30,7 @@ export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
           padding: 0
         }}
       />
-      {name ? <label className={styles.username}>{name}</label> : null}
+      {name ? <span className={styles.username}>{name}</span> : null}
     </Link>
   )
 }

src/components/UserAvatar/styles.module.scss

@@ -10,4 +10,8 @@
   font-weight: 500;
   font-size: 14px;
   color: var(--text-color);
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

src/layouts/StickySideColumns.module.scss

@@ -10,6 +10,9 @@
 
 .sidesWrap {
   position: relative;
+
+  // HACK: Stop grid column from growing
+  min-width: 0;
 }
 
 .sides {

src/pages/create/index.tsx

@@ -1,27 +1,16 @@
-import { Clear, DragHandle } from '@mui/icons-material'
 import {
-  Box,
   Button,
-  FormControl,
+  FormHelperText,
-  IconButton,
+  ListItemIcon,
-  InputLabel,
+  ListItemText,
   MenuItem,
-  Paper,
   Select,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
   TextField,
-  Tooltip,
+  Tooltip
-  Typography
 } from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
-import { MuiFileInput } from 'mui-file-input'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
@@ -61,14 +50,46 @@ import {
 } from '../../utils'
 import { Container } from '../../components/Container'
 import styles from './style.module.scss'
-import { PdfFile } from '../../types/drawing'
+import fileListStyles from '../../components/FileList/style.module.scss'
+import { DrawTool, MarkType, PdfFile } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
+import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  fa1,
+  faBriefcase,
+  faCalendarDays,
+  faCheckDouble,
+  faCircleDot,
+  faClock,
+  faCreditCard,
+  faEllipsis,
+  faEye,
+  faGripLines,
+  faHeading,
+  faIdCard,
+  faImage,
+  faPaperclip,
+  faPen,
+  faPhone,
+  faPlus,
+  faSignature,
+  faSquareCaretDown,
+  faSquareCheck,
+  faStamp,
+  faT,
+  faTableCellsLarge,
+  faTrash,
+  faUpload
+} from '@fortawesome/free-solid-svg-icons'
 
 export const CreatePage = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const { uploadedFiles } = location.state || {}
+  const [currentFile, setCurrentFile] = useState<File>()
+  const isActive = (file: File) => file.name === currentFile?.name
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -76,9 +97,22 @@ export const CreatePage = () => {
   const [authUrl, setAuthUrl] = useState<string>()
 
   const [title, setTitle] = useState(`sigit_${formatTimestamp(Date.now())}`)
+
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const handleUploadButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click()
+    }
+  }
 
   const [userInput, setUserInput] = useState('')
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      event.preventDefault()
+      handleAddUser()
+    }
+  }
   const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
   const [error, setError] = useState<string>()
 
@@ -93,6 +127,132 @@ export const CreatePage = () => {
   )
   const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([])
 
+  const [selectedTool, setSelectedTool] = useState<DrawTool>()
+  const [toolbox] = useState<DrawTool[]>([
+    {
+      identifier: MarkType.TEXT,
+      icon: <FontAwesomeIcon icon={faT} />,
+      label: 'Text',
+      active: false
+    },
+    {
+      identifier: MarkType.SIGNATURE,
+      icon: <FontAwesomeIcon icon={faSignature} />,
+      label: 'Signature',
+      active: false
+    },
+    {
+      identifier: MarkType.JOBTITLE,
+      icon: <FontAwesomeIcon icon={faBriefcase} />,
+      label: 'Job Title',
+      active: false
+    },
+    {
+      identifier: MarkType.FULLNAME,
+      icon: <FontAwesomeIcon icon={faIdCard} />,
+      label: 'Full Name',
+      active: true
+    },
+    {
+      identifier: MarkType.INITIALS,
+      icon: <FontAwesomeIcon icon={faHeading} />,
+      label: 'Initials',
+      active: false
+    },
+    {
+      identifier: MarkType.DATETIME,
+      icon: <FontAwesomeIcon icon={faClock} />,
+      label: 'Date Time',
+      active: false
+    },
+    {
+      identifier: MarkType.DATE,
+      icon: <FontAwesomeIcon icon={faCalendarDays} />,
+      label: 'Date',
+      active: false
+    },
+    {
+      identifier: MarkType.NUMBER,
+      icon: <FontAwesomeIcon icon={fa1} />,
+      label: 'Number',
+      active: false
+    },
+    {
+      identifier: MarkType.IMAGES,
+      icon: <FontAwesomeIcon icon={faImage} />,
+      label: 'Images',
+      active: false
+    },
+    {
+      identifier: MarkType.CHECKBOX,
+      icon: <FontAwesomeIcon icon={faSquareCheck} />,
+      label: 'Checkbox',
+      active: false
+    },
+    {
+      identifier: MarkType.MULTIPLE,
+      icon: <FontAwesomeIcon icon={faCheckDouble} />,
+      label: 'Multiple',
+      active: false
+    },
+    {
+      identifier: MarkType.FILE,
+      icon: <FontAwesomeIcon icon={faPaperclip} />,
+      label: 'File',
+      active: false
+    },
+    {
+      identifier: MarkType.RADIO,
+      icon: <FontAwesomeIcon icon={faCircleDot} />,
+      label: 'Radio',
+      active: false
+    },
+    {
+      identifier: MarkType.SELECT,
+      icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
+      label: 'Select',
+      active: false
+    },
+    {
+      identifier: MarkType.CELLS,
+      icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
+      label: 'Cells',
+      active: false
+    },
+    {
+      identifier: MarkType.STAMP,
+      icon: <FontAwesomeIcon icon={faStamp} />,
+      label: 'Stamp',
+      active: false
+    },
+    {
+      identifier: MarkType.PAYMENT,
+      icon: <FontAwesomeIcon icon={faCreditCard} />,
+      label: 'Payment',
+      active: false
+    },
+    {
+      identifier: MarkType.PHONE,
+      icon: <FontAwesomeIcon icon={faPhone} />,
+      label: 'Phone',
+      active: false
+    }
+  ])
+
+  /**
+   * Changes the drawing tool
+   * @param drawTool to draw with
+   */
+  const handleToolSelect = (drawTool: DrawTool) => {
+    // If clicked on the same tool, unselect
+    if (drawTool.identifier === selectedTool?.identifier) {
+      setSelectedTool(undefined)
+      return
+    }
+
+    setSelectedTool(drawTool)
+  }
+
   useEffect(() => {
     users.forEach((user) => {
       if (!(user.pubkey in metadata)) {
@@ -268,19 +428,22 @@ export const CreatePage = () => {
     })
   }
 
-  const handleSelectFiles = (files: File[]) => {
+  const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedFiles((prev) => {
+    if (event.target.files) {
-      const prevFileNames = prev.map((file) => file.name)
+      setSelectedFiles(Array.from(event.target.files))
-
+    }
-      const newFiles = files.filter(
-        (file) => !prevFileNames.includes(file.name)
-      )
-
-      return [...prev, ...newFiles]
-    })
   }
 
-  const handleRemoveFile = (fileToRemove: File) => {
+  const handleFileClick = (id: string) => {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  const handleRemoveFile = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    fileToRemove: File
+  ) => {
+    event.stopPropagation()
+
     setSelectedFiles((prevFiles) =>
       prevFiles.filter((file) => file.name !== fileToRemove.name)
     )
@@ -702,94 +865,200 @@ export const CreatePage = () => {
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <Container className={styles.container}>
-        <TextField
+        <StickySideColumns
-          label="Title"
+          left={
-          value={title}
+            <div className={styles.flexWrap}>
-          onChange={(e) => setTitle(e.target.value)}
+              <div className={styles.inputWrapper}>
-          variant="outlined"
+                <TextField
-        />
+                  placeholder="Title"
-
+                  size="small"
-        <Box>
+                  type="text"
-          <MuiFileInput
+                  value={title}
-            fullWidth
+                  onChange={(e) => setTitle(e.target.value)}
-            multiple
+                  sx={{
-            placeholder="Choose Files"
+                    width: '100%',
-            value={selectedFiles}
+                    fontSize: '16px',
-            onChange={(value) => handleSelectFiles(value)}
+                    '& .MuiInputBase-input': {
-          />
+                      padding: '7px 14px'
-
+                    },
-          {selectedFiles.length > 0 && (
+                    '& .MuiOutlinedInput-notchedOutline': {
-            <ul>
+                      display: 'none'
-              {selectedFiles.map((file, index) => (
+                    }
-                <li key={index}>
+                  }}
-                  <Typography component="label">{file.name}</Typography>
+                />
-                  <IconButton onClick={() => handleRemoveFile(file)}>
+              </div>
-                    <Clear style={{ color: 'red' }} />{' '}
+              <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
-                  </IconButton>
+                {selectedFiles.length > 0 &&
-                </li>
+                  selectedFiles.map((file, index) => (
-              ))}
+                    <div
-            </ul>
+                      key={index}
-          )}
+                      className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
-        </Box>
+                      onClick={() => {
-
+                        handleFileClick('file-' + file.name)
-        <Typography component="label" variant="h6">
+                        setCurrentFile(file)
-          Add Counterparts
+                      }}
-        </Typography>
+                    >
-        <Box className={styles.inputBlock}>
+                      <>
-          <Box className={styles.inputBlock}>
+                        <span className={styles.fileName}>{file.name}</span>
-            <TextField
+                        <Button
-              label="nip05 / npub"
+                          variant="text"
-              value={userInput}
+                          onClick={(event) => handleRemoveFile(event, file)}
-              onChange={(e) => setUserInput(e.target.value)}
+                          sx={{
-              helperText={error}
+                            minWidth: '44px'
-              error={!!error}
+                          }}
-            />
+                        >
-            <FormControl fullWidth>
+                          <FontAwesomeIcon icon={faTrash} />
-              <InputLabel id="select-role-label">Role</InputLabel>
+                        </Button>
-              <Select
+                      </>
-                labelId="select-role-label"
+                    </div>
-                id="demo-simple-select"
+                  ))}
-                value={userRole}
+              </ol>
-                label="Role"
+              <Button variant="contained" onClick={handleUploadButtonClick}>
-                onChange={(e) => setUserRole(e.target.value as UserRole)}
+                <FontAwesomeIcon icon={faUpload} />
-              >
+                <span className={styles.uploadFileText}>Upload new files</span>
-                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+                <input
-                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+                  ref={fileInputRef}
-              </Select>
+                  hidden={true}
-            </FormControl>
+                  multiple={true}
-
+                  type="file"
-            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  onChange={handleSelectFiles}
-              <Button
+                />
-                disabled={!userInput}
-                onClick={handleAddUser}
-                variant="contained"
-              >
-                Add
               </Button>
-            </Box>
+            </div>
-          </Box>
+          }
-        </Box>
+          right={
+            <div className={styles.flexWrap}>
+              <div className={styles.inputWrapper}>
+                <TextField
+                  placeholder="User (nip05 / npub)"
+                  value={userInput}
+                  onChange={(e) => setUserInput(e.target.value)}
+                  onKeyDown={handleInputKeyDown}
+                  error={!!error}
+                  fullWidth
+                  sx={{
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
+                />
+                <Select
+                  name="add-user-role"
+                  aria-label="role"
+                  value={userRole}
+                  variant="filled"
+                  // Hide arrow for dropdown
+                  IconComponent={() => null}
+                  renderValue={(value) => (
+                    <FontAwesomeIcon
+                      color="var(--primary-main)"
+                      icon={value === UserRole.signer ? faPen : faEye}
+                    />
+                  )}
+                  onChange={(e) => setUserRole(e.target.value as UserRole)}
+                  sx={{
+                    fontSize: '16px',
+                    minWidth: '44px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px!important',
+                      textOverflow: 'unset!important'
+                    }
+                  }}
+                >
+                  <MenuItem value={UserRole.signer}>
+                    <ListItemIcon>
+                      <FontAwesomeIcon icon={faPen} />
+                    </ListItemIcon>
+                    <ListItemText>{UserRole.signer}</ListItemText>
+                  </MenuItem>
+                  <MenuItem value={UserRole.viewer} sx={{}}>
+                    <ListItemIcon>
+                      <FontAwesomeIcon icon={faEye} />
+                    </ListItemIcon>
+                    <ListItemText>{UserRole.viewer}</ListItemText>
+                  </MenuItem>
+                </Select>
+                <Button
+                  disabled={!userInput}
+                  onClick={handleAddUser}
+                  variant="contained"
+                  aria-label="Add"
+                  sx={{
+                    minWidth: '44px',
+                    padding: '11.5px 12px',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPlus} />
+                </Button>
+              </div>
 
-        <DisplayUser
+              <div className={styles.paperGroup}>
-          metadata={metadata}
+                <DisplayUser
-          users={users}
+                  metadata={metadata}
-          handleUserRoleChange={handleUserRoleChange}
+                  users={users}
-          handleRemoveUser={handleRemoveUser}
+                  handleUserRoleChange={handleUserRoleChange}
-          moveSigner={moveSigner}
+                  handleRemoveUser={handleRemoveUser}
-        />
+                  moveSigner={moveSigner}
+                />
+              </div>
 
-        <DrawPDFFields
+              <Button onClick={handleCreate} variant="contained">
-          metadata={metadata}
+                Publish
-          users={users}
+              </Button>
-          selectedFiles={selectedFiles}
-          onDrawFieldsChange={onDrawFieldsChange}
-        />
 
-        <Box sx={{ mt: 1, mb: 5, display: 'flex', justifyContent: 'center' }}>
+              <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-          <Button onClick={handleCreate} variant="contained">
+                {toolbox.map((drawTool: DrawTool, index: number) => {
-            Create
+                  return (
-          </Button>
+                    <div
-        </Box>
+                      key={index}
+                      onClick={
+                        drawTool.active
+                          ? () => {
+                              handleToolSelect(drawTool)
+                            }
+                          : () => null
+                      }
+                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
+                      `}
+                    >
+                      {drawTool.icon}
+                      {drawTool.label}
+                      {drawTool.active ? (
+                        <FontAwesomeIcon icon={faEllipsis} />
+                      ) : (
+                        <span
+                          style={{
+                            fontSize: '10px'
+                          }}
+                        >
+                          Coming soon
+                        </span>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+
+              {!!error && (
+                <FormHelperText error={!!error}>{error}</FormHelperText>
+              )}
+            </div>
+          }
+        >
+          <DrawPDFFields
+            metadata={metadata}
+            users={users}
+            selectedFiles={selectedFiles}
+            onDrawFieldsChange={onDrawFieldsChange}
+            selectedTool={selectedTool}
+          />
+        </StickySideColumns>
       </Container>
     </>
   )
@@ -811,80 +1080,93 @@ const DisplayUser = ({
   moveSigner
 }: DisplayUsersProps) => {
   return (
-    <TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
+    <>
-      <Table>
+      <DndProvider backend={HTML5Backend}>
-        <TableHead>
+        {users
-          <TableRow>
+          .filter((user) => user.role === UserRole.signer)
-            <TableCell className={styles.tableHeaderCell}>User</TableCell>
+          .map((user, index) => (
-            <TableCell className={styles.tableHeaderCell}>Role</TableCell>
+            <SignerRow
-            <TableCell>Action</TableCell>
+              key={`signer-${index}`}
-          </TableRow>
+              userMeta={metadata[user.pubkey]}
-        </TableHead>
+              user={user}
-        <TableBody>
+              index={index}
-          <DndProvider backend={HTML5Backend}>
+              moveSigner={moveSigner}
-            {users
+              handleUserRoleChange={handleUserRoleChange}
-              .filter((user) => user.role === UserRole.signer)
+              handleRemoveUser={handleRemoveUser}
-              .map((user, index) => (
+            />
-                <SignerRow
+          ))}
-                  key={`signer-${index}`}
+      </DndProvider>
-                  userMeta={metadata[user.pubkey]}
+      {users
-                  user={user}
+        .filter((user) => user.role === UserRole.viewer)
-                  index={index}
+        .map((user, index) => {
-                  moveSigner={moveSigner}
+          const userMeta = metadata[user.pubkey]
-                  handleUserRoleChange={handleUserRoleChange}
+          return (
-                  handleRemoveUser={handleRemoveUser}
+            <div className={styles.user} key={index}>
+              <div className={styles.avatar}>
+                <UserAvatar
+                  pubkey={user.pubkey}
+                  name={
+                    userMeta?.display_name ||
+                    userMeta?.name ||
+                    shorten(hexToNpub(user.pubkey))
+                  }
+                  image={userMeta?.picture}
                 />
-              ))}
+              </div>
-          </DndProvider>
+              <Select
-          {users
+                name={`change-user-role-${user.pubkey}`}
-            .filter((user) => user.role === UserRole.viewer)
+                aria-label="role"
-            .map((user, index) => {
+                value={user.role}
-              const userMeta = metadata[user.pubkey]
+                variant="outlined"
-              return (
+                IconComponent={() => null}
-                <TableRow key={index}>
+                renderValue={(value) => (
-                  <TableCell className={styles.tableCell}>
+                  <FontAwesomeIcon
-                    <UserAvatar
+                    fontSize={'14px'}
-                      pubkey={user.pubkey}
+                    color="var(--primary-main)"
-                      name={
+                    icon={value === UserRole.signer ? faPen : faEye}
-                        userMeta?.display_name ||
+                  />
-                        userMeta?.name ||
+                )}
-                        shorten(hexToNpub(user.pubkey))
+                onChange={(e) =>
-                      }
+                  handleUserRoleChange(e.target.value as UserRole, user.pubkey)
-                      image={userMeta?.picture}
+                }
-                    />
+                sx={{
-                  </TableCell>
+                  fontSize: '16px',
-                  <TableCell className={styles.tableCell}>
+                  minWidth: '34px',
-                    <Select
+                  maxWidth: '34px',
-                      fullWidth
+                  minHeight: '34px',
-                      value={user.role}
+                  maxHeight: '34px',
-                      onChange={(e) =>
+                  '& .MuiInputBase-input': {
-                        handleUserRoleChange(
+                    padding: '10px !important',
-                          e.target.value as UserRole,
+                    textOverflow: 'unset!important'
-                          user.pubkey
+                  },
-                        )
+                  '& .MuiOutlinedInput-notchedOutline': {
-                      }
+                    display: 'none'
-                    >
+                  }
-                      <MenuItem value={UserRole.signer}>
+                }}
-                        {UserRole.signer}
+              >
-                      </MenuItem>
+                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
-                      <MenuItem value={UserRole.viewer}>
+                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
-                        {UserRole.viewer}
+              </Select>
-                      </MenuItem>
+              <Tooltip title="Remove User" arrow>
-                    </Select>
+                <Button
-                  </TableCell>
+                  onClick={() => handleRemoveUser(user.pubkey)}
-                  <TableCell>
+                  sx={{
-                    <Tooltip title="Remove User" arrow>
+                    minWidth: '34px',
-                      <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
+                    height: '34px',
-                        <Clear style={{ color: 'red' }} />
+                    padding: 0,
-                      </IconButton>
+                    color: 'rgba(0, 0, 0, 0.35)',
-                    </Tooltip>
+                    '&:hover': {
-                  </TableCell>
+                      color: 'white'
-                </TableRow>
+                    }
-              )
+                  }}
-            })}
+                >
-        </TableBody>
+                  <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
-      </Table>
+                </Button>
-    </TableContainer>
+              </Tooltip>
+            </div>
+          )
+        })}
+    </>
   )
 }
 
@@ -988,16 +1270,14 @@ const SignerRow = ({
   drag(drop(ref))
 
   return (
-    <TableRow
+    <div
-      sx={{ cursor: 'move', opacity }}
+      className={styles.user}
+      style={{ cursor: 'move', opacity }}
       data-handler-id={handlerId}
       ref={ref}
     >
-      <TableCell
+      <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
-        className={styles.tableCell}
+      <div className={styles.avatar}>
-        sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
-      >
-        <DragHandle />
         <UserAvatar
           pubkey={user.pubkey}
           name={
@@ -1007,26 +1287,57 @@ const SignerRow = ({
           }
           image={userMeta?.picture}
         />
-      </TableCell>
+      </div>
-      <TableCell className={styles.tableCell}>
+      <Select
-        <Select
+        name={`change-user-role-${user.pubkey}`}
-          fullWidth
+        aria-label="role"
-          value={user.role}
+        value={user.role}
-          onChange={(e) =>
+        variant="outlined"
-            handleUserRoleChange(e.target.value as UserRole, user.pubkey)
+        IconComponent={() => null}
+        renderValue={(value) => (
+          <FontAwesomeIcon
+            fontSize={'14px'}
+            color="var(--primary-main)"
+            icon={value === UserRole.signer ? faPen : faEye}
+          />
+        )}
+        onChange={(e) =>
+          handleUserRoleChange(e.target.value as UserRole, user.pubkey)
+        }
+        sx={{
+          fontSize: '16px',
+          minWidth: '34px',
+          maxWidth: '34px',
+          minHeight: '34px',
+          maxHeight: '34px',
+          '& .MuiInputBase-input': {
+            padding: '10px !important',
+            textOverflow: 'unset!important'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none'
           }
+        }}
+      >
+        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+      </Select>
+      <Tooltip title="Remove User" arrow>
+        <Button
+          onClick={() => handleRemoveUser(user.pubkey)}
+          sx={{
+            minWidth: '34px',
+            height: '34px',
+            padding: 0,
+            color: 'rgba(0, 0, 0, 0.35)',
+            '&:hover': {
+              color: 'white'
+            }
+          }}
         >
-          <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
-          <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+        </Button>
-        </Select>
+      </Tooltip>
-      </TableCell>
+    </div>
-      <TableCell>
-        <Tooltip title="Remove User" arrow>
-          <IconButton onClick={() => handleRemoveUser(user.pubkey)}>
-            <Clear style={{ color: 'red' }} />
-          </IconButton>
-        </Tooltip>
-      </TableCell>
-    </TableRow>
   )
 }

src/pages/create/style.module.scss

@@ -1,41 +1,176 @@
 @import '../../styles/colors.scss';
 
-.container {
+.flexWrap {
   display: flex;
   flex-direction: column;
-  color: $text-color;
+  gap: 15px;
-  margin-top: 10px;
-  gap: 10px;
-  width: 550px;
-  max-width: 550px;
-
-  .inputBlock {
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-  }
 }
 
-.subHeader {
+.orderedFilesList {
-  border-bottom: 0.5px solid;
+  counter-reset: item;
-}
+  list-style-type: none;
+  margin: 0;
 
-.tableHeaderCell {
+  li {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-}
-
-.tableCell {
-  border-right: 1px solid rgba(224, 224, 224, 1);
-  height: 56px;
-
-  .user {
     display: flex;
     align-items: center;
+
+    transition: ease 0.4s;
+    border-radius: 4px;
+    background: #ffffff;
+    padding: 7px 10px;
+    color: rgba(0, 0, 0, 0.5);
+    min-height: 45px;
+    cursor: pointer;
     gap: 10px;
 
-    .name {
+    &::before {
-      text-align: center;
+      content: counter(item) ' ';
-      cursor: pointer;
+      counter-increment: item;
+      font-size: 14px;
+    }
+    :nth-child(1) {
+      flex-grow: 1;
+
+      font-size: 16px;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    button {
+      color: $primary-main;
+    }
+
+    &:hover,
+    &.active,
+    &:focus-within {
+      background: $primary-main;
+      color: white;
+
+      button {
+        color: white;
+      }
     }
   }
 }
+
+.uploadFileText {
+  margin-left: 12px;
+}
+
+.paperGroup {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  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;
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+
+  height: 34px;
+  overflow: hidden;
+  border-radius: 4px;
+  outline: solid 1px #dddddd;
+  background: white;
+
+  width: 100%;
+
+  &:focus-within {
+    outline-color: $primary-main;
+  }
+}
+
+.user {
+  display: flex;
+  gap: 10px;
+
+  font-size: 14px;
+  text-align: start;
+  justify-content: center;
+  align-items: center;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.avatar {
+  flex-grow: 1;
+  min-width: 0;
+
+  &:first-child {
+    margin-left: 24px;
+  }
+
+  img {
+    // Override the default avatar size
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.fileName {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.toolbox {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 15px;
+
+  max-height: 450px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.toolItem {
+  width: 90px;
+  height: 90px;
+
+  transition: ease 0.2s;
+  display: inline-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);
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &.selected {
+    background: $primary-main;
+    color: white;
+  }
+
+  &:not(.selected) {
+    &:hover {
+      background: $primary-light;
+      color: white;
+    }
+  }
+
+  &.comingSoon {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

src/pages/home/index.tsx

@@ -225,11 +225,11 @@ export const HomePage = () => {
           type="button"
           aria-label="upload files"
         >
-          <input {...getInputProps()} />
+          <input id="file-upload" {...getInputProps()} />
           {isDragActive ? (
-            <p>Drop the files here ...</p>
+            <label htmlFor="file-upload">Drop the files here ...</label>
           ) : (
-            <p>Click or drag files to upload!</p>
+            <label htmlFor="file-upload">Click or drag files to upload!</label>
           )}
         </button>
         <div className={styles.submissions}>

src/pages/sign/index.tsx

@@ -952,7 +952,7 @@ export const SignPage = () => {
 
   return (
     <PdfMarking
-      files={getCurrentUserFiles(files, currentFileHashes)}
+      files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
       currentUserMarks={currentUserMarks}
       setIsReadyToSign={setIsReadyToSign}
       setCurrentUserMarks={setCurrentUserMarks}

src/pages/verify/index.tsx

@@ -170,17 +170,23 @@ export const VerifyPage = () => {
 
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
-  }>(fileHashes)
+  }>({})
   const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
   const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
+  const [signatureFileHashes, setSignatureFileHashes] = useState<{
+    [key: string]: string
+  }>(fileHashes)
+
+  useEffect(() => {
+    setSignatureFileHashes(fileHashes)
+  }, [fileHashes])
 
   useEffect(() => {
     if (Object.entries(files).length > 0) {
-      const tmp = getCurrentUserFiles(files, fileHashes)
+      const tmp = getCurrentUserFiles(files, fileHashes, signatureFileHashes)
-
       setCurrentFile(tmp[0])
     }
-  }, [fileHashes, files])
+  }, [signatureFileHashes, fileHashes, files])
 
   const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
   const nostrController = NostrController.getInstance()
@@ -524,7 +530,11 @@ export const VerifyPage = () => {
               <>
                 {currentFile !== null && (
                   <FileList
-                    files={getCurrentUserFiles(files, currentFileHashes)}
+                    files={getCurrentUserFiles(
+                      files,
+                      currentFileHashes,
+                      signatureFileHashes
+                    )}
                     currentFile={currentFile}
                     setCurrentFile={setCurrentFile}
                     handleDownload={handleExport}
@@ -537,7 +547,11 @@ export const VerifyPage = () => {
           >
             <SlimPdfView
               currentFile={currentFile}
-              files={getCurrentUserFiles(files, currentFileHashes)}
+              files={getCurrentUserFiles(
+                files,
+                currentFileHashes,
+                signatureFileHashes
+              )}
               parsedSignatureEvents={parsedSignatureEvents}
             />
           </StickySideColumns>

src/types/drawing.ts

@@ -41,9 +41,22 @@ export interface DrawTool {
 }
 
 export enum MarkType {
+  TEXT = 'TEXT',
   SIGNATURE = 'SIGNATURE',
   JOBTITLE = 'JOBTITLE',
   FULLNAME = 'FULLNAME',
+  INITIALS = 'INITIALS',
+  DATETIME = 'DATETIME',
   DATE = 'DATE',
-  DATETIME = 'DATETIME'
+  NUMBER = 'NUMBER',
+  IMAGES = 'IMAGES',
+  CHECKBOX = 'CHECKBOX',
+  MULTIPLE = 'MULTIPLE',
+  FILE = 'FILE',
+  RADIO = 'RADIO',
+  SELECT = 'SELECT',
+  CELLS = 'CELLS',
+  STAMP = 'STAMP',
+  PAYMENT = 'PAYMENT',
+  PHONE = 'PHONE'
 }

src/types/file.ts

@@ -5,4 +5,5 @@ export interface CurrentUserFile {
   pdfFile: PdfFile
   filename: string
   hash?: string
+  isHashValid: boolean
 }

src/utils/meta.ts

@@ -190,3 +190,11 @@ export const extractFileExtensions = (fileNames: string[]) => {
 
   return { extensions, isSame }
 }
+
+/**
+ * @param fileName - Filename to check
+ * @returns Extension string
+ */
+export const extractFileExtension = (fileName: string) => {
+  return fileName.split('.').pop()
+}

src/utils/utils.ts

@@ -72,17 +72,20 @@ export const timeout = (ms: number = 60000) => {
  * including its name, hash, and content
  * @param files
  * @param fileHashes
+ * @param creatorFileHashes
  */
 export const getCurrentUserFiles = (
   files: { [filename: string]: PdfFile },
-  fileHashes: { [key: string]: string | null }
+  fileHashes: { [key: string]: string | null },
+  creatorFileHashes: { [key: string]: string }
 ): CurrentUserFile[] => {
   return Object.entries(files).map(([filename, pdfFile], index) => {
     return {
       pdfFile,
       filename,
       id: index + 1,
-      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
+      ...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
+      isHashValid: creatorFileHashes[filename] === fileHashes[filename]
     }
   })
 }