From 84c848109fb31603b37057926c1f49eac8417359 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 16:11:42 +0530
Subject: [PATCH] UI Cleanup

---
 client/src/Pages/ResultsPage.tsx | 44 +++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 1c0e91d..b2beb47 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -75,11 +75,11 @@ function ResultsPage() {
               <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', p: 4, bgcolor: 'rgba(0, 0, 0, 0.04)', borderRadius: 2 }}>
               <VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
               <Typography variant="h6" gutterBottom>
-                {mediaFile.name} (Processed)
+                {mediaFile.name} (Original)
               </Typography>
               <Box sx={{ width: '100%', mt: 2, mb: 2 }}>
                 <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
-                  Original: {mediaFile.name}
+                  {mediaFile.name}
                 </Typography>
                 <audio
                   ref={mediaFileRef}
@@ -89,7 +89,13 @@ function ResultsPage() {
                 />
               </Box>
               {audioClass === "Music" ? (
-                extractedFiles.map((file, index) => (
+                <>
+                <Box sx={{ width: '100%', mt: 2 }}>
+                  <Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
+                    Processed Files
+                  </Typography>
+                </Box>
+                {extractedFiles.map((file, index) => (
                   <Box key={index} sx={{ width: '100%', mt: 2 }}>
                     <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
                       {file.name}
@@ -101,19 +107,27 @@ function ResultsPage() {
                       controls
                     />
                   </Box>
-                ))
+                ))}
+              </>
               ) : (
-                <Box sx={{ width: '100%', mt: 2 }}>
-                  <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
-                      {mediaFile?.name}
+                <>
+                  <Box sx={{ width: '100%', mt: 2 }}>
+                    <Typography variant="h6" color="textPrimary" sx={{ mb: 1 }}>
+                      Processed File
                     </Typography>
-                  <audio
-                    ref={audioRefs[0]}
-                    src={downloadedFileURL}
-                    style={{ width: '100%' }}
-                    controls
-                  />
-                </Box>
+                  </Box>
+                  <Box sx={{ width: '100%', mt: 2 }}>
+                    <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
+                        {mediaFile?.name}
+                      </Typography>
+                    <audio
+                      ref={audioRefs[0]}
+                      src={downloadedFileURL}
+                      style={{ width: '100%' }}
+                      controls
+                    />
+                  </Box>
+                </>
               )}
             </Box>
           )}
@@ -127,7 +141,7 @@ function ResultsPage() {
                   File Details
                 </Typography>
                 <Typography variant="body2" color="textSecondary">
-                  <strong>Name:</strong> {mediaFile.name} (Processed)
+                  <strong>Name:</strong> {mediaFile.name}
                 </Typography>
                 <Typography variant="body2" color="textSecondary">
                   <strong>Type:</strong> {mediaFile.type}