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) { if (loading) {
return ( return (
<Container> <Box
<Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh"> sx={{
<CircularProgress /> minHeight: '100vh',
</Box> display: 'flex',
</Container> justifyContent: 'center',
alignItems: 'center',
backgroundImage: 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
>
<CircularProgress />
</Box>
); );
} }
if (error) { if (error) {
return ( return (
<Container> <Container maxWidth="md">
<Alert severity="error">{error}</Alert> <Alert severity="error">{error}</Alert>
</Container> </Container>
); );
@@ -51,129 +59,157 @@ const EventDetails: React.FC = () => {
if (!event) { if (!event) {
return ( return (
<Container> <Container maxWidth="md">
<Alert severity="warning">Event not found</Alert> <Alert severity="warning">Event not found</Alert>
</Container> </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 ( return (
<Container maxWidth="md"> <Box
<Paper sx={{
elevation={3} minHeight: '100vh',
sx={{ backgroundImage: 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
p: 4, backgroundSize: 'cover',
my: 4, backgroundPosition: 'center',
borderRadius: 2, py: 4,
background: 'linear-gradient(145deg, #ffffff, #f5f5f5)' }}
}} >
> <Container maxWidth="md">
<Typography <Paper
variant="h3" elevation={3}
gutterBottom
sx={{ sx={{
fontWeight: 600, p: 4,
color: 'primary.main', my: 4,
mb: 3 borderRadius: 2,
backdropFilter: 'blur(10px)',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
maxWidth: '800px',
mx: 'auto'
}} }}
> >
{event.title}
</Typography>
<Box sx={{ mb: 3 }}>
<Typography <Typography
variant="h6" variant="h3"
gutterBottom gutterBottom
sx={{ sx={{
color: 'text.secondary', fontWeight: 600,
display: 'flex', color: 'primary.main',
alignItems: 'center', mb: 3
gap: 1
}} }}
> >
{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> </Typography>
</Box>
<Typography
variant="body1"
paragraph
sx={{
fontSize: '1.1rem',
lineHeight: 1.6,
color: 'text.primary',
mb: 4
}}
>
{event.description}
</Typography>
<Typography <Typography
variant="h5" variant="h5"
gutterBottom gutterBottom
sx={{ sx={{
fontWeight: 500, fontWeight: 500,
color: 'primary.main', color: 'primary.main',
mb: 2, mb: 2,
borderBottom: '2px solid', borderBottom: '2px solid',
borderColor: 'primary.main', borderColor: 'primary.main',
pb: 1 pb: 1
}} }}
> >
RSVPs RSVPs
</Typography> </Typography>
<List sx={{ <List sx={{
bgcolor: 'background.paper', bgcolor: 'rgba(255, 255, 255, 0.7)',
borderRadius: 1, borderRadius: 1,
boxShadow: '0 2px 4px rgba(0,0,0,0.05)' boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
}}> maxWidth: '600px',
{rsvps.map((rsvp) => ( mx: 'auto'
<ListItem }}>
key={rsvp.id} {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={{ sx={{
borderBottom: '1px solid', px: 4,
borderColor: 'divider', py: 1,
'&:last-child': { borderRadius: 2,
borderBottom: 'none' 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 Back to Events
primary={ </Button>
<Typography variant="subtitle1" sx={{ fontWeight: 500 }}> </Box>
{rsvp.name} </Paper>
</Typography> </Container>
} </Box>
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>
); );
}; };