From 182dcb228c74332ec891ead7579ab4787c1b41a8 Mon Sep 17 00:00:00 2001
From: "matthias.lotz" <matthias.lotz@hobbyhimmel.de>
Date: Wed, 29 Oct 2025 21:34:16 +0100
Subject: [PATCH] refactor(frontend): migrate MultiUploadPage to MUI sx

---
 .../src/Components/Pages/MultiUploadPage.js   | 127 +++++++-----------
 1 file changed, 45 insertions(+), 82 deletions(-)

diff --git a/frontend/src/Components/Pages/MultiUploadPage.js b/frontend/src/Components/Pages/MultiUploadPage.js
index 629fa5f..368d5c7 100644
--- a/frontend/src/Components/Pages/MultiUploadPage.js
+++ b/frontend/src/Components/Pages/MultiUploadPage.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { makeStyles } from '@mui/styles';
 import { Button, Card, CardContent, Typography, Container, Box } from '@mui/material';
 import Swal from 'sweetalert2/dist/sweetalert2.js';
 import 'sweetalert2/src/sweetalert2.scss';
@@ -20,79 +19,9 @@ import { uploadImageBatch } from '../../Utils/batchUpload';
 import '../../App.css';
 // Background.css is now globally imported in src/index.js
 
-const useStyles = makeStyles({
-  container: {
-    paddingTop: '20px',
-    paddingBottom: '40px',
-    minHeight: '80vh'
-  },
-  card: {
-    borderRadius: '12px',
-    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-    padding: '20px',
-    marginBottom: '20px'
-  },
-  headerText: {
-    fontFamily: 'roboto',
-    fontWeight: '400',
-    fontSize: '28px',
-    textAlign: 'center',
-    marginBottom: '10px',
-    color: '#333333'
-  },
-  subheaderText: {
-    fontFamily: 'roboto',
-    fontWeight: '300',
-    fontSize: '16px',
-    color: '#666666',
-    textAlign: 'center',
-    marginBottom: '30px'
-  },
-  actionButtons: {
-    display: 'flex',
-    gap: '15px',
-    justifyContent: 'center',
-    marginTop: '20px',
-    flexWrap: 'wrap'
-  },
-  uploadButton: {
-    borderRadius: '25px',
-    padding: '12px 30px',
-    fontSize: '16px',
-    fontWeight: '500',
-    textTransform: 'none',
-    background: 'linear-gradient(45deg, #4CAF50 30%, #45a049 90%)',
-    color: 'white',
-    '&:hover': {
-      background: 'linear-gradient(45deg, #45a049 30%, #4CAF50 90%)',
-      transform: 'translateY(-2px)',
-      boxShadow: '0 4px 12px rgba(76, 175, 80, 0.3)'
-    },
-    '&:disabled': {
-      background: '#cccccc',
-      color: '#666666'
-    }
-  },
-  clearButton: {
-    borderRadius: '25px',
-    padding: '12px 30px',
-    fontSize: '16px',
-    fontWeight: '500',
-    textTransform: 'none',
-    border: '2px solid #f44336',
-    color: '#f44336',
-    backgroundColor: 'transparent',
-    '&:hover': {
-      backgroundColor: '#f44336',
-      color: 'white',
-      transform: 'translateY(-2px)',
-      boxShadow: '0 4px 12px rgba(244, 67, 54, 0.3)'
-    }
-  }
-});
+// Styles migrated to MUI sx props in-place below
 
 function MultiUploadPage() {
-  const classes = useStyles();
   
   const [selectedImages, setSelectedImages] = useState([]);
   const [metadata, setMetadata] = useState({
@@ -241,14 +170,14 @@ function MultiUploadPage() {
   return (
     <div className="allContainer">
       <Navbar />
-      
-      <Container maxWidth="lg" className={classes.container}>
-        <Card className={classes.card}>
+
+      <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
+        <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>
           <CardContent>
-            <Typography className={classes.headerText}>
+            <Typography sx={{ fontFamily: 'roboto', fontWeight: 400, fontSize: '28px', textAlign: 'center', mb: '10px', color: '#333333' }}>
               Project Image Uploader
             </Typography>
-            <Typography className={classes.subheaderText}>
+            <Typography sx={{ fontFamily: 'roboto', fontWeight: 300, fontSize: '16px', color: '#666666', textAlign: 'center', mb: '30px' }}>
               Lade ein oder mehrere Bilder von deinem Projekt hoch und beschreibe dein Projekt in wenigen Worten.
               <br />
               Die Bilder werden nur hier im Hobbyhimmel auf dem Monitor gezeigt, es wird an keine Dritten weiter gegeben.
@@ -275,24 +204,58 @@ function MultiUploadPage() {
                       onMetadataChange={setMetadata}
                     />
 
-                    <div className={classes.actionButtons}>
+                    <Box sx={{ display: 'flex', gap: '15px', justifyContent: 'center', mt: '20px', flexWrap: 'wrap' }}>
                       <Button
-                        className={classes.uploadButton}
+                        sx={{
+                          borderRadius: '25px',
+                          px: '30px',
+                          py: '12px',
+                          fontSize: '16px',
+                          fontWeight: 500,
+                          textTransform: 'none',
+                          background: 'linear-gradient(45deg, #4CAF50 30%, #45a049 90%)',
+                          color: 'white',
+                          '&:hover': {
+                            background: 'linear-gradient(45deg, #45a049 30%, #4CAF50 90%)',
+                            transform: 'translateY(-2px)',
+                            boxShadow: '0 4px 12px rgba(76, 175, 80, 0.3)'
+                          },
+                          '&.Mui-disabled': {
+                            background: '#cccccc',
+                            color: '#666666'
+                          }
+                        }}
                         onClick={handleUpload}
                         disabled={uploading || selectedImages.length === 0}
                         size="large"
                       >
                         🚀 {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} hochladen
                       </Button>
-                      
+
                       <Button
-                        className={classes.clearButton}
+                        sx={{
+                          borderRadius: '25px',
+                          px: '30px',
+                          py: '12px',
+                          fontSize: '16px',
+                          fontWeight: 500,
+                          textTransform: 'none',
+                          border: '2px solid #f44336',
+                          color: '#f44336',
+                          backgroundColor: 'transparent',
+                          '&:hover': {
+                            backgroundColor: '#f44336',
+                            color: 'white',
+                            transform: 'translateY(-2px)',
+                            boxShadow: '0 4px 12px rgba(244, 67, 54, 0.3)'
+                          }
+                        }}
                         onClick={handleClearAll}
                         size="large"
                       >
                         🗑️ Alle entfernen
                       </Button>
-                    </div>
+                    </Box>
                   </>
                 )}