RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Update styling with space background, blur effects, and proper status formatting

Browse Source
This commit is contained in:
Your Name
2025-04-29 18:27:07 -04:00
parent 0161dd332b
commit c598640cdd
1 changed files with 145 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
frontend/src/components/EventDetails.tsx
View File

@@ -33,17 +33,25 @@ const EventDetails: React.FC = () => {
if (loading) {
return (
<Container>
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
<CircularProgress />
</Box>
</Container>
<Box
sx={{
minHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundImage: 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
>
<CircularProgress />
</Box>
);
}
if (error) {
return (
<Container>
<Container maxWidth="md">
<Alert severity="error">{error}</Alert>
</Container>
);
@@ -51,129 +59,157 @@ const EventDetails: React.FC = () => {
if (!event) {
return (
<Container>
<Container maxWidth="md">
<Alert severity="warning">Event not found</Alert>
</Container>
);
}
const formatStatus = (status: string) => {
switch (status.toLowerCase()) {
case 'attending':
return 'Yes';
case 'not_attending':
return 'No';
case 'maybe':
return 'Maybe';
default:
return status.charAt(0).toUpperCase() + status.slice(1);
}
};
return (
<Container maxWidth="md">
<Paper
elevation={3}
sx={{
p: 4,
my: 4,
borderRadius: 2,
background: 'linear-gradient(145deg, #ffffff, #f5f5f5)'
}}
>
<Typography
variant="h3"
gutterBottom
<Box
sx={{
minHeight: '100vh',
backgroundImage: 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
py: 4,
}}
>
<Container maxWidth="md">
<Paper
elevation={3}
sx={{
fontWeight: 600,
color: 'primary.main',
mb: 3
p: 4,
my: 4,
borderRadius: 2,
backdropFilter: 'blur(10px)',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
maxWidth: '800px',
mx: 'auto'
}}
>
{event.title}
</Typography>
<Box sx={{ mb: 3 }}>
<Typography
variant="h6"
variant="h3"
gutterBottom
sx={{
color: 'text.secondary',
display: 'flex',
alignItems: 'center',
gap: 1
fontWeight: 600,
color: 'primary.main',
mb: 3
}}
>
{event.date} at {event.location}
{event.title}
</Typography>
<Box sx={{ mb: 3 }}>
<Typography
variant="h6"
gutterBottom
sx={{
color: 'text.secondary',
display: 'flex',
alignItems: 'center',
gap: 1
}}
>
{event.date} at {event.location}
</Typography>
</Box>
<Typography
variant="body1"
paragraph
sx={{
fontSize: '1.1rem',
lineHeight: 1.6,
color: 'text.primary',
mb: 4
}}
>
{event.description}
</Typography>
</Box>
<Typography
variant="body1"
paragraph
sx={{
fontSize: '1.1rem',
lineHeight: 1.6,
color: 'text.primary',
mb: 4
}}
>
{event.description}
</Typography>
<Typography
variant="h5"
gutterBottom
sx={{
fontWeight: 500,
color: 'primary.main',
mb: 2,
borderBottom: '2px solid',
borderColor: 'primary.main',
pb: 1
}}
>
RSVPs
</Typography>
<List sx={{
bgcolor: 'background.paper',
borderRadius: 1,
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
}}>
{rsvps.map((rsvp) => (
<ListItem
key={rsvp.id}
<Typography
variant="h5"
gutterBottom
sx={{
fontWeight: 500,
color: 'primary.main',
mb: 2,
borderBottom: '2px solid',
borderColor: 'primary.main',
pb: 1
}}
>
RSVPs
</Typography>
<List sx={{
bgcolor: 'rgba(255, 255, 255, 0.7)',
borderRadius: 1,
boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
maxWidth: '600px',
mx: 'auto'
}}>
{rsvps.map((rsvp) => (
<ListItem
key={rsvp.id}
sx={{
borderBottom: '1px solid',
borderColor: 'divider',
'&:last-child': {
borderBottom: 'none'
}
}}
>
<ListItemText
primary={
<Typography variant="subtitle1" sx={{ fontWeight: 500 }}>
{rsvp.name}
</Typography>
}
secondary={
<Typography variant="body2" color="text.secondary">
{rsvp.email} - {formatStatus(rsvp.status)}
</Typography>
}
/>
</ListItem>
))}
</List>
<Box mt={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
variant="contained"
color="primary"
onClick={() => navigate('/')}
sx={{
borderBottom: '1px solid',
borderColor: 'divider',
'&:last-child': {
borderBottom: 'none'
px: 4,
py: 1,
borderRadius: 2,
textTransform: 'none',
fontSize: '1rem',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
'&:hover': {
boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
}
}}
>
<ListItemText
primary={
<Typography variant="subtitle1" sx={{ fontWeight: 500 }}>
{rsvp.name}
</Typography>
}
secondary={
<Typography variant="body2" color="text.secondary">
{rsvp.email} - {rsvp.status.charAt(0).toUpperCase() + rsvp.status.slice(1)}
</Typography>
}
/>
</ListItem>
))}
</List>
<Box mt={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
variant="contained"
color="primary"
onClick={() => navigate('/')}
sx={{
px: 4,
py: 1,
borderRadius: 2,
textTransform: 'none',
fontSize: '1rem',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
'&:hover': {
boxShadow: '0 4px 8px rgba(0,0,0,0.2)'
}
}}
>
Back to Events
</Button>
</Box>
</Paper>
</Container>
Back to Events
</Button>
</Box>
</Paper>
</Container>
</Box>
);
};