Front end

Frontend/src/components/CardComponent/CardComponent.jsx

@@ -4,6 +4,7 @@ import styles from './CardComponent.module.css';
 import { fetchTranscriptionById } from '../../services/api';
 import { fetchAuthSession } from 'aws-amplify/auth';
 
+
 export const Card = ({ id, title, timestamp, description }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [detailedData, setDetailedData] = useState(null);

Frontend/src/components/CardComponent/CardComponent.module.css

@@ -1,6 +1,6 @@
 .card {
     background-color: #f6f9fa;
-    width: 20rem;
+    min-width: 20rem;
     margin: 0.313rem;
     padding: 0.938rem;
     border-radius: 0.5rem;
@@ -40,15 +40,21 @@
     bottom: auto;
     transform: translate(-50%, -50%);
     background: #fff;
-    padding: 1.25rem;
+    padding: 2rem;
     border-radius: 0.5rem;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
-    width: 80%;
-    max-width: 31.25rem;
+    width: 60%;
+    height: 60%;
     max-height: 80vh;
     overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.8em; 
 }
 
+
 .overlay {
     background-color: rgba(0, 0, 0, 0.75);
 }
@@ -57,17 +63,19 @@
     background-color: #003255;
     color: #fff;
     border: none;
-    border-radius: 0.25rem;
-    padding: 0.625rem;
+    border-radius: 0.25em;
+    padding: 0.625em;
     cursor: pointer;
-    margin-top: 0.625rem;
+    margin-top: 0.625em;
+    font-size: 1em; 
 }
 
 @media (max-width: 37.5rem) {
 
 
     .modal {
-        width: 90%;
-        max-height: 90vh;
+        width: 70%;
+        height: 60%;
+        font-size: 1em; 
     }
 }

Frontend/src/components/TitleBar/TitleBar.module.css

@@ -15,6 +15,8 @@
 }
 
 .burgermenu {
+    background: initial;
+    border: none;
     display: block;
     position: absolute;
     right: 0rem;
@@ -46,7 +48,6 @@
 }
 
 .side_nav {
-    /* height: 100%; */
     width: 15.625rem;
     position: fixed;
     right: 0;
@@ -84,7 +85,6 @@
     top: 0;
     left: 0;
     width: 100%;
-    /* height: 100%; */
     background: rgba(0,0,0,0.5);
     z-index: 0;
     display: none;
@@ -115,11 +115,10 @@
 
 .buttons {
     display: flex;
-    flex-direction: column; /* If you want them to be stacked vertically */
-    gap: 0.625rem; /* Adjust the gap value to the desired spacing */
+    flex-direction: column;
+    gap: 0.625rem; 
 }
 
-/* Optional: If you want horizontal spacing */
 .buttons.horizontal {
     flex-direction: row;
 }

Frontend/src/components/UploadButton/UploadButton.jsx

@@ -12,15 +12,14 @@ export const UploadButton = () => {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
     fileInput.accept = '.vtt';
-    fileInput.style.display = 'none';
 
     fileInput.addEventListener('change', async (event) => {
       const file = event.target.files[0];
       if (file) {
         const fileName = file.name;
         const fileExtension = fileName.split('.').pop();
 
-        if (fileExtension === 'vtt') {
+        if (fileExtension === 'vtt' && file.size <= maxSize) {
           try {
             setIsLoading(true);
             setMessage('');
@@ -56,7 +55,6 @@ export const UploadButton = () => {
         }
       }
     });
-
     fileInput.click();
   };
 
@@ -69,4 +67,4 @@ export const UploadButton = () => {
       {message && <p className={styles.message}>{message}</p>}
     </div>
   );
-};
+};

Frontend/src/pages/DashBoard.jsx

@@ -9,6 +9,7 @@ import { fetchAuthSession } from 'aws-amplify/auth';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
+
 export const DashBoard = ({ user }) => {
   const [transcriptions, setTranscriptions] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
@@ -39,12 +40,6 @@ export const DashBoard = ({ user }) => {
       } else if (windowWidth <= 1200) {
         setCardsPerPage(6);
         setIsMobile(false);
-      } else if (windowWidth >= 2000) {
-        setCardsPerPage(12);
-        setIsMobile(false);
-      } else {
-        setCardsPerPage(6);
-        setIsMobile(false);
       }
     };
 

Frontend/src/pages/DashBoard.module.css

@@ -19,24 +19,30 @@
     flex-direction: column;
     width: 100%;
     background-color: #f6f9fa;
-    justify-content: space-between; /* Ensure the pagination is at the bottom */
+    justify-content: space-between;
 }
 
 .cardsContainer {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
     padding: 1.25rem;
-    flex-grow: 1;
+    flex-grow: 2;
+}
+
+@media (max-width: 48rem) {
+    .cardsContainer {
+        grid-template-columns: 1fr; 
+    }
 }
 
 .pagination {
     display: flex;
     height: 8vh;
     justify-content: space-between;
-    padding: 0,5rem;
+    padding: 0.5rem;
     background-color: #f6f9fa;
-    box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better separation */
+    box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.1);
 }
 
 .pagination button {
@@ -62,4 +68,3 @@
         width: 100%;
     }
 }
-