From 52f1090c3591c77aa2d219f40a703ced3f5c25f2 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 20 Aug 2024 09:23:42 +0200
Subject: [PATCH] fix: leaky styling and warnings

Closes #147
---
 src/components/FileList/style.module.scss     |  1 -
 .../MarkFormField/style.module.scss           | 92 +++++++++----------
 src/components/UserAvatar/index.tsx           |  2 +-
 src/pages/create/index.tsx                    |  5 +-
 src/pages/create/style.module.scss            |  4 +
 src/pages/home/index.tsx                      |  6 +-
 6 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/src/components/FileList/style.module.scss b/src/components/FileList/style.module.scss
index 2b9c363..92fc7fc 100644
--- a/src/components/FileList/style.module.scss
+++ b/src/components/FileList/style.module.scss
@@ -77,7 +77,6 @@ ul {
 }
 
 .fileItem:hover {
-  transition: ease 0.2s;
   background: #4c82a3;
   color: white;
 }
diff --git a/src/components/MarkFormField/style.module.scss b/src/components/MarkFormField/style.module.scss
index b5c6bb9..ef80df0 100644
--- a/src/components/MarkFormField/style.module.scss
+++ b/src/components/MarkFormField/style.module.scss
@@ -8,6 +8,39 @@
   left: 0;
   align-items: center;
   z-index: 1000;
+
+  button {
+    transition: ease 0.2s;
+    width: auto;
+    border-radius: 4px;
+    outline: unset;
+    border: unset;
+    background: unset;
+    color: #ffffff;
+    background: #4c82a3;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 8px 15px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    grid-gap: 12px;
+    justify-content: center;
+    align-items: center;
+    text-decoration: unset;
+    position: relative;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #5e8eab;
+    color: white;
+  }
+
+  button:active {
+    background: #447592;
+    color: white;
+  }
 }
 
 .actions {
@@ -19,7 +52,7 @@
   flex-direction: column;
   align-items: center;
   grid-gap: 15px;
-  box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
+  box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
   max-width: 750px;
 
   &.expanded {
@@ -73,7 +106,7 @@
 
 .textInput {
   height: 100px;
-  background: rgba(0,0,0,0.1);
+  background: rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   border: solid 2px #4c82a3;
   display: flex;
@@ -84,17 +117,19 @@
 
 .input {
   border-radius: 4px;
-  border: solid 1px rgba(0,0,0,0.15);
+  border: solid 1px rgba(0, 0, 0, 0.15);
   padding: 5px 10px;
   font-size: 16px;
   width: 100%;
-  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100%),
+    linear-gradient(white, white);
 }
 
 .input:focus {
-  border: solid 1px rgba(0,0,0,0.15);
+  border: solid 1px rgba(0, 0, 0, 0.15);
   outline: none;
-  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
+  background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 100%),
+    linear-gradient(white, white);
 }
 
 .actionsBottom {
@@ -105,41 +140,6 @@
   align-items: center;
 }
 
-button {
-  transition: ease 0.2s;
-  width: auto;
-  border-radius: 4px;
-  outline: unset;
-  border: unset;
-  background: unset;
-  color: #ffffff;
-  background: #4c82a3;
-  font-weight: 500;
-  font-size: 14px;
-  padding: 8px 15px;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  grid-gap: 12px;
-  justify-content: center;
-  align-items: center;
-  text-decoration: unset;
-  position: relative;
-  cursor: pointer;
-}
-
-button:hover {
-  transition: ease 0.2s;
-  background: #5e8eab;
-  color: white;
-}
-
-button:active {
-  transition: ease 0.2s;
-  background: #447592;
-  color: white;
-}
-
 .submitButton {
   width: 100%;
   max-width: 300px;
@@ -172,18 +172,18 @@ button:active {
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 3px;
-  background: rgba(0,0,0,0.1);
-  color: rgba(0,0,0,0.5);
+  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);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .paginationButtonDone {
   background: #5e8eab;
-  color: rgb(255,255,255);
+  color: rgb(255, 255, 255);
 }
 
 .paginationButtonCurrent {
@@ -204,7 +204,7 @@ button:active {
   background: white;
   color: #434343;
   padding: 5px 30px;
-  box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
+  box-shadow: 0px -3px 4px 0 rgb(0, 0, 0, 0.1);
   position: absolute;
   top: -25px;
 }
diff --git a/src/components/UserAvatar/index.tsx b/src/components/UserAvatar/index.tsx
index 9ae60ce..6049a07 100644
--- a/src/components/UserAvatar/index.tsx
+++ b/src/components/UserAvatar/index.tsx
@@ -30,7 +30,7 @@ export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
           padding: 0
         }}
       />
-      {name ? <label className={styles.username}>{name}</label> : null}
+      {name ? <span className={styles.username}>{name}</span> : null}
     </Link>
   )
 }
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index a544d0f..7da2b79 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -915,7 +915,7 @@ export const CreatePage = () => {
               </ol>
               <Button variant="contained" onClick={handleUploadButtonClick}>
                 <FontAwesomeIcon icon={faUpload} />
-                Upload new files
+                <span className={styles.uploadFileText}>Upload new files</span>
                 <input
                   ref={fileInputRef}
                   hidden={true}
@@ -947,6 +947,7 @@ export const CreatePage = () => {
                   }}
                 />
                 <Select
+                  name="add-user-role"
                   aria-label="role"
                   value={userRole}
                   variant="filled"
@@ -1113,6 +1114,7 @@ const DisplayUser = ({
                 />
               </div>
               <Select
+                name={`change-user-role-${user.pubkey}`}
                 aria-label="role"
                 value={user.role}
                 variant="outlined"
@@ -1287,6 +1289,7 @@ const SignerRow = ({
         />
       </div>
       <Select
+        name={`change-user-role-${user.pubkey}`}
         aria-label="role"
         value={user.role}
         variant="outlined"
diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss
index 1f40fa6..2a1a1d8 100644
--- a/src/pages/create/style.module.scss
+++ b/src/pages/create/style.module.scss
@@ -56,6 +56,10 @@
   }
 }
 
+.uploadFileText {
+  margin-left: 12px;
+}
+
 .paperGroup {
   border-radius: 4px;
   background: white;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 0f0329b..ddc777e 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -225,11 +225,11 @@ export const HomePage = () => {
           type="button"
           aria-label="upload files"
         >
-          <input {...getInputProps()} />
+          <input id="file-upload" {...getInputProps()} />
           {isDragActive ? (
-            <p>Drop the files here ...</p>
+            <label htmlFor="file-upload">Drop the files here ...</label>
           ) : (
-            <p>Click or drag files to upload!</p>
+            <label htmlFor="file-upload">Click or drag files to upload!</label>
           )}
         </button>
         <div className={styles.submissions}>