fix: useSigitProfiles dep, map item keys warnining, sign button styles, placeholder, optional button label #160
@ -9,13 +9,15 @@ interface FileListProps {
|
|||||||
currentFile: CurrentUserFile
|
currentFile: CurrentUserFile
|
||||||
setCurrentFile: (file: CurrentUserFile) => void
|
setCurrentFile: (file: CurrentUserFile) => void
|
||||||
handleDownload: () => void
|
handleDownload: () => void
|
||||||
|
downloadLabel?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const FileList = ({
|
const FileList = ({
|
||||||
files,
|
files,
|
||||||
currentFile,
|
currentFile,
|
||||||
setCurrentFile,
|
setCurrentFile,
|
||||||
handleDownload
|
handleDownload,
|
||||||
|
downloadLabel
|
||||||
}: FileListProps) => {
|
}: FileListProps) => {
|
||||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||||
return (
|
return (
|
||||||
@ -41,7 +43,7 @@ const FileList = ({
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||||
Download Files
|
{downloadLabel || 'Download Files'}
|
||||||
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -41,6 +41,67 @@
|
|||||||
background: #447592;
|
background: #447592;
|
||||||
color: white;
|
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 {
|
.actions {
|
||||||
@ -92,12 +153,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionButtons {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
grid-gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputWrapper {
|
.inputWrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -132,20 +187,6 @@
|
|||||||
linear-gradient(white, white);
|
linear-gradient(white, white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actionsBottom {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
grid-gap: 5px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submitButton {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerContainer {
|
.footerContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@ -167,44 +208,3 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
grid-gap: 5px;
|
grid-gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
@ -64,7 +64,8 @@ export const useSigitProfiles = (
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [pubkeys, profileMetadata])
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [pubkeys])
|
||||||
|
|
||||||
return profileMetadata
|
return profileMetadata
|
||||||
}
|
}
|
||||||
|
@ -133,7 +133,7 @@ export const CreatePage = () => {
|
|||||||
identifier: MarkType.TEXT,
|
identifier: MarkType.TEXT,
|
||||||
icon: <FontAwesomeIcon icon={faT} />,
|
icon: <FontAwesomeIcon icon={faT} />,
|
||||||
label: 'Text',
|
label: 'Text',
|
||||||
active: false
|
active: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.SIGNATURE,
|
identifier: MarkType.SIGNATURE,
|
||||||
@ -151,7 +151,7 @@ export const CreatePage = () => {
|
|||||||
identifier: MarkType.FULLNAME,
|
identifier: MarkType.FULLNAME,
|
||||||
icon: <FontAwesomeIcon icon={faIdCard} />,
|
icon: <FontAwesomeIcon icon={faIdCard} />,
|
||||||
label: 'Full Name',
|
label: 'Full Name',
|
||||||
active: true
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.INITIALS,
|
identifier: MarkType.INITIALS,
|
||||||
@ -930,7 +930,7 @@ export const CreatePage = () => {
|
|||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
<div className={styles.inputWrapper}>
|
<div className={styles.inputWrapper}>
|
||||||
<TextField
|
<TextField
|
||||||
placeholder="User (nip05 / npub)"
|
placeholder="Add user"
|
||||||
value={userInput}
|
value={userInput}
|
||||||
onChange={(e) => setUserInput(e.target.value)}
|
onChange={(e) => setUserInput(e.target.value)}
|
||||||
onKeyDown={handleInputKeyDown}
|
onKeyDown={handleInputKeyDown}
|
||||||
|
@ -48,6 +48,7 @@ import { TooltipChild } from '../../components/TooltipChild.tsx'
|
|||||||
import FileList from '../../components/FileList'
|
import FileList from '../../components/FileList'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import { Mark } from '../../types/mark.ts'
|
import { Mark } from '../../types/mark.ts'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
@ -78,11 +79,10 @@ const SlimPdfView = ({
|
|||||||
const signatureEvents = Object.keys(parsedSignatureEvents)
|
const signatureEvents = Object.keys(parsedSignatureEvents)
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
return (
|
return (
|
||||||
<>
|
<React.Fragment key={filename}>
|
||||||
<div
|
<div
|
||||||
id={filename}
|
id={filename}
|
||||||
ref={(el) => (pdfRefs.current[id] = el)}
|
ref={(el) => (pdfRefs.current[id] = el)}
|
||||||
key={filename}
|
|
||||||
className={styles.fileWrapper}
|
className={styles.fileWrapper}
|
||||||
>
|
>
|
||||||
{pdfFile.pages.map((page, i) => {
|
{pdfFile.pages.map((page, i) => {
|
||||||
@ -132,7 +132,7 @@ const SlimPdfView = ({
|
|||||||
File Separator
|
File Separator
|
||||||
</Divider>
|
</Divider>
|
||||||
)}
|
)}
|
||||||
</>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
@ -538,6 +538,7 @@ export const VerifyPage = () => {
|
|||||||
currentFile={currentFile}
|
currentFile={currentFile}
|
||||||
setCurrentFile={setCurrentFile}
|
setCurrentFile={setCurrentFile}
|
||||||
handleDownload={handleExport}
|
handleDownload={handleExport}
|
||||||
|
downloadLabel="Download Sigit"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{displayExportedBy()}
|
{displayExportedBy()}
|
||||||
|
Loading…
Reference in New Issue
Block a user
You can probably use the
??
operator. ShouldDownload Files
be a constant?||
(logical OR) should be used instead of??
(Nullish Coalescing).With
??
if downloadLabel is blank string it will return blank but with||
we will get default valueDownload Files