Merge pull request #49 from joelmathewthomas/ui/update

change processing page progress, and ui change in results

client/src/Pages/ProcessingPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate} from "react-router-dom";
-import { Typography, Container, Paper, Box, LinearProgress } from "@mui/material";
+import { Typography, Container, Paper, Box, LinearProgress, CircularProgress } from "@mui/material";
 import StepperComponent from "../components/StepperComponent";
 import { useMediaContext } from "../contexts/MediaContext";
 import axios from "axios";
@@ -255,11 +255,11 @@ function ProcessingPage() {
         </Typography>
 
         <Box sx={{ mt: 4, mb: 2 }}>
-          <LinearProgress
-            variant="determinate"
-            value={progress}
-            sx={{ height: 10, borderRadius: 5 }}
-          />
+        <CircularProgress 
+          variant="determinate" 
+          value={progress} 
+          sx={{ width: 80, height: 80 }} 
+        />
           <Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
             {Math.round(progress)}% Complete
           </Typography>

client/src/Pages/ResultsPage.tsx

@@ -152,7 +152,7 @@ function ResultsPage() {
           <Grid item xs={12} sm={6}>
             <Card sx={{ height: '100%' }}>
               <CardContent>
-                <Typography variant="h6" gutterBottom>
+                <Typography gutterBottom>
                   File Details
                 </Typography>
                 <Typography variant="body2" color="textSecondary">