refactor(frontend): migrate MultiImageDropzone to MUI sx

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

@@ -1,53 +1,7 @@
-import React, { useCallback } from 'react';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles({
-  dropzone: {
-    border: '2px dashed #cccccc',
-    borderRadius: '8px',
-    padding: '40px 20px',
-    textAlign: 'center',
-    cursor: 'pointer',
-    transition: 'all 0.3s ease',
-    backgroundColor: '#fafafa',
-    minHeight: '200px',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    '&:hover': {
-      borderColor: '#999999',
-      backgroundColor: '#f0f0f0'
-    }
-  },
-  dropzoneActive: {
-    borderColor: '#4CAF50',
-    backgroundColor: '#e8f5e8'
-  },
-  dropzoneText: {
-    fontSize: '18px',
-    fontFamily: 'roboto',
-    color: '#666666',
-    margin: '10px 0'
-  },
-  dropzoneSubtext: {
-    fontSize: '14px',
-    color: '#999999',
-    fontFamily: 'roboto'
-  },
-  fileCount: {
-    fontSize: '16px',
-    color: '#4CAF50',
-    fontWeight: 'bold',
-    marginTop: '10px'
-  },
-  hiddenInput: {
-    display: 'none'
-  }
-});
+import React from 'react';
+import { Box, Typography } from '@mui/material';
 
 function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
-  const classes = useStyles();
 
   const handleFiles = (files) => {
     // Filter nur Bilddateien
@@ -102,30 +56,69 @@ function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
     }
   };
 
+  const dropzoneSx = {
+    border: '2px dashed #cccccc',
+    borderRadius: '8px',
+    padding: '40px 20px',
+    textAlign: 'center',
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+    backgroundColor: '#fafafa',
+    minHeight: '200px',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:hover': {
+      borderColor: '#999999',
+      backgroundColor: '#f0f0f0'
+    }
+  };
+
+  const dropzoneTextSx = {
+    fontSize: '18px',
+    fontFamily: 'roboto',
+    color: '#666666',
+    margin: '10px 0'
+  };
+
+  const dropzoneSubtextSx = {
+    fontSize: '14px',
+    color: '#999999',
+    fontFamily: 'roboto'
+  };
+
+  const fileCountSx = {
+    fontSize: '16px',
+    color: '#4CAF50',
+    fontWeight: 'bold',
+    marginTop: '10px'
+  };
+
   return (
-    <div>
-      <div 
-        className={classes.dropzone}
+    <Box>
+      <Box
+        sx={dropzoneSx}
         onDragOver={handleDragOver}
         onDragEnter={handleDragEnter}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         onClick={handleClick}
       >
-        <div className={classes.dropzoneText}>
+        <Typography sx={dropzoneTextSx}>
           📸 Mehrere Bilder hier hinziehen oder klicken zum Auswählen
-        </div>
+        </Typography>
 
-        <div className={classes.dropzoneSubtext}>
+        <Typography sx={dropzoneSubtextSx}>
           Unterstützte Formate: JPG, PNG, GIF, WebP (max. 10MB pro Datei)
-        </div>
+        </Typography>
 
         {selectedImages.length > 0 && (
-          <div className={classes.fileCount}>
+          <Typography sx={fileCountSx}>
             ✅ {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} ausgewählt
-          </div>
+          </Typography>
         )}
-      </div>
+      </Box>
 
       <input
         id="multi-file-input"
@@ -133,9 +126,9 @@ function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
         multiple
         accept="image/*"
         onChange={handleFileInputChange}
-        className={classes.hiddenInput}
+        style={{ display: 'none' }}
       />
-    </div>
+    </Box>
   );
 }