From 2be7f3d51bfac0d58984229b04f97b5df8dbebc6 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Wed, 4 Sep 2024 14:05:36 +0200
Subject: [PATCH] fix(tabs): add tab icons

---
 src/components/PDFView/PdfMarking.tsx |  8 ++++++++
 src/layouts/StickySideColumns.tsx     | 22 ++++++++++++----------
 src/pages/create/index.tsx            |  6 ++++++
 src/pages/verify/index.tsx            |  8 ++++++++
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx
index 062fad5..61968b0 100644
--- 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
diff --git a/src/layouts/StickySideColumns.tsx b/src/layouts/StickySideColumns.tsx
index 2e233ae..c460fbd 100644
--- a/src/layouts/StickySideColumns.tsx
+++ b/src/layouts/StickySideColumns.tsx
@@ -8,22 +8,24 @@ import {
 
 import styles from './StickySideColumns.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faFile,
-  faFileCirclePlus,
-  faToolbox
-} from '@fortawesome/free-solid-svg-icons'
+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)
@@ -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>
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index c8c46ed..f1cfbd0 100644
--- 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'
@@ -1047,6 +1050,9 @@ export const CreatePage = () => {
               )}
             </div>
           }
+          leftIcon={faFileCirclePlus}
+          centerIcon={faFile}
+          rightIcon={faToolbox}
         >
           <DrawPDFFields
             metadata={metadata}
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index e6fbe99..e869c98 100644
--- 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[]
@@ -567,6 +572,9 @@ export const VerifyPage = () => {
               </>
             }
             right={<UsersDetails meta={meta} />}
+            leftIcon={faFileDownload}
+            centerIcon={faFile}
+            rightIcon={faCircleInfo}
           >
             <SlimPdfView
               currentFile={currentFile}