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={{
|
||||
mt: 4,
|
||||
p: 4,
|
||||
borderRadius: '16px',
|
||||
p: 3,
|
||||
borderRadius: '12px',
|
||||
background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
|
||||
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',
|
||||
'@keyframes slideIn': {
|
||||
from: {
|
||||
|
|
@ -343,128 +343,48 @@ function MultiUploadPage() {
|
|||
}
|
||||
}
|
||||
}}>
|
||||
{/* Success Icon & Title */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2, mb: 2 }}>
|
||||
<Box sx={{
|
||||
bgcolor: 'white',
|
||||
borderRadius: '50%',
|
||||
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 sx={{ fontSize: '28px', fontWeight: 'bold', mb: 1 }}>
|
||||
✅ Upload erfolgreich!
|
||||
</Typography>
|
||||
|
||||
{/* Group ID Box */}
|
||||
<Box sx={{
|
||||
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 }}>
|
||||
<Typography sx={{ fontSize: '18px', mb: 2 }}>
|
||||
{uploadResult?.imageCount || 0} Bild{uploadResult?.imageCount === 1 ? '' : 'er'} {uploadResult?.imageCount === 1 ? 'wurde' : 'wurden'} hochgeladen.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ bgcolor: 'rgba(255,255,255,0.2)', borderRadius: '8px', p: 2, mb: 2 }}>
|
||||
<Typography sx={{ fontSize: '14px', mb: 1 }}>
|
||||
Ihre Referenz-Nummer:
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 2 }}>
|
||||
<Typography sx={{
|
||||
fontSize: '24px',
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 'bold',
|
||||
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 sx={{ fontSize: '20px', fontFamily: 'monospace', fontWeight: 'bold', mb: 1 }}>
|
||||
{uploadResult?.groupId}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: '12px', opacity: 0.9 }}>
|
||||
Notieren Sie sich diese Nummer für spätere Anfragen an das Team.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Next Steps */}
|
||||
<Box sx={{
|
||||
bgcolor: 'rgba(255,255,255,0.15)',
|
||||
borderRadius: '8px',
|
||||
p: 2,
|
||||
mb: 3,
|
||||
textAlign: 'left'
|
||||
}}>
|
||||
<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 sx={{ fontSize: '13px', mb: 2, opacity: 0.95 }}>
|
||||
Die Bilder werden geprüft und nach Freigabe auf dem Werkstatt-Monitor angezeigt.
|
||||
{' '}Bei Social Media Einwilligung werden sie entsprechend veröffentlicht.
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ fontSize: '12px', mb: 3, opacity: 0.9 }}>
|
||||
<strong>Fragen oder Widerruf?</strong> Kontakt: <strong>it@hobbyhimmel.de</strong>
|
||||
</Typography>
|
||||
|
||||
{/* Action Button */}
|
||||
<Button
|
||||
sx={{
|
||||
bgcolor: 'white',
|
||||
background: 'white',
|
||||
color: '#4CAF50',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
px: 5,
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
borderRadius: '25px',
|
||||
textTransform: 'none',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
|
||||
'&:hover': {
|
||||
bgcolor: '#f0f0f0',
|
||||
background: '#f0f0f0',
|
||||
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'
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user