refactor(frontend): migrate DescriptionInput to MUI sx

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

@@ -1,73 +1,10 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
 import { TextField, Typography, Grid, Box } from '@mui/material';
 
-const useStyles = makeStyles({
-  container: {
-    marginTop: '20px',
-    marginBottom: '20px'
-  },
-  sectionTitle: {
-    fontFamily: 'roboto',
-    fontSize: '18px',
-    color: '#333333',
-    marginBottom: '15px',
-    display: 'block',
-    fontWeight: '500'
-  },
-  fieldLabel: {
-    fontFamily: 'roboto',
-    fontSize: '14px',
-    color: '#555555',
-    marginBottom: '8px',
-    display: 'block'
-  },
-  textField: {
-    width: '100%',
-    marginBottom: '15px',
-    '& .MuiOutlinedInput-root': {
-      borderRadius: '8px'
-    }
-  },
-  requiredField: {
-    '& .MuiOutlinedInput-root': {
-      borderRadius: '8px',
-      '& fieldset': {
-        borderColor: '#E57373'
-      }
-    }
-  },
-  optionalField: {
-    '& .MuiOutlinedInput-root': {
-      borderRadius: '8px',
-      '& fieldset': {
-        borderColor: '#E0E0E0'
-      }
-    }
-  },
-  characterCount: {
-    fontSize: '12px',
-    color: '#999999',
-    textAlign: 'right',
-    marginTop: '-10px',
-    marginBottom: '10px'
-  },
-  requiredIndicator: {
-    color: '#E57373',
-    fontSize: '16px'
-  },
-  optionalIndicator: {
-    color: '#9E9E9E',
-    fontSize: '12px',
-    fontStyle: 'italic'
-  }
-});
-
 function DescriptionInput({ 
   metadata = {},
   onMetadataChange
 }) {
-  const classes = useStyles();
 
   const handleFieldChange = (field, value) => {
     const updatedMetadata = {
@@ -79,19 +16,71 @@ function DescriptionInput({
 
   const currentYear = new Date().getFullYear();
 
+  const fieldLabelSx = {
+    fontFamily: 'roboto',
+    fontSize: '14px',
+    color: '#555555',
+    marginBottom: '8px',
+    display: 'block'
+  };
+
+  const sectionTitleSx = {
+    fontFamily: 'roboto',
+    fontSize: '18px',
+    color: '#333333',
+    marginBottom: '15px',
+    display: 'block',
+    fontWeight: 500
+  };
+
+  const textFieldSx = {
+    width: '100%',
+    marginBottom: '15px',
+    '& .MuiOutlinedInput-root': {
+      borderRadius: '8px'
+    }
+  };
+
+  const requiredFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      borderRadius: '8px',
+      '& fieldset': {
+        borderColor: '#E57373'
+      }
+    }
+  };
+
+  const optionalFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      borderRadius: '8px',
+      '& fieldset': {
+        borderColor: '#E0E0E0'
+      }
+    }
+  };
+
+  const characterCountSx = {
+    fontSize: '12px',
+    color: '#999999',
+    textAlign: 'right',
+    marginTop: '-10px',
+    marginBottom: '10px'
+  };
+
+  const requiredIndicatorSx = { color: '#E57373', fontSize: '16px' };
+  const optionalIndicatorSx = { color: '#9E9E9E', fontSize: '12px', fontStyle: 'italic' };
+
   return (
-    <div className={classes.container}>
+    <Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
-      <Typography className={classes.sectionTitle}>
+      <Typography sx={sectionTitleSx}>📝 Projekt-Informationen</Typography>
-        📝 Projekt-Informationen
+
-      </Typography>
-      
       <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
-          <Typography className={classes.fieldLabel}>
+          <Typography sx={fieldLabelSx}>
-            Jahr <span className={classes.requiredIndicator}>*</span>
+            Jahr <Box component="span" sx={requiredIndicatorSx}>*</Box>
           </Typography>
           <TextField
-            className={`${classes.textField} ${classes.requiredField}`}
+            sx={{ ...textFieldSx, ...requiredFieldSx }}
             variant="outlined"
             type="number"
             value={metadata.year || currentYear}
@@ -105,59 +94,51 @@ function DescriptionInput({
         </Grid>
 
         <Grid item xs={12} sm={6}>
-          <Typography className={classes.fieldLabel}>
+          <Typography sx={fieldLabelSx}>
-            Titel <span className={classes.requiredIndicator}>*</span>
+            Titel <Box component="span" sx={requiredIndicatorSx}>*</Box>
           </Typography>
           <TextField
-            className={`${classes.textField} ${classes.requiredField}`}
+            sx={{ ...textFieldSx, ...requiredFieldSx }}
             variant="outlined"
             value={metadata.title || ''}
             onChange={(e) => handleFieldChange('title', e.target.value)}
             placeholder="z.B. Wohnzimmer Renovierung"
-            inputProps={{
+            inputProps={{ maxLength: 100 }}
-              maxLength: 100
-            }}
           />
         </Grid>
 
         <Grid item xs={12}>
-          <Typography className={classes.fieldLabel}>
+          <Typography sx={fieldLabelSx}>
-            Beschreibung <span className={classes.optionalIndicator}>(optional)</span>
+            Beschreibung <Box component="span" sx={optionalIndicatorSx}>(optional)</Box>
           </Typography>
           <TextField
-            className={`${classes.textField} ${classes.optionalField}`}
+            sx={{ ...textFieldSx, ...optionalFieldSx }}
             multiline
             rows={3}
             variant="outlined"
             value={metadata.description || ''}
             onChange={(e) => handleFieldChange('description', e.target.value)}
             placeholder="Detaillierte Beschreibung des Projekts..."
-            inputProps={{
+            inputProps={{ maxLength: 500 }}
-              maxLength: 500
-            }}
           />
-          <div className={classes.characterCount}>
+          <Box sx={characterCountSx}>{(metadata.description || '').length} / 500 Zeichen</Box>
-            {(metadata.description || '').length} / 500 Zeichen
-          </div>
         </Grid>
 
         <Grid item xs={12}>
-          <Typography className={classes.fieldLabel}>
+          <Typography sx={fieldLabelSx}>
-            Name/Ersteller <span className={classes.optionalIndicator}>(optional)</span>
+            Name/Ersteller <Box component="span" sx={optionalIndicatorSx}>(optional)</Box>
           </Typography>
           <TextField
-            className={`${classes.textField} ${classes.optionalField}`}
+            sx={{ ...textFieldSx, ...optionalFieldSx }}
             variant="outlined"
             value={metadata.name || ''}
             onChange={(e) => handleFieldChange('name', e.target.value)}
             placeholder="Dein Name oder Projektersteller"
-            inputProps={{
+            inputProps={{ maxLength: 50 }}
-              maxLength: 50
-            }}
           />
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }