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

Improve styling and add favicon

Browse Source
This commit is contained in:
Your Name
2025-04-29 18:20:56 -04:00
parent d85bcc7296
commit aa392c1c8a
3 changed files with 94 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,37 +58,116 @@ const EventDetails: React.FC = () => {
}
return (
<Container>
<Paper elevation={3} sx={{ p: 3, my: 3 }}>
<Typography variant="h4" gutterBottom>
<Container maxWidth="md">
<Paper
elevation={3}
sx={{
p: 4,
my: 4,
borderRadius: 2,
background: 'linear-gradient(145deg, #ffffff, #f5f5f5)'
}}
>
<Typography
variant="h3"
gutterBottom
sx={{
fontWeight: 600,
color: 'primary.main',
mb: 3
}}
>
{event.title}
</Typography>
<Typography variant="subtitle1" gutterBottom>
{event.date} at {event.location}
</Typography>
<Typography variant="body1" paragraph>
<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>
<Typography variant="h5" gutterBottom>
<Typography
variant="h5"
gutterBottom
sx={{
fontWeight: 500,
color: 'primary.main',
mb: 2,
borderBottom: '2px solid',
borderColor: 'primary.main',
pb: 1
}}
>
RSVPs
</Typography>
<List>
<List sx={{
bgcolor: 'background.paper',
borderRadius: 1,
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
}}>
{rsvps.map((rsvp) => (
<ListItem key={rsvp.id}>
<ListItem
key={rsvp.id}
sx={{
borderBottom: '1px solid',
borderColor: 'divider',
'&:last-child': {
borderBottom: 'none'
}
}}
>
<ListItemText
primary={rsvp.name}
secondary={`${rsvp.email} - ${rsvp.status}`}
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={3}>
<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>