feat: styling

src/sections/replace-file/ReplaceFile.tsx

@@ -7,6 +7,7 @@ import { FileUploader } from '../shared/file-uploader/FileUploader'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { AppLoader } from '../shared/layout/app-loader/AppLoader'
 import { PageNotFound } from '../page-not-found/PageNotFound'
+import { FileUploadState } from '../shared/file-uploader/fileUploaderReducer'
 
 interface ReplaceFileProps {
   fileRepository: FileRepository
@@ -47,7 +48,7 @@ export const ReplaceFile = ({
     return <PageNotFound />
   }
 
-  const handleUploadedFiles = (files: File[]) => {
+  const handleUploadedFiles = (files: FileUploadState[]) => {
     console.group('Uploaded files from callback')
     console.log(files)
     console.groupEnd()
@@ -65,7 +66,7 @@ export const ReplaceFile = ({
         datasetPersistentId={datasetPidFromParams}
         onUploadedFiles={handleUploadedFiles}
         storageConfiguration="S3"
-        multiple={false}
+        multiple={true} // TODO:ME - Change to false here, should allow only one, Also test removing from bottom file list and upload should be enabled again
       />
     </section>
   )

src/sections/shared/file-uploader/FileUploader.module.scss

@@ -1,85 +1,144 @@
+@use 'sass:color';
 @import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
 
-.file_uploader {
-  min-height: 5em;
-}
-
-.files {
-  display: grid;
-  grid-template-columns: repeat(4, auto);
-}
-
-.uploaded_files {
+.file_uploader_drop_zone {
   display: grid;
-  grid-template-columns: 4rem repeat(3, auto) 3.5rem;
-}
-
-.selected_file > div {
-  margin-bottom: 0.5rem;
-  padding: 0.5rem;
-  background-color: #ffc !important;
-}
+  place-items: center;
+  min-height: 80px;
+  background-color: $dv-primary-text-color;
+  transition: background-color 0.3s ease-in-out;
 
-.file:nth-of-type(even) > div {
-  margin-bottom: 0.5rem;
-  padding: 0.5rem;
-  background-color: #f8f9fc;
+  &.is_dragging {
+    background-color: $dv-info-box-color;
+    border: dashed 2px color.adjust($dv-info-box-color, $lightness: -55%);
+  }
 }
 
-.file:nth-of-type(odd) > div {
-  margin-bottom: 0.5rem;
-  padding: 0.5rem;
-  background-color: white;
-}
-
-.file {
-  display: contents;
-}
-
-.selected_file {
-  display: contents;
-}
-
-.file_name {
-  padding: 0.25em;
-}
-
-.failed {
-  padding: 0.25em;
-  color: $dv-danger-color;
-  text-decoration: line-through;
-}
-
-.file_size {
-  padding: 0.25em;
-}
-
-.cancel_upload {
-  padding-block: 0.1rem;
-}
-
-.upload_progress {
-  min-width: 10em;
-}
-
-.icon {
-  display: inline-block;
-}
-
-.info {
-  padding: 0.5em;
+.drag_drop_msg {
+  margin: 0;
   color: $dv-subtext-color;
   font-size: 1.3em;
   text-align: center;
 }
 
-.selected_files_checkbox {
-  display: inline-flex;
-  align-items: center;
-}
-
-.save_btn {
+.uploading_files_list {
   display: flex;
-  justify-content: flex-end;
-  padding-top: 1rem;
-}
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+
+  .uploading_file {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: color.adjust($dv-secondary-color, $alpha: -0.8);
+    border-radius: 8px;
+
+    .info_progress_wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+
+      .info_wrapper {
+        display: flex;
+        gap: 1rem;
+        align-items: baseline;
+        color: $dv-subtext-color;
+        text-wrap: nowrap;
+      }
+
+      .upload_progress {
+        width: 125px;
+      }
+    }
+
+    .cancel_upload {
+      button {
+        // background-color: color.adjust($dv-secondary-color, $lightness: -15%);
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    .uploading_file {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+
+      .info_progress_wrapper {
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+      }
+
+      .info_wrapper {
+        min-width: 200px;
+      }
+
+      .upload_progress {
+        width: 150px;
+      }
+    }
+  }
+}
+
+// .uploaded_files {
+//   display: grid;
+//   grid-template-columns: 4rem repeat(3, auto) 3.5rem;
+// }
+
+// .selected_file > div {
+//   margin-bottom: 0.5rem;
+//   padding: 0.5rem;
+//   background-color: #ffc !important;
+// }
+
+// .file:nth-of-type(even) > div {
+//   margin-bottom: 0.5rem;
+//   padding: 0.5rem;
+//   background-color: #f8f9fc;
+// }
+
+// .file:nth-of-type(odd) > div {
+//   margin-bottom: 0.5rem;
+//   padding: 0.5rem;
+//   background-color: white;
+// }
+
+// .file {
+//   display: contents;
+// }
+
+// .selected_file {
+//   display: contents;
+// }
+
+// .failed {
+//   padding: 0.25em;
+//   color: $dv-danger-color;
+//   text-decoration: line-through;
+// }
+
+// .cancel_upload {
+//   padding-block: 0.1rem;
+// }
+
+// .icon {
+//   display: inline-block;
+// }
+
+// .selected_files_checkbox {
+//   display: inline-flex;
+//   align-items: center;
+// }
+
+// .save_btn {
+//   display: flex;
+//   justify-content: flex-end;
+//   padding-top: 1rem;
+// }