src/components/PDFView/PdfMarking.tsx

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

src/layouts/StickySideColumns.tsx

@@ -8,22 +8,24 @@ import {
 
 import styles from './StickySideColumns.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-  faFile,
-  faFileCirclePlus,
-  faToolbox
-} from '@fortawesome/free-solid-svg-icons'
 import { Button } from '@mui/material'
 
 interface StickySideColumnsProps {
-  left?: ReactNode
+  left: ReactNode
-  right?: ReactNode
+  right: ReactNode
+  leftIcon: IconDefinition
+  centerIcon: IconDefinition
+  rightIcon: IconDefinition
 }
 
 const DEFAULT_TAB = 'nav-content'
 export const StickySideColumns = ({
   left,
   right,
+  leftIcon,
+  centerIcon,
+  rightIcon,
   children
 }: PropsWithChildren<StickySideColumnsProps>) => {
   const [tab, setTab] = useState(DEFAULT_TAB)
@@ -114,7 +116,7 @@ export const StickySideColumns = ({
             className={`${isActive('nav-left') && styles.active}`}
             aria-label="nav left"
           >
-            <FontAwesomeIcon icon={faFileCirclePlus} />
+            <FontAwesomeIcon icon={leftIcon} />
           </Button>
         </li>
         <li>
@@ -125,7 +127,7 @@ export const StickySideColumns = ({
             className={`${isActive('nav-content') && styles.active}`}
             aria-label="nav middle"
           >
-            <FontAwesomeIcon icon={faFile} />
+            <FontAwesomeIcon icon={centerIcon} />
           </Button>
         </li>
         <li>
@@ -136,7 +138,7 @@ export const StickySideColumns = ({
             className={`${isActive('nav-right') && styles.active}`}
             aria-label="nav right"
           >
-            <FontAwesomeIcon icon={faToolbox} />
+            <FontAwesomeIcon icon={rightIcon} />
           </Button>
         </li>
       </ul>

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'
@@ -1047,6 +1050,9 @@ export const CreatePage = () => {
               )}
             </div>
           }
+          leftIcon={faFileCirclePlus}
+          centerIcon={faFile}
+          rightIcon={faToolbox}
         >
           <DrawPDFFields
             metadata={metadata}

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[]
@@ -567,6 +572,9 @@ export const VerifyPage = () => {
               </>
             }
             right={<UsersDetails meta={meta} />}
+            leftIcon={faFileDownload}
+            centerIcon={faFile}
+            rightIcon={faCircleInfo}
           >
             <SlimPdfView
               currentFile={currentFile}