hobbyhimmel/Project-Image-Uploader
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): migrate MultiUploadPage to MUI sx

Browse Source
This commit is contained in:
Matthias Lotz 2025-10-29 21:34:16 +01:00
parent 494c09e062
commit 182dcb228c
1 changed files with 45 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/src/Components/Pages/MultiUploadPage.js
View File

@ -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>
</>
)}