refactor(frontend): Simplify success display styling
- Reduce success block complexity to match original styling level - Keep same information (group ID, next steps, GDPR contact) - Maintain consistent Material-UI sx usage with rest of app
This commit is contained in:
parent
5bc2b0d222
commit
6745f89f38
|
|
@ -326,11 +326,11 @@ function MultiUploadPage() {
|
||||||
) : (
|
) : (
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
mt: 4,
|
mt: 4,
|
||||||
p: 4,
|
p: 3,
|
||||||
borderRadius: '16px',
|
borderRadius: '12px',
|
||||||
background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
|
background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
boxShadow: '0 8px 32px rgba(76, 175, 80, 0.4)',
|
boxShadow: '0 4px 20px rgba(76, 175, 80, 0.4)',
|
||||||
animation: 'slideIn 0.5s ease-out',
|
animation: 'slideIn 0.5s ease-out',
|
||||||
'@keyframes slideIn': {
|
'@keyframes slideIn': {
|
||||||
from: {
|
from: {
|
||||||
|
|
@ -343,128 +343,48 @@ function MultiUploadPage() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
{/* Success Icon & Title */}
|
<Typography sx={{ fontSize: '28px', fontWeight: 'bold', mb: 1 }}>
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, mb: 2 }}>
|
✅ Upload erfolgreich!
|
||||||
<Box sx={{
|
</Typography>
|
||||||
bgcolor: 'white',
|
<Typography sx={{ fontSize: '18px', mb: 2 }}>
|
||||||
borderRadius: '50%',
|
{uploadResult?.imageCount || 0} Bild{uploadResult?.imageCount === 1 ? '' : 'er'} {uploadResult?.imageCount === 1 ? 'wurde' : 'wurden'} hochgeladen.
|
||||||
width: 60,
|
|
||||||
height: 60,
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
|
|
||||||
}}>
|
|
||||||
<Typography sx={{ fontSize: '32px' }}>✅</Typography>
|
|
||||||
</Box>
|
|
||||||
<Typography sx={{ fontSize: '32px', fontWeight: 'bold' }}>
|
|
||||||
Upload erfolgreich!
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Upload Count */}
|
|
||||||
<Typography sx={{ fontSize: '18px', mb: 3 }}>
|
|
||||||
<strong>{uploadResult?.imageCount || 0}</strong> {uploadResult?.imageCount === 1 ? 'Bild wurde' : 'Bilder wurden'} erfolgreich hochgeladen
|
|
||||||
und {uploadResult?.imageCount === 1 ? 'wird' : 'werden'} nach der Prüfung durch das Hobbyhimmel-Team angezeigt.
|
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{/* Group ID Box */}
|
<Box sx={{ bgcolor: 'rgba(255,255,255,0.2)', borderRadius: '8px', p: 2, mb: 2 }}>
|
||||||
<Box sx={{
|
<Typography sx={{ fontSize: '14px', mb: 1 }}>
|
||||||
bgcolor: 'rgba(255,255,255,0.2)',
|
|
||||||
borderRadius: '12px',
|
|
||||||
p: 3,
|
|
||||||
mb: 3,
|
|
||||||
border: '2px solid rgba(255,255,255,0.3)'
|
|
||||||
}}>
|
|
||||||
<Typography sx={{ fontSize: '14px', mb: 1, opacity: 0.9 }}>
|
|
||||||
Ihre Referenz-Nummer:
|
Ihre Referenz-Nummer:
|
||||||
</Typography>
|
</Typography>
|
||||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
|
<Typography sx={{ fontSize: '20px', fontFamily: 'monospace', fontWeight: 'bold', mb: 1 }}>
|
||||||
<Typography sx={{
|
{uploadResult?.groupId}
|
||||||
fontSize: '24px',
|
</Typography>
|
||||||
fontFamily: 'monospace',
|
<Typography sx={{ fontSize: '12px', opacity: 0.9 }}>
|
||||||
fontWeight: 'bold',
|
Notieren Sie sich diese Nummer für spätere Anfragen an das Team.
|
||||||
letterSpacing: '2px'
|
|
||||||
}}>
|
|
||||||
{uploadResult?.groupId}
|
|
||||||
</Typography>
|
|
||||||
<Button
|
|
||||||
sx={{
|
|
||||||
bgcolor: 'white',
|
|
||||||
color: '#4CAF50',
|
|
||||||
minWidth: 'auto',
|
|
||||||
px: 2,
|
|
||||||
py: 1,
|
|
||||||
'&:hover': {
|
|
||||||
bgcolor: '#f0f0f0'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(uploadResult?.groupId || '');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
📋 Kopieren
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
<Typography sx={{ fontSize: '12px', mt: 1, opacity: 0.8 }}>
|
|
||||||
Notieren Sie sich diese Nummer für spätere Anfragen
|
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Next Steps */}
|
<Typography sx={{ fontSize: '13px', mb: 2, opacity: 0.95 }}>
|
||||||
<Box sx={{
|
Die Bilder werden geprüft und nach Freigabe auf dem Werkstatt-Monitor angezeigt.
|
||||||
bgcolor: 'rgba(255,255,255,0.15)',
|
{' '}Bei Social Media Einwilligung werden sie entsprechend veröffentlicht.
|
||||||
borderRadius: '8px',
|
</Typography>
|
||||||
p: 2,
|
|
||||||
mb: 3,
|
<Typography sx={{ fontSize: '12px', mb: 3, opacity: 0.9 }}>
|
||||||
textAlign: 'left'
|
<strong>Fragen oder Widerruf?</strong> Kontakt: <strong>it@hobbyhimmel.de</strong>
|
||||||
}}>
|
|
||||||
<Typography sx={{ fontSize: '16px', fontWeight: 600, mb: 1.5 }}>
|
|
||||||
Was passiert jetzt?
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>•</Typography>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>
|
|
||||||
Ihre Bilder werden vom Team geprüft
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>•</Typography>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>
|
|
||||||
Nach Freigabe erscheinen sie auf dem Werkstatt-Monitor
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>•</Typography>
|
|
||||||
<Typography sx={{ fontSize: '14px' }}>
|
|
||||||
Bei gewählter Social Media Einwilligung werden sie entsprechend veröffentlicht
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* GDPR Contact */}
|
|
||||||
<Typography sx={{ fontSize: '12px', opacity: 0.9, mb: 3 }}>
|
|
||||||
<strong>Fragen oder Widerruf?</strong> Kontaktieren Sie uns mit Ihrer Referenz-Nummer unter: <strong>it@hobbyhimmel.de</strong>
|
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{/* Action Button */}
|
|
||||||
<Button
|
<Button
|
||||||
sx={{
|
sx={{
|
||||||
bgcolor: 'white',
|
background: 'white',
|
||||||
color: '#4CAF50',
|
color: '#4CAF50',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
px: 5,
|
px: 4,
|
||||||
py: 1.5,
|
py: 1.5,
|
||||||
borderRadius: '25px',
|
borderRadius: '25px',
|
||||||
textTransform: 'none',
|
textTransform: 'none',
|
||||||
boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
|
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
bgcolor: '#f0f0f0',
|
background: '#f0f0f0',
|
||||||
transform: 'scale(1.05)',
|
transform: 'scale(1.05)',
|
||||||
boxShadow: '0 6px 16px rgba(0,0,0,0.3)'
|
boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
|
||||||
},
|
},
|
||||||
transition: 'all 0.3s ease'
|
transition: 'all 0.3s ease'
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user