refactor(frontend): migrate UploadProgress to MUI sx (remove makeStyles)

frontend/src/Components/ComponentUtils/MultiUpload/UploadProgress.js

@@ -1,34 +1,6 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
 import { LinearProgress, Typography, Box } from '@mui/material';
 
-const useStyles = makeStyles({
-  container: {
-    marginTop: '20px',
-    marginBottom: '20px',
-    padding: '20px',
-    border: '1px solid #e0e0e0',
-    borderRadius: '8px',
-    backgroundColor: '#fafafa'
-  },
-  progressBar: {
-    height: '8px',
-    borderRadius: '4px',
-    marginBottom: '10px'
-  },
-  progressText: {
-    fontSize: '14px',
-    color: '#666666',
-    textAlign: 'center'
-  },
-  fileInfo: {
-    fontSize: '12px',
-    color: '#999999',
-    textAlign: 'center',
-    marginTop: '5px'
-  }
-});
-
 function UploadProgress({ 
   progress = 0, 
   currentFile = null, 
@@ -36,43 +8,67 @@ function UploadProgress({
   completedFiles = 0,
   isUploading = false 
 }) {
-  const classes = useStyles();
+  if (!isUploading) return null;
 
-  if (!isUploading) {
+  const containerSx = {
-    return null;
+    marginTop: '20px',
-  }
+    marginBottom: '20px',
+    padding: '20px',
+    border: '1px solid #e0e0e0',
+    borderRadius: '8px',
+    backgroundColor: '#fafafa'
+  };
+
+  const progressBarSx = {
+    height: '8px',
+    borderRadius: '4px',
+    marginBottom: '10px'
+  };
+
+  const progressTextSx = {
+    fontSize: '14px',
+    color: '#666666',
+    textAlign: 'center'
+  };
+
+  const fileInfoSx = {
+    fontSize: '12px',
+    color: '#999999',
+    textAlign: 'center',
+    marginTop: '5px'
+  };
 
   return (
-    <div className={classes.container}>
+    <Box sx={containerSx}>
       <Box display="flex" alignItems="center" marginBottom={2}>
-        <Box width="100%" marginRight={1}>
+        <Box sx={{ width: '100%', marginRight: 1 }}>
           <LinearProgress 
             variant="determinate" 
             value={progress} 
-            className={classes.progressBar}
+            sx={progressBarSx}
           />
         </Box>
         <Box minWidth={35}>
-          <Typography variant="body2" color="textSecondary">
+          <Typography variant="body2" color="text.secondary">
             {Math.round(progress)}%
           </Typography>
         </Box>
       </Box>
       
-      <div className={classes.progressText}>
+      <Box sx={progressTextSx}>
         {currentFile ? (
           <>📤 Uploading: {currentFile}</>
         ) : (
           <>📤 Uploading {totalFiles} Bild{totalFiles !== 1 ? 'er' : ''}...</>
         )}
-      </div>
+      </Box>
       
       {totalFiles > 1 && (
-        <div className={classes.fileInfo}>
+        <Box sx={fileInfoSx}>
           {completedFiles} von {totalFiles} Dateien abgeschlossen
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 }