From 6abdb0ae2bf3f785e6ecc8bb661134e06dbb4c75 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 30 Aug 2024 17:58:40 +0200
Subject: [PATCH] refactor: files styling, move styling reset to app from
 module

---
 src/App.scss                              | 12 +++++++
 src/components/FileList/index.tsx         | 42 ++++++++++-------------
 src/components/FileList/style.module.scss | 31 ++++-------------
 3 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index b24e16a..09a896b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -70,6 +70,18 @@ input {
   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)
 .files-wrapper {
   display: flex;
diff --git a/src/components/FileList/index.tsx b/src/components/FileList/index.tsx
index 38fab88..a47ace7 100644
--- a/src/components/FileList/index.tsx
+++ b/src/components/FileList/index.tsx
@@ -22,30 +22,26 @@ const FileList = ({
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
     <div className={styles.wrap}>
-      <div className={styles.container}>
-        <ul className={styles.files}>
-          {files.map((currentUserFile: CurrentUserFile) => (
-            <li
-              key={currentUserFile.id}
-              className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
-              onClick={() => setCurrentFile(currentUserFile)}
-            >
-              <div className={styles.fileNumber}>{currentUserFile.id}</div>
-              <div className={styles.fileInfo}>
-                <div className={styles.fileName}>
-                  {currentUserFile.file.name}
-                </div>
-              </div>
+      <ul className={styles.files}>
+        {files.map((currentUserFile: CurrentUserFile) => (
+          <li
+            key={currentUserFile.id}
+            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
+            onClick={() => setCurrentFile(currentUserFile)}
+          >
+            <div className={styles.fileNumber}>{currentUserFile.id}</div>
+            <div className={styles.fileInfo}>
+              <div className={styles.fileName}>{currentUserFile.file.name}</div>
+            </div>
 
-              <div className={styles.fileVisual}>
-                {currentUserFile.isHashValid && (
-                  <FontAwesomeIcon icon={faCheck} />
-                )}
-              </div>
-            </li>
-          ))}
-        </ul>
-      </div>
+            <div className={styles.fileVisual}>
+              {currentUserFile.isHashValid && (
+                <FontAwesomeIcon icon={faCheck} />
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
       <Button variant="contained" fullWidth onClick={handleDownload}>
         {downloadLabel || 'Download Files'}
       </Button>
diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss
index 22d8515..a05fcbd 100644
--- a/src/components/FileList/style.module.scss
+++ b/src/components/FileList/style.module.scss
@@ -1,12 +1,3 @@
-.container {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-}
-
 .filesPageContainer {
   width: 100%;
   display: grid;
@@ -15,18 +6,6 @@
   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;
@@ -34,14 +13,16 @@ li {
 }
 
 .files {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+
   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;
+  overflow-y: auto;
+  overflow-x: none;
 }
 
 .files::-webkit-scrollbar {