fix: useSigitProfiles dep, map item keys warnining, sign button styles, placeholder, optional button label #160

Merged
enes merged 7 commits from fix-collection-21-8 into staging 2024-08-21 11:15:45 +00:00
5 changed files with 74 additions and 70 deletions

View File

@ -9,13 +9,15 @@ interface FileListProps {
currentFile: CurrentUserFile
setCurrentFile: (file: CurrentUserFile) => void
handleDownload: () => void
downloadLabel?: string
}
const FileList = ({
files,
currentFile,
setCurrentFile,
handleDownload
handleDownload,
downloadLabel
}: FileListProps) => {
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return (
@ -41,7 +43,7 @@ const FileList = ({
</ul>
</div>
<Button variant="contained" fullWidth onClick={handleDownload}>
Download Files
{downloadLabel || 'Download Files'}

You can probably use the ?? operator. Should Download Files be a constant?

You can probably use the `??` operator. Should `Download Files` be a constant?
Outdated
Review

|| (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 value Download Files

`||` (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 value `Download Files`
</Button>
</div>
)

View File

@ -41,6 +41,67 @@
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 {
@ -92,12 +153,6 @@
position: relative;
}
.actionButtons {
display: flex;
flex-direction: row;
grid-gap: 5px;
}
.inputWrapper {
display: flex;
flex-direction: column;
@ -132,20 +187,6 @@
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 {
display: flex;
flex-direction: row;
@ -167,44 +208,3 @@
flex-direction: column;
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;
}

View File

@ -64,7 +64,8 @@ export const useSigitProfiles = (
})
}
}
}, [pubkeys, profileMetadata])
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pubkeys])
return profileMetadata
}

View File

@ -133,7 +133,7 @@ export const CreatePage = () => {
identifier: MarkType.TEXT,
icon: <FontAwesomeIcon icon={faT} />,
label: 'Text',
active: false
active: true
},
{
identifier: MarkType.SIGNATURE,
@ -151,7 +151,7 @@ export const CreatePage = () => {
identifier: MarkType.FULLNAME,
icon: <FontAwesomeIcon icon={faIdCard} />,
label: 'Full Name',
active: true
active: false
},
{
identifier: MarkType.INITIALS,
@ -930,7 +930,7 @@ export const CreatePage = () => {
<div className={styles.flexWrap}>
<div className={styles.inputWrapper}>
<TextField
placeholder="User (nip05 / npub)"
placeholder="Add user"
value={userInput}
onChange={(e) => setUserInput(e.target.value)}
onKeyDown={handleInputKeyDown}

View File

@ -48,6 +48,7 @@ import { TooltipChild } from '../../components/TooltipChild.tsx'
import FileList from '../../components/FileList'
import { CurrentUserFile } from '../../types/file.ts'
import { Mark } from '../../types/mark.ts'
import React from 'react'
interface PdfViewProps {
files: CurrentUserFile[]
@ -78,11 +79,10 @@ const SlimPdfView = ({
const signatureEvents = Object.keys(parsedSignatureEvents)
if (!hash) return
return (
<>
<React.Fragment key={filename}>
<div
id={filename}
ref={(el) => (pdfRefs.current[id] = el)}
key={filename}
className={styles.fileWrapper}
>
{pdfFile.pages.map((page, i) => {
@ -132,7 +132,7 @@ const SlimPdfView = ({
File Separator
</Divider>
)}
</>
</React.Fragment>
)
})}
</div>
@ -538,6 +538,7 @@ export const VerifyPage = () => {
currentFile={currentFile}
setCurrentFile={setCurrentFile}
handleDownload={handleExport}
downloadLabel="Download Sigit"
/>
)}
{displayExportedBy()}