navigate('/')} />
- 
navigate('/')} />
+
+ {children}
+
+ )
+}
diff --git a/src/components/Container/style.module.scss b/src/components/Container/style.module.scss
new file mode 100644
index 0000000..4e574be
--- /dev/null
+++ b/src/components/Container/style.module.scss
@@ -0,0 +1,8 @@
+@import '../../styles/sizes.scss';
+
+.container {
+ width: 100%;
+ max-width: 1400px;
+ padding-inline: $default-container-padding-inline;
+ margin-inline: auto;
+}
diff --git a/src/components/DisplaySigit/index.tsx b/src/components/DisplaySigit/index.tsx
new file mode 100644
index 0000000..92dc01d
--- /dev/null
+++ b/src/components/DisplaySigit/index.tsx
@@ -0,0 +1,163 @@
+import { Meta } from '../../types'
+import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
+import { Link } from 'react-router-dom'
+import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
+import { appPublicRoutes, appPrivateRoutes } from '../../routes'
+import { Button, Divider, Tooltip } from '@mui/material'
+import { DisplaySigner } from '../DisplaySigner'
+import {
+ faArchive,
+ faCalendar,
+ faCopy,
+ faEye,
+ faFile
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { UserAvatarGroup } from '../UserAvatarGroup'
+
+import styles from './style.module.scss'
+import { TooltipChild } from '../TooltipChild'
+import { getExtensionIconLabel } from '../getExtensionIconLabel'
+import { useSigitProfiles } from '../../hooks/useSigitProfiles'
+import { useSigitMeta } from '../../hooks/useSigitMeta'
+
+type SigitProps = {
+ meta: Meta
+ parsedMeta: SigitCardDisplayInfo
+}
+
+export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
+ const {
+ title,
+ createdAt,
+ submittedBy,
+ signers,
+ signedStatus,
+ fileExtensions,
+ isValid
+ } = parsedMeta
+
+ const { signersStatus } = useSigitMeta(meta)
+
+ const profiles = useSigitProfiles([
+ ...(submittedBy ? [submittedBy] : []),
+ ...signers
+ ])
+
+ return (
+
+
+
+ )
+}
diff --git a/src/components/DisplaySigit/style.module.scss b/src/components/DisplaySigit/style.module.scss
new file mode 100644
index 0000000..4bb2f15
--- /dev/null
+++ b/src/components/DisplaySigit/style.module.scss
@@ -0,0 +1,114 @@
+@import '../../styles/colors.scss';
+
+.itemWrapper {
+ position: relative;
+ overflow: hidden;
+ background-color: $overlay-background-color;
+ border-radius: 4px;
+
+ display: flex;
+ padding: 15px;
+ gap: 15px;
+ flex-direction: column;
+
+ &:only-child {
+ max-width: 600px;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ transition: opacity ease 0.2s;
+ opacity: 0;
+ width: 4px;
+ background-color: $primary-main;
+ pointer-events: none;
+ }
+
+ &:hover,
+ &:focus-within {
+ &::before {
+ opacity: 1;
+ }
+
+ .itemActions {
+ transform: translateX(0);
+ }
+ }
+}
+
+.insetLink {
+ position: absolute;
+ inset: 0;
+ outline: none;
+}
+
+.itemActions {
+ display: flex;
+ gap: 10px;
+ padding: 10px;
+
+ > * {
+ flex-grow: 1;
+ }
+
+ @media (hover: hover) {
+ transition: ease 0.2s;
+ transform: translateX(100%);
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ flex-direction: column;
+ background: $overlay-background-color;
+ border-left: solid 1px rgba(0, 0, 0, 0.1);
+
+ &:hover,
+ &:focus-within {
+ transform: translateX(0);
+ }
+ }
+
+ @media (hover: none) {
+ border-top: solid 1px rgba(0, 0, 0, 0.1);
+ padding-top: 10px;
+ margin-inline: -15px;
+ margin-bottom: -15px;
+ }
+}
+
+.title {
+ font-size: 20px;
+ color: $text-color;
+}
+
+.users {
+ margin-top: auto;
+
+ display: flex;
+ grid-gap: 10px;
+}
+
+.details {
+ color: rgba(0, 0, 0, 0.3);
+ font-size: 14px;
+}
+
+.iconLabel {
+ display: flex;
+ grid-gap: 10px;
+ align-items: center;
+}
+
+.status {
+ display: flex;
+ grid-gap: 25px;
+}
+
+a.itemWrapper:hover {
+ text-decoration: none;
+}
diff --git a/src/components/DisplaySigner/index.tsx b/src/components/DisplaySigner/index.tsx
new file mode 100644
index 0000000..63aa154
--- /dev/null
+++ b/src/components/DisplaySigner/index.tsx
@@ -0,0 +1,62 @@
+import { Badge } from '@mui/material'
+import { ProfileMetadata } from '../../types'
+import styles from './style.module.scss'
+import { UserAvatar } from '../UserAvatar'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCheck,
+ faEllipsis,
+ faExclamation,
+ faEye,
+ faHourglass,
+ faQuestion
+} from '@fortawesome/free-solid-svg-icons'
+import { SignStatus } from '../../utils'
+import { Spinner } from '../Spinner'
+
+type DisplaySignerProps = {
+ profile: ProfileMetadata
+ pubkey: string
+ status: SignStatus
+}
+
+export const DisplaySigner = ({
+ status,
+ profile,
+ pubkey
+}: DisplaySignerProps) => {
+ const getStatusIcon = (status: SignStatus) => {
+ switch (status) {
+ case SignStatus.Signed:
+ return {title}
+
+ {submittedBy &&
+ (function () {
+ const profile = profiles[submittedBy]
+ return (
+
+
+
+
+ )
+ })()}
+ {submittedBy && signers.length ? (
+
+ {signers.map((signer) => {
+ const pubkey = npubToHex(signer)!
+ const profile = profiles[pubkey]
+
+ return (
+
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
{
+ onMouseMove(event, page)
+ }}
+ onMouseDown={(event) => {
+ onMouseDown(event, page)
+ }}
+ draggable="false"
+ src={page.image}
+ />
+
+ {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
+ return (
+
+ )
+ })}
+
+ )
+ }
+
+ if (parsingPdf) {
+ return (
+ {
+ onDrawnFieldMouseMove(event, drawnField)
+ }}
+ className={styles.drawingRectangle}
+ style={{
+ left: `${drawnField.left}px`,
+ top: `${drawnField.top}px`,
+ width: `${drawnField.width}px`,
+ height: `${drawnField.height}px`,
+ pointerEvents: mouseState.clicked ? 'none' : 'all'
+ }}
+ >
+ {
+ onResizeHandleMouseMove(event, drawnField)
+ }}
+ className={styles.resizeHandle}
+ >
+ {
+ onRemoveHandleMouseDown(
+ event,
+ pdfFileIndex,
+ pdfPageIndex,
+ drawnFieldIndex
+ )
+ }}
+ className={styles.removeHandle}
+ >
+
+ )
+ })}
+
+
+ Counterpart
+
+
+
+
+ {selectedFiles.map((file, i) => {
+ const name = file.name
+ const extension = extractFileExtension(name)
+ const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
+ return (
+
+
+ File Separator
+
+ )}
+
+ )
+ })}
+
+ )
+}
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
new file mode 100644
index 0000000..142f88a
--- /dev/null
+++ b/src/components/DrawPDFFields/style.module.scss
@@ -0,0 +1,118 @@
+@import '../../styles/sizes.scss';
+
+.pdfFieldItem {
+ background: white;
+ padding: 10px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.pdfImageWrapper {
+ position: relative;
+ -webkit-user-select: none;
+ user-select: none;
+
+ > img {
+ display: block;
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain; /* Ensure the image fits within the container */
+ }
+
+ &.drawing {
+ cursor: crosshair;
+ }
+}
+
+.drawingRectangle {
+ position: absolute;
+ border: 1px solid #01aaad;
+ z-index: 50;
+ background-color: #01aaad4b;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &.nonEditable {
+ cursor: default;
+ visibility: hidden;
+ }
+
+ &.edited {
+ border: 1px dotted #01aaad;
+ }
+
+ .resizeHandle {
+ position: absolute;
+ right: -5px;
+ bottom: -5px;
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border: 1px solid rgb(160, 160, 160);
+ border-radius: 50%;
+ cursor: nwse-resize;
+
+ // Increase the area a bit so it's easier to click
+ &::after {
+ content: '';
+ position: absolute;
+ inset: -14px;
+ }
+ }
+
+ .removeHandle {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: -30px;
+ width: 20px;
+ height: 20px;
+ background-color: #fff;
+ border: 1px solid rgb(160, 160, 160);
+ border-radius: 50%;
+ color: #e74c3c;
+ font-size: 10px;
+ cursor: pointer;
+ }
+
+ .userSelect {
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ bottom: -60px;
+ min-width: 170px;
+ min-height: 30px;
+ background: #fff;
+ 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;
+}
diff --git a/src/components/FileList/index.tsx b/src/components/FileList/index.tsx
new file mode 100644
index 0000000..53557a5
--- /dev/null
+++ b/src/components/FileList/index.tsx
@@ -0,0 +1,52 @@
+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[]
+ currentFile: CurrentUserFile
+ setCurrentFile: (file: CurrentUserFile) => void
+ handleDownload: () => void
+ downloadLabel?: string
+}
+
+const FileList = ({
+ files,
+ currentFile,
+ setCurrentFile,
+ handleDownload,
+ downloadLabel
+}: FileListProps) => {
+ const isActive = (file: CurrentUserFile) => file.id === currentFile.id
+ return (
+
+ {pdfFile ? (
+ getPdfPages(pdfFile, i)
+ ) : (
+
+ {i < selectedFiles.length - 1 && (
+
+ This is a {extension} file
+
+ )}
+
+
+ )
+}
+
+export default FileList
diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss
new file mode 100644
index 0000000..22d8515
--- /dev/null
+++ b/src/components/FileList/style.module.scss
@@ -0,0 +1,122 @@
+.container {
+ border-radius: 4px;
+ background: white;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ grid-gap: 0px;
+}
+
+.filesPageContainer {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 0.75fr 1.5fr 0.75fr;
+ grid-gap: 30px;
+ 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;
+ grid-gap: 15px;
+}
+
+.files {
+ 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;
+}
+
+.files::-webkit-scrollbar {
+ width: 10px;
+}
+
+.files::-webkit-scrollbar-track {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+
+.files::-webkit-scrollbar-thumb {
+ max-width: 10px;
+ border-radius: 2px;
+ background-color: #4c82a3;
+ cursor: grab;
+}
+
+.fileItem {
+ transition: ease 0.2s;
+ display: flex;
+ flex-direction: row;
+ grid-gap: 10px;
+ border-radius: 4px;
+ overflow: hidden;
+ background: #ffffff;
+ padding: 5px 10px;
+ align-items: center;
+ color: rgba(0, 0, 0, 0.5);
+ cursor: pointer;
+ flex-grow: 1;
+ font-size: 16px;
+ font-weight: 500;
+ min-height: 45px;
+
+ &.active {
+ background: #4c82a3;
+ color: white;
+ }
+}
+
+.fileItem:hover {
+ 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 {
+ font-size: 14px;
+ font-weight: 500;
+ display: flex;
+ 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;
+}
diff --git a/src/components/FontAwesomeIconStack/index.tsx b/src/components/FontAwesomeIconStack/index.tsx
new file mode 100644
index 0000000..bf12416
--- /dev/null
+++ b/src/components/FontAwesomeIconStack/index.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react'
+
+import styles from './styles.module.scss'
+
+/**
+ * This Component overlays FontAwesomeIcon icons on top of each other
+ */
+export const FontAwesomeIconStack = ({ children }: PropsWithChildren) => {
+ return
+
+
+ -
+ {files.map((file: CurrentUserFile) => (
+
- setCurrentFile(file)}
+ >
+ {file.id}+++ +{file.filename}++ {file.isHashValid &&+
} +
+ ))}
+
{children}
+}
diff --git a/src/components/FontAwesomeIconStack/styles.module.scss b/src/components/FontAwesomeIconStack/styles.module.scss
new file mode 100644
index 0000000..ea68afd
--- /dev/null
+++ b/src/components/FontAwesomeIconStack/styles.module.scss
@@ -0,0 +1,7 @@
+.iconStackContainer {
+ position: relative;
+
+ > * {
+ position: absolute;
+ }
+}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..eac4166
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,128 @@
+import { Box, Button, Link as LinkMui } from '@mui/material'
+import { Link } from 'react-router-dom'
+import styles from './style.module.scss'
+import { Container } from '../Container'
+import nostrImage from '../../assets/images/nostr.gif'
+import { appPublicRoutes } from '../../routes'
+
+export const Footer = () => (
+
+)
diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss
new file mode 100644
index 0000000..f428af4
--- /dev/null
+++ b/src/components/Footer/style.module.scss
@@ -0,0 +1,49 @@
+@import '../../styles/colors.scss';
+
+.borderTop {
+ border-top: solid 1px rgba(0, 0, 0, 0.075);
+}
+
+.footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ font-size: 14px;
+}
+
+.links {
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.5);
+
+ > a + a {
+ margin-left: 25px;
+ }
+}
+
+.nav {
+ color: rgba(0, 0, 0, 0.5);
+
+ a {
+ width: 100%;
+ }
+}
+
+.credits {
+ width: 100%;
+ text-align: center;
+ padding: 10px 0;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.5);
+ font-weight: 500;
+}
+
+.logo {
+ width: 100%;
+ max-width: 300px;
+
+ > img {
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/src/components/Landing/CardComponent/CardComponent.tsx b/src/components/Landing/CardComponent/CardComponent.tsx
new file mode 100644
index 0000000..c6d909a
--- /dev/null
+++ b/src/components/Landing/CardComponent/CardComponent.tsx
@@ -0,0 +1,28 @@
+import { ReactElement } from 'react'
+
+import styles from './style.module.scss'
+
+interface CardComponentProps {
+ icon: ReactElement
+ title: ReactElement
+ description: ReactElement
+ actions?: ReactElement
+}
+
+export const CardComponent = ({
+ icon,
+ title,
+ description,
+ actions
+}: CardComponentProps) => {
+ return (
+
+
+
+
+ )
+}
diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss
new file mode 100644
index 0000000..b6c9d5e
--- /dev/null
+++ b/src/components/Landing/CardComponent/style.module.scss
@@ -0,0 +1,64 @@
+@import '../../../styles/colors.scss';
+
+.card {
+ border-radius: 4px;
+ padding: 25px;
+
+ position: relative;
+ background: $overlay-background-color;
+
+ transition: ease 0.2s;
+
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+
+ &:hover {
+ color: white;
+ background: $primary-main;
+
+ .icon,
+ a {
+ color: inherit;
+ }
+ }
+
+ button {
+ transition:
+ color 0s,
+ background-color 0.2s;
+ }
+
+ a {
+ transition: none;
+ }
+}
+
+.icon {
+ color: $primary-main;
+ font-size: 25px;
+ line-height: 1;
+
+ height: 25px;
+ width: 25px;
+}
+
+.title {
+ display: flex;
+ flex-direction: row;
+ grid-gap: 10px;
+ align-items: center;
+
+ font-weight: bold;
+ font-size: 20px;
+}
+
+.description {
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.actions {
+ margin-top: auto;
+ text-align: right;
+}
diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
index 3c57bff..980a763 100644
--- a/src/components/LoadingSpinner/index.tsx
+++ b/src/components/LoadingSpinner/index.tsx
@@ -11,7 +11,7 @@ export const LoadingSpinner = (props: Props) => {
+ {icon}
+ {title}
+
+ {description}
+ {actions ?{actions}
: null}
+
- {desc && {desc}}
+ {desc && {desc}}
+
+ )
+}
+
+export default MarkFormField
diff --git a/src/components/MarkFormField/style.module.scss b/src/components/MarkFormField/style.module.scss
new file mode 100644
index 0000000..1275038
--- /dev/null
+++ b/src/components/MarkFormField/style.module.scss
@@ -0,0 +1,210 @@
+.container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ 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;
+ }
+
+ .actionButtons {
+ display: flex;
+ flex-direction: row;
+ grid-gap: 5px;
+ }
+
+ .actionsBottom {
+ display: flex;
+ flex-direction: row;
+ grid-gap: 5px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .submitButton {
+ width: 100%;
+ max-width: 300px;
+ margin-top: 10px;
+ }
+
+ .paginationButton {
+ font-size: 12px;
+ padding: 5px 10px;
+ border-radius: 3px;
+ background: rgba(0, 0, 0, 0.1);
+ color: rgba(0, 0, 0, 0.5);
+ }
+
+ .paginationButton:hover {
+ background: #447592;
+ color: rgba(255, 255, 255, 0.5);
+ }
+
+ .paginationButtonDone {
+ background: #5e8eab;
+ color: rgb(255, 255, 255);
+ }
+
+ .paginationButtonCurrent {
+ height: 2px;
+ width: 100%;
+ background: #4c82a3;
+ }
+
+ .trigger {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .triggerBtn {
+ background: white;
+ color: #434343;
+ padding: 5px 30px;
+ box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
+ position: absolute;
+ top: -25px;
+ }
+}
+
+.actions {
+ background: white;
+ width: 100%;
+ border-radius: 4px;
+ padding: 10px 20px;
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ grid-gap: 15px;
+ box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
+ max-width: 750px;
+
+ &.expanded {
+ display: flex;
+ }
+}
+
+.actionsWrapper {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 20px;
+ flex-grow: 1;
+ width: 100%;
+}
+
+.actionsTop {
+ display: flex;
+ flex-direction: row;
+ grid-gap: 10px;
+ align-items: center;
+}
+
+.actionsTopInfo {
+ flex-grow: 1;
+}
+
+.actionsTopInfoText {
+ font-size: 16px;
+ color: #434343;
+}
+
+.actionsTrigger {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.inputWrapper {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 10px;
+}
+
+.textInput {
+ height: 100px;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ border: solid 2px #4c82a3;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.input {
+ border-radius: 4px;
+ 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), rgba(0, 0, 0, 0) 100%),
+ linear-gradient(white, white);
+}
+
+.input:focus {
+ 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);
+}
+
+.footerContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer {
+ display: flex;
+ flex-direction: row;
+ grid-gap: 5px;
+ align-items: start;
+ justify-content: center;
+ width: 100%;
+}
+
+.pagination {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 5px;
+}
diff --git a/src/components/PDFView/PdfItem.tsx b/src/components/PDFView/PdfItem.tsx
new file mode 100644
index 0000000..c502bb4
--- /dev/null
+++ b/src/components/PDFView/PdfItem.tsx
@@ -0,0 +1,49 @@
+import { PdfFile } from '../../types/drawing.ts'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import PdfPageItem from './PdfPageItem.tsx'
+
+interface PdfItemProps {
+ currentUserMarks: CurrentUserMark[]
+ handleMarkClick: (id: number) => void
+ otherUserMarks: Mark[]
+ pdfFile: PdfFile
+ selectedMark: CurrentUserMark | null
+ selectedMarkValue: string
+}
+
+/**
+ * Responsible for displaying pages of a single Pdf File.
+ */
+const PdfItem = ({
+ pdfFile,
+ currentUserMarks,
+ handleMarkClick,
+ selectedMarkValue,
+ selectedMark,
+ otherUserMarks
+}: PdfItemProps) => {
+ const filterByPage = (
+ marks: CurrentUserMark[],
+ page: number
+ ): CurrentUserMark[] => {
+ return marks.filter((m) => m.mark.location.page === page)
+ }
+ const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
+ return marks.filter((mark) => mark.location.page === page)
+ }
+ return pdfFile.pages.map((page, i) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Add your signature
+
+
+
+
+
+
+ {currentUserMarks.map((mark, index) => {
+ return (
+
+
+
+ {isCurrent(mark) && (
+
+ )}
+
+ )
+ })}
+
+ {getMarkValue()}
+
+ )
+}
+
+export default PdfMarkItem
diff --git a/src/components/PDFView/PdfMarking.tsx b/src/components/PDFView/PdfMarking.tsx
new file mode 100644
index 0000000..9fff924
--- /dev/null
+++ b/src/components/PDFView/PdfMarking.tsx
@@ -0,0 +1,168 @@
+import PdfView from './index.tsx'
+import MarkFormField from '../MarkFormField'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import React, { useState, useEffect } from 'react'
+import {
+ findNextIncompleteCurrentUserMark,
+ getUpdatedMark,
+ updateCurrentUserMarks
+} from '../../utils'
+import { EMPTY } from '../../utils/const.ts'
+import { Container } from '../Container'
+import signPageStyles from '../../pages/sign/style.module.scss'
+import styles from './style.module.scss'
+import { CurrentUserFile } from '../../types/file.ts'
+import FileList from '../FileList'
+import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
+import { UsersDetails } from '../UsersDetails.tsx'
+import { Meta } from '../../types'
+
+interface PdfMarkingProps {
+ currentUserMarks: CurrentUserMark[]
+ files: CurrentUserFile[]
+ handleDownload: () => void
+ meta: Meta | null
+ otherUserMarks: Mark[]
+ setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
+ setIsReadyToSign: (isReadyToSign: boolean) => void
+ setUpdatedMarks: (markToUpdate: Mark) => void
+}
+
+/**
+ * Top-level component responsible for displaying Pdfs, Pages, and Marks,
+ * as well as tracking if the document is ready to be signed.
+ * @param props
+ * @constructor
+ */
+const PdfMarking = (props: PdfMarkingProps) => {
+ const {
+ files,
+ currentUserMarks,
+ setIsReadyToSign,
+ setCurrentUserMarks,
+ setUpdatedMarks,
+ handleDownload,
+ meta,
+ otherUserMarks
+ } = props
+ const [selectedMark, setSelectedMark] = useState
+ {currentUserMarks?.length > 0 && (
+
+
+
+ )}
+
+ 
+ {currentUserMarks.map((m, i) => (
+
+ )
+}
+
+export default PdfPageItem
diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx
new file mode 100644
index 0000000..ef765f0
--- /dev/null
+++ b/src/components/PDFView/index.tsx
@@ -0,0 +1,78 @@
+import { Divider } from '@mui/material'
+import PdfItem from './PdfItem.tsx'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { CurrentUserFile } from '../../types/file.ts'
+import { useEffect, useRef } from 'react'
+
+interface PdfViewProps {
+ currentFile: CurrentUserFile | null
+ currentUserMarks: CurrentUserMark[]
+ files: CurrentUserFile[]
+ handleMarkClick: (id: number) => void
+ otherUserMarks: Mark[]
+ selectedMark: CurrentUserMark | null
+ selectedMarkValue: string
+}
+
+/**
+ * Responsible for rendering Pdf files.
+ */
+const PdfView = ({
+ files,
+ currentUserMarks,
+ handleMarkClick,
+ selectedMarkValue,
+ selectedMark,
+ currentFile,
+ otherUserMarks
+}: PdfViewProps) => {
+ const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+ useEffect(() => {
+ if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+ pdfRefs.current[currentFile.id]?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'end'
+ })
+ }
+ }, [currentFile])
+ const filterByFile = (
+ currentUserMarks: CurrentUserMark[],
+ hash: string
+ ): CurrentUserMark[] => {
+ return currentUserMarks.filter(
+ (currentUserMark) => currentUserMark.mark.pdfFileHash === hash
+ )
+ }
+ const filterMarksByFile = (marks: Mark[], hash: string): Mark[] => {
+ return marks.filter((mark) => mark.pdfFileHash === hash)
+ }
+ const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
+ index !== files.length - 1
+ return (
+ <>
+ {files.map((currentUserFile, index, arr) => {
+ const { hash, pdfFile, id } = currentUserFile
+ if (!hash) return
+ return (
+ (markRefs.current[m.id] = el)}>
+
+ ))}
+ {otherUserMarks.map((m, i) => (
+
+ {m.value}
+
+ ))}
+ (pdfRefs.current[id] = el)}
+ key={index}
+ >
+ File Separator }
+
+ )
+ })}
+
+ )
+}
+
+export default PdfView
diff --git a/src/components/PDFView/style.module.scss b/src/components/PDFView/style.module.scss
new file mode 100644
index 0000000..3a893d4
--- /dev/null
+++ b/src/components/PDFView/style.module.scss
@@ -0,0 +1,39 @@
+.imageWrapper {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%; /* Adjust as needed */
+ height: 100%; /* Adjust as needed */
+ overflow: hidden; /* Ensure no overflow */
+ border: 1px solid #ccc; /* Optional: for visual debugging */
+ background-color: #e0f7fa; /* Optional: for visual debugging */
+}
+
+.image {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain; /* Ensure the image fits within the container */
+}
+
+.container {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+
+}
+
+.pdfView {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ gap: 10px;
+}
+
+.otherUserMarksDisplay {
+ position: absolute;
+ z-index: 50;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
new file mode 100644
index 0000000..9901fa1
--- /dev/null
+++ b/src/components/Select/index.tsx
@@ -0,0 +1,113 @@
+import {
+ FormControl,
+ MenuItem,
+ Select as SelectMui,
+ SelectChangeEvent,
+ styled,
+ SelectProps as SelectMuiProps,
+ MenuItemProps
+} from '@mui/material'
+
+const SelectCustomized = styled(SelectMui){children}
+)
diff --git a/src/components/Spinner/style.module.scss b/src/components/Spinner/style.module.scss
new file mode 100644
index 0000000..60158f4
--- /dev/null
+++ b/src/components/Spinner/style.module.scss
@@ -0,0 +1,12 @@
+.spin {
+ animation: spin 5s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/components/TooltipChild.tsx b/src/components/TooltipChild.tsx
new file mode 100644
index 0000000..4b41b72
--- /dev/null
+++ b/src/components/TooltipChild.tsx
@@ -0,0 +1,16 @@
+import { forwardRef, PropsWithChildren } from 'react'
+
+/**
+ * Helper wrapper for custom child components when using `@mui/material/tooltips`.
+ * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
+ * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
+ */
+export const TooltipChild = forwardRef
+ {surplus > 1
+ ? childrenArray.slice(0, surplus * -1).map((c) => c)
+ : children}
+ {surplus > 1 && renderSurplus(surplus)}
+
+ )
+}
diff --git a/src/components/UserAvatarGroup/style.module.scss b/src/components/UserAvatarGroup/style.module.scss
new file mode 100644
index 0000000..c9ee551
--- /dev/null
+++ b/src/components/UserAvatarGroup/style.module.scss
@@ -0,0 +1,39 @@
+@import '../../styles/colors.scss';
+
+.container {
+ padding: 0 0 0 10px;
+
+ > * {
+ transition: margin ease 0.2s;
+ margin: 0 0 0 -10px;
+ position: relative;
+ z-index: 1;
+ &:first-child {
+ margin-left: -10px !important;
+ }
+ }
+
+ > *:hover,
+ > *:focus-within {
+ margin: 0 15px 0 5px;
+ z-index: 2;
+ }
+}
+
+.icon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border-width: 2px;
+ overflow: hidden;
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+
+ background: white;
+ color: rgba(0, 0, 0, 0.5);
+ font-weight: bold;
+ font-size: 14px;
+ border: solid 2px $primary-main;
+}
diff --git a/src/components/UserAvatarIconButton/index.tsx b/src/components/UserAvatarIconButton/index.tsx
new file mode 100644
index 0000000..a12564a
--- /dev/null
+++ b/src/components/UserAvatarIconButton/index.tsx
@@ -0,0 +1,32 @@
+import { IconButton, IconButtonProps } from '@mui/material'
+import styles from './style.module.scss'
+import { getRoboHashPicture } from '../../utils'
+
+interface AvatarIconButtonProps extends IconButtonProps {
+ src: string | undefined
+ hexKey: string | undefined
+}
+
+/**
+ * This component displays profile image inside IconButton
+ * @param {string | undefined} props.src - image source or robohash picture
+ * @param {string | undefined} props.hexKey - robohash and affects border
+ * @param {IconButtonProps} props - component extends mui's IconButton
+ */
+export const AvatarIconButton = (props: AvatarIconButtonProps) => {
+ const { src, hexKey, ...rest } = props
+
+ return (
+
+
+ ) : undefined
+}
diff --git a/src/components/UsersDetails.tsx/style.module.scss b/src/components/UsersDetails.tsx/style.module.scss
new file mode 100644
index 0000000..9d906c1
--- /dev/null
+++ b/src/components/UsersDetails.tsx/style.module.scss
@@ -0,0 +1,46 @@
+@import '../../styles/colors.scss';
+
+.container {
+ border-radius: 4px;
+ background: $overlay-background-color;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ grid-gap: 25px;
+
+ font-size: 14px;
+}
+
+.section {
+ display: flex;
+ flex-direction: column;
+ grid-gap: 10px;
+}
+
+.users {
+ display: flex;
+ grid-gap: 10px;
+}
+
+.detailsItem {
+ transition: ease 0.2s;
+ color: rgba(0, 0, 0, 0.5);
+ font-size: 14px;
+ align-items: center;
+ border-radius: 4px;
+ padding: 5px;
+
+ display: flex;
+ align-items: center;
+ justify-content: start;
+
+ > :first-child {
+ padding: 5px;
+ margin-right: 10px;
+ }
+
+ &:hover {
+ background: $primary-main;
+ color: white;
+ }
+}
diff --git a/src/components/getExtensionIconLabel.tsx b/src/components/getExtensionIconLabel.tsx
new file mode 100644
index 0000000..e8a14eb
--- /dev/null
+++ b/src/components/getExtensionIconLabel.tsx
@@ -0,0 +1,78 @@
+import {
+ faFilePdf,
+ faFileExcel,
+ faFileWord,
+ faFilePowerpoint,
+ faFileZipper,
+ faFileCsv,
+ faFileLines,
+ faFileImage,
+ faFile,
+ IconDefinition
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export const getExtensionIconLabel = (extension: string) => {
+ let icon: IconDefinition
+ switch (extension.toLowerCase()) {
+ case 'pdf':
+ icon = faFilePdf
+ break
+ case 'json':
+ icon = faFilePdf
+ break
+
+ case 'xlsx':
+ case 'xls':
+ case 'xlsb':
+ case 'xlsm':
+ icon = faFileExcel
+ break
+
+ case 'doc':
+ case 'docx':
+ icon = faFileWord
+ break
+
+ case 'ppt':
+ case 'pptx':
+ icon = faFilePowerpoint
+ break
+
+ case 'zip':
+ case '7z':
+ case 'rar':
+ case 'tar':
+ case 'gz':
+ icon = faFileZipper
+ break
+
+ case 'csv':
+ icon = faFileCsv
+ break
+
+ case 'txt':
+ icon = faFileLines
+ break
+
+ case 'png':
+ case 'jpg':
+ case 'jpeg':
+ case 'gif':
+ case 'svg':
+ case 'bmp':
+ case 'ico':
+ icon = faFileImage
+ break
+
+ default:
+ icon = faFile
+ return
+ }
+
+ return (
+ <>
+
+
+ Signers
+
+ {submittedBy &&
+ (function () {
+ const profile = profiles[submittedBy]
+ return (
+
+
+
+
+ )
+ })()}
+
+ {submittedBy && signers.length ? (
+
+ {signers.map((signer) => {
+ const pubkey = npubToHex(signer)!
+ const profile = profiles[pubkey]
+
+ return (
+
+
+
+
+ )
+ })}
+ {viewers.map((signer) => {
+ const pubkey = npubToHex(signer)!
+ const profile = profiles[pubkey]
+
+ return (
+
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {/* User signed date */}
+ {userCanSign ? (
+
+
+
+ ) : null}
+
+
+ Details
+ +
+
+ )
+}
diff --git a/src/layouts/modal/index.tsx b/src/layouts/modal/index.tsx
new file mode 100644
index 0000000..7b29379
--- /dev/null
+++ b/src/layouts/modal/index.tsx
@@ -0,0 +1,109 @@
+import { Button, IconButton, Modal as ModalMui } from '@mui/material'
+import {
+ Link,
+ matchPath,
+ Outlet,
+ useLocation,
+ useNavigate
+} from 'react-router-dom'
+import styles from './style.module.scss'
+import { appPublicRoutes } from '../../routes'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import nostrImage from '../../assets/images/nostr.gif'
+
+function useRouteMatch(patterns: readonly string[]) {
+ const { pathname } = useLocation()
+
+ for (let i = 0; i < patterns.length; i += 1) {
+ const pattern = patterns[i]
+ const possibleMatch = matchPath(pattern, pathname)
+ if (possibleMatch !== null) {
+ return possibleMatch
+ }
+ }
+
+ return null
+}
+
+export const Modal = () => {
+ const navigate = useNavigate()
+ const tabs = [
+ { to: appPublicRoutes.login, title: 'Login', label: 'Login' },
+ { to: appPublicRoutes.register, title: 'Register', label: 'Register' },
+ {
+ to: appPublicRoutes.nostr,
+ title: 'Login',
+ sx: { padding: '10px' },
+ label:
+
+ {left}
+ {children}
+
+
+ {right}
+
+
+
+
+
+
+
+
+
+
+
+ + {tabs.find((t) => activeTab === t.to)?.title} +
+-
+ {tabs.map((t) => {
+ return (
+
- + + + ) + })} +
Coming soon!
+ ) : null}
+
+
+