From c64dc1aafad6a6577f7c6fbf5af56e74b051c418 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 16:38:06 +0530
Subject: [PATCH] UI revamp and add download button

---
 client/src/Pages/ResultsPage.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 675b627..dc80bfb 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -84,7 +84,7 @@ function ResultsPage() {
                 <audio
                   ref={mediaFileRef}
                   src={mediaFile.url}
-                  style={{ width: '100%' }}
+                  style={{ width: '100%', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.2)' }}
                   controls
                 />
               </Box>
@@ -103,7 +103,7 @@ function ResultsPage() {
                     <audio
                       ref={audioRefs[index]}
                       src={file.url}
-                      style={{ width: '100%' }}
+                      style={{ width: '100%', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.2)' }}
                       controls
                     />
                   </Box>
@@ -123,7 +123,7 @@ function ResultsPage() {
                     <audio
                       ref={audioRefs[0]}
                       src={downloadedFileURL}
-                      style={{ width: '100%' }}
+                      style={{ width: '100%', borderRadius: '8px', boxShadow: '0 2px 10px rgba(0,0,0,0.2)' }}
                       controls
                     />
                   </Box>
@@ -156,20 +156,18 @@ function ResultsPage() {
             mt: 4,
             display: 'flex',
             justifyContent: 'space-between',
-            gap: 2, // Adds spacing between buttons
-            flexWrap: 'wrap', // Ensures better behavior on smaller screens
+            gap: 2,
+            flexWrap: 'wrap',
           }}
         >
           <Button variant="outlined" color="primary" onClick={() => navigate('/upload')}>
             Process Another File
           </Button>
-          <Button variant="contained" color="primary" onClick={() => navigate('/')}>
-            Back to Home
-          </Button>
-      </Box>
+          <Button variant="contained" color="primary" onClick={() => navigate('/')}>Download All Files</Button>
+        </Box>
       </Paper>
     </Container>
   );
 }
 
-export default ResultsPage;
+export default ResultsPage;
\ No newline at end of file