Fixed Upload Data Modal and Download Data Modal

front-end/src/components/composite/downloadModal/downloadModal.module.scss

@@ -14,11 +14,41 @@
   }
 
   .tableWrapper {
-    height: 35rem;
+    height: 30rem;
     @include mixins.scrollbar-dark;
   }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1400px) {
+  .downloadModal {
+    width: 60rem;
+
+    .tableWrapper {
+      height: 30rem;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .downloadModal {
+    width: 50rem;
+    padding: 0 1.5rem;
+
+    .tableWrapper {
+      height: 30rem;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .downloadModal {
+    width: 90vw;
+    max-width: 35rem;
+    padding: 0 1rem;
+
+    .tableWrapper {
+      height: 20rem;
+    }
   }
 }

front-end/src/components/composite/downloadModal/downloadModal.tsx

@@ -1,4 +1,5 @@
 import styles from './downloadModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 import { BaseModal } from '@components/ui/baseModal/BaseModal';
 import { FileTable } from '@components/ui/fileTable/FileTable';
 import { Button } from '@components/ui/button/Button';
@@ -61,7 +62,7 @@ export const DownloadModal = ({ onClose, isOpen }: DownloadModalProps) => {
         <Button 
           onClick={downloadFiles}
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
         >
           Download
           <img src={rightArrowIcon} alt="right arrow"/>

front-end/src/components/composite/presetFilesModal/PresetFilesModal.module.scss

@@ -5,45 +5,41 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 0 1rem;
-  max-width: 90rem;
+  padding: 0 2rem;
+  max-width: 50rem;
 
-  .formWrapper {
-    display: flex;
-    gap: 2rem;
-
-    .uploadForm {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
-
-      .title {
-        all: unset;
-        @include fonts.title-large;
-      }
-    }
+  .title {
+    all: unset;
+    @include fonts.title-large;
+    margin-bottom: 1rem;
+  }
 
-    .selectFiles {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 50%;
+  .tableWrapper {
+    height: 28rem;
+    width: 100%;
+    @include mixins.scrollbar-dark;
+  }
+}
 
-      .title {
-        all: unset;
-        @include fonts.title-large;
-      }
+/* Responsive styles for smaller desktop windows */
+@media screen and (max-width: 1024px) {
+  .presetFilesModal {
+    padding: 0 1.5rem;
+    max-width: 40rem;
 
-      .tableWrapper {
-        height: 35rem;
-        @include mixins.scrollbar-dark;
-      }
+    .tableWrapper {
+      height: 28rem;
     }
   }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
-  }
+@media screen and (max-width: 768px) {
+  .presetFilesModal {
+    padding: 0 1rem;
+    max-width: 100vw;
 
-}
+    .tableWrapper {
+      height: 18rem;
+    }
+  }
+}

front-end/src/components/composite/presetFilesModal/PresetFilesModal.tsx

@@ -1,7 +1,7 @@
 import styles from './PresetFilesModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 import { BaseModal } from '@components/ui/baseModal/BaseModal';
 import { FileTable } from '@components/ui/fileTable/FileTable';
-import { UploadForm } from '@components/ui/uploadForm/UploadForm';
 import { Button } from '@components/ui/button/Button';
 import { useState, useEffect } from 'react';
 import { rightArrowIcon } from '@assets/icons';
@@ -22,8 +22,7 @@ interface PresetFilesModalProps {
 export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }: PresetFilesModalProps) => {
   // TODO: Adjust based on preset
   const [selectedFiles, setSelectedFiles] = useState<FileInformation[]>([]);
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
-  const { data: files, refetch } = useFiles();
+  const { data: files } = useFiles();
 
   // Pre-select files based on currentSources prop
   useEffect(() => {
@@ -37,53 +36,32 @@ export const PresetFilesModal = ({ onClose, isOpen, onSubmit, currentSources }:
   }, [currentSources, files]);
 
   const handleSubmit = async () => {
-    if (selectedFiles.length === 0 && uploadedFiles.length === 0) {
-      showWarningToast('Oops!', 'Please select or upload at least one file');
+    if (selectedFiles.length === 0) {
+      showWarningToast('Oops!', 'Please select at least one file');
       return;
     }
 
-    const uploadPromises = uploadedFiles.map((file) => ApiUtil.uploadFile(file));
-    await Promise.all(uploadPromises);
-
     const fileKeys = selectedFiles.map((file) => file.key);
-
-    const uploadedFolderNames = uploadedFiles.map((file) => {
-      return file.name.substring(0, file.name.lastIndexOf('.'));
-    });
-
-    fileKeys.push(...uploadedFolderNames);
-
     onSubmit(fileKeys);
     onClose();
-    refetch(); // Refetch files after upload
   };
 
   return (
     <BaseModal isOpen={isOpen} onClose={onClose}>
       <div className={styles.presetFilesModal}>
-
-        <div className={styles.formWrapper}>
-          <div className={styles.uploadForm}>
-            <h2 className={styles.title}>Upload your files</h2>
-            <UploadForm files={uploadedFiles} setFiles={setUploadedFiles} accept={'.bin'}/>
-          </div>
-
-          <div className={styles.selectFiles}>
-            <h2 className={styles.title}>...Or select existing ones</h2>
-            <div className={styles.tableWrapper}>
-              <FileTable 
-                files={getFolders(files || [])} 
-                selectedFiles={selectedFiles} 
-                setSelectedFiles={setSelectedFiles} 
-              />
-            </div>
-          </div>
+        <h2 className={styles.title}>Select a file</h2>
+        <div className={styles.tableWrapper}>
+          <FileTable 
+            files={getFolders(files || [])} 
+            selectedFiles={selectedFiles} 
+            setSelectedFiles={setSelectedFiles} 
+          />
         </div>
 
         <Button 
           onClick={handleSubmit}
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
         >
           <span>Submit</span>
           <img src={rightArrowIcon} alt="right arrow"/>

front-end/src/components/composite/presetList/PresetList.module.scss

@@ -1,12 +1,13 @@
 @use '@styles/_fonts';
-
+@use '@styles/_mixins';
 
 .presetListWrapper {
   display: flex;
   flex-direction: column;
   background-color: var(--background);
   width: 100%;
   padding-bottom: 4rem;
+  padding-right: 1rem;
 
   .title {
     all: unset;
@@ -18,10 +19,64 @@
 
   .presetList {
     display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-template-columns: repeat(4, auto);
     gap: 1.5rem;
     width: max-content;
     margin: 0 auto;
   }
+}
+
+/* Responsive styles for larger screens */
+@include mixins.respond-to(ultrawide) {
+  .presetListWrapper {
+    .presetList {
+      grid-template-columns: repeat(3, auto);
+      gap: 1.5rem;
+    }
+  }
+}
+
+/* Responsive styles for smaller desktop windows */
+@include mixins.respond-to(desktop) {
+  .presetListWrapper {
+    padding-right: 1rem;
 
+    .presetList {
+      grid-template-columns: repeat(2, auto);
+      gap: 1.5rem;
+    }
+  }
+}
+
+@include mixins.respond-to(tablet) {
+  .presetListWrapper {
+    padding-right: 0.75rem;
+
+    .title {
+      margin-left: 10%;
+    }
+
+    .presetList {
+      grid-template-columns: repeat(2, auto);
+      gap: 1.25rem;
+    }
+  }
+}
+
+@include mixins.respond-to(mobile) {
+  .presetListWrapper {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+
+    .title {
+      margin-left: 0.5rem;
+    }
+
+    .presetList {
+      grid-template-columns: 1fr;
+      width: fit-content;
+      margin: 0 auto;
+      gap: 1rem;
+    }
+  }
 }

front-end/src/components/composite/presetList/presetCard/PresetCard.tsx

@@ -26,5 +26,4 @@ export const PresetCard = ({ image, name, description, fileCount, onClick }: Pre
       </div>
     </button>
   );
-};
-
+};

front-end/src/components/composite/uploadModal/uploadModal.module.scss

@@ -1,19 +1,30 @@
 @use '@styles/_fonts';
 
+
 .uploadModal {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 40rem;
-  height: 34rem;
   padding: 0 2rem;
 
   .title {
     all: unset;
     @include fonts.title-large;
   }
+}
+
+@media screen and (max-width: 1024px) {
+  .uploadModal {
+    width: 35rem;
+    padding: 0 1.5rem;
+  }
+}
 
-  .submitButton {
-    margin-top: 1.25rem;
+@media screen and (max-width: 768px) {
+  .uploadModal {
+    width: 90vw;
+    max-width: 26rem;
+    padding: 0 1rem;
   }
 }

front-end/src/components/composite/uploadModal/uploadModal.tsx

@@ -9,6 +9,7 @@ import { useFiles } from '@lib/files/useFiles';
 import { showErrorToast, showSuccessToast } from '@components/ui/toastNotification/ToastNotification';
 import { rightArrowIcon } from '@assets/icons';
 import styles from './uploadModal.module.scss';
+import baseModalStyles from '@components/ui/baseModal/BaseModal.module.scss';
 
 interface UploadModalProps {
   isOpen: boolean;
@@ -80,7 +81,7 @@ export const UploadModal = ({ isOpen, onClose }: UploadModalProps) => {
         <Button 
           onClick={submitFiles} 
           textSize={'2rem'}
-          className={styles.submitButton}
+          className={baseModalStyles.submitButton}
           disabled={files.length === 0}
         >
           <span>Submit</span>