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

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

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;

View File

@ -22,7 +22,6 @@ 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
@ -32,9 +31,7 @@ const FileList = ({
> >
<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}> <div className={styles.fileName}>{currentUserFile.file.name}</div>
{currentUserFile.file.name}
</div>
</div> </div>
<div className={styles.fileVisual}> <div className={styles.fileVisual}>
@ -45,7 +42,6 @@ const FileList = ({
</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>

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 {