From 7754af83e8430e492852147088676fa43df00374 Mon Sep 17 00:00:00 2001
From: Joel Mathew Thomas <90510078+joelmathewthomas@users.noreply.github.com>
Date: Tue, 18 Mar 2025 21:40:20 +0530
Subject: [PATCH] add border around player

---
 client/src/Pages/PreviewPage.tsx | 2 +-
 client/src/Pages/ResultsPage.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/Pages/PreviewPage.tsx b/client/src/Pages/PreviewPage.tsx
index 96e33a0..250158d 100644
--- a/client/src/Pages/PreviewPage.tsx
+++ b/client/src/Pages/PreviewPage.tsx
@@ -85,7 +85,7 @@ function PreviewPage() {
               <Typography variant="h6" gutterBottom>
                 {mediaFile.name}
               </Typography>
-              <Box sx={{ width: '100%', mt: 2 }}>
+              <Box sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2}}>
                 <SpectrogramPlayer
                   src={mediaFile.url}
                   sxx={JSON.parse(response.spectrogram)}
diff --git a/client/src/Pages/ResultsPage.tsx b/client/src/Pages/ResultsPage.tsx
index 90128b9..2735a50 100644
--- a/client/src/Pages/ResultsPage.tsx
+++ b/client/src/Pages/ResultsPage.tsx
@@ -97,7 +97,7 @@ function ResultsPage() {
               <Typography variant="h6" gutterBottom>
                 {mediaFile.name} (Original)
               </Typography>
-              <Box sx={{ width: '100%', mt: 2, mb: 2 }}>
+              <Box sx={{ width: '100%', mt: 2, mb: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
                 <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
                   {mediaFile.name}
                 </Typography>
@@ -119,7 +119,7 @@ function ResultsPage() {
                   </Typography>
                 </Box>
                 {extractedFiles.map((file, index) => (
-                  <Box key={index} sx={{ width: '100%', mt: 2 }}>
+                  <Box key={index} sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
                     <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
                       {file.name}
                     </Typography>
@@ -142,7 +142,7 @@ function ResultsPage() {
                       Processed File
                     </Typography>
                   </Box>
-                  <Box sx={{ width: '100%', mt: 2 }}>
+                  <Box sx={{ width: '100%', mt: 2, border: `1px solid gray`, p:2, borderRadius: 2 }}>
                     <Typography variant="body2" color="textSecondary" sx={{ mb: 1 }}>
                         {mediaFile?.name}
                       </Typography>