sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

refactor: files styling, move styling reset to app from module

Browse Source
This commit is contained in:
enes 2024-08-30 17:58:40 +02:00
parent be9bfc28c8
commit 6abdb0ae2b
3 changed files with 37 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.scss
View File

@ -70,6 +70,18 @@ input {
font-family: inherit; font-family: inherit;
} }
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 */
}
// Shared styles for center content (Create, Sign, Verify) // Shared styles for center content (Create, Sign, Verify)
.files-wrapper { .files-wrapper {
display: flex; display: flex;

42
src/components/FileList/index.tsx
View File

@ -22,30 +22,26 @@ const FileList = ({
const isActive = (file: CurrentUserFile) => file.id === currentFile.id const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.container}> <ul className={styles.files}>
<ul className={styles.files}> {files.map((currentUserFile: CurrentUserFile) => (
{files.map((currentUserFile: CurrentUserFile) => ( <li
<li key={currentUserFile.id}
key={currentUserFile.id} className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`} onClick={() => setCurrentFile(currentUserFile)}
onClick={() => setCurrentFile(currentUserFile)} >
> <div className={styles.fileNumber}>{currentUserFile.id}</div>
<div className={styles.fileNumber}>{currentUserFile.id}</div> <div className={styles.fileInfo}>
<div className={styles.fileInfo}> <div className={styles.fileName}>{currentUserFile.file.name}</div>
<div className={styles.fileName}> </div>
{currentUserFile.file.name}
</div>
</div>
<div className={styles.fileVisual}> <div className={styles.fileVisual}>
{currentUserFile.isHashValid && ( {currentUserFile.isHashValid && (
<FontAwesomeIcon icon={faCheck} /> <FontAwesomeIcon icon={faCheck} />
)} )}
</div> </div>
</li> </li>
))} ))}
</ul> </ul>
</div>
<Button variant="contained" fullWidth onClick={handleDownload}> <Button variant="contained" fullWidth onClick={handleDownload}>
{downloadLabel || 'Download Files'} {downloadLabel || 'Download Files'}
</Button> </Button>

31
src/components/FileList/style.module.scss
View File

@ -1,12 +1,3 @@
.container {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
grid-gap: 0px;
}
.filesPageContainer { .filesPageContainer {
width: 100%; width: 100%;
display: grid; display: grid;
@ -15,18 +6,6 @@
flex-grow: 1; 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 { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -34,14 +13,16 @@ li {
} }
.files { .files {
border-radius: 4px;
background: white;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
grid-gap: 15px; grid-gap: 15px;
max-height: 350px; overflow-y: auto;
overflow: auto; overflow-x: none;
padding: 0 5px 0 0;
margin: 0 -5px 0 0;
} }
.files::-webkit-scrollbar { .files::-webkit-scrollbar {