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

Button spacing and formatting for rsvp form

Browse Source
This commit is contained in:
Ryderjj89
2025-06-04 18:29:58 -04:00
parent c3030bafce
commit cd845fc116
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/RSVPForm.tsx
View File

@@ -18,6 +18,7 @@ import {
OutlinedInput, OutlinedInput,
Chip, Chip,
FormControlLabel, // Import FormControlLabel FormControlLabel, // Import FormControlLabel
Divider, // Import Divider
} from '@mui/material'; } from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityIcon from '@mui/icons-material/Visibility';
import { Event } from '../types'; import { Event } from '../types';
@@ -405,12 +406,12 @@ const RSVPForm: React.FC = () => {
Back to Events Back to Events
</Button> </Button>
<Button <Button
variant="contained" variant="outlined"
color="primary" color="primary"
startIcon={<VisibilityIcon />} onClick={() => navigate('/')}
onClick={() => navigate(`/view/events/${slug}`)} sx={{ flexGrow: 1 }}
> >
View RSVPs Back to Events
</Button> </Button>
</Box> </Box>
</Paper> </Paper>
@@ -447,7 +448,7 @@ const RSVPForm: React.FC = () => {
</Typography> </Typography>
{event && ( {event && (
<Box sx={{ mb: 3, textAlign: 'center' }}> <Box sx={{ mb: 3, textAlign: 'left' }}> {/* Changed to left-align */}
<Typography variant="h5" component="h3" gutterBottom> <Typography variant="h5" component="h3" gutterBottom>
{event.title} {event.title}
</Typography> </Typography>
@@ -456,12 +457,21 @@ const RSVPForm: React.FC = () => {
<strong>Info:</strong> {event.description} <strong>Info:</strong> {event.description}
</Typography> </Typography>
)} )}
{event.description && <Divider sx={{ my: 2 }} />} {/* Separator after Info */}
<Box> {/* Grouping Date, Location, and Note */}
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
<strong>Date:</strong> {new Date(event.date).toLocaleString()} <strong>Date:</strong> {new Date(event.date).toLocaleString()}
</Typography> </Typography>
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
<strong>Location:</strong> {event.location} <strong>Location:</strong> {event.location}
</Typography> </Typography>
{event.rsvp_cutoff_date && (
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}> {/* Removed align="center" */}
<strong>Note:</strong> RSVPs will close on {new Date(event.rsvp_cutoff_date).toLocaleString()}
</Typography>
)}
</Box>
{event.rsvp_cutoff_date && <Divider sx={{ my: 2 }} />} {/* Separator after Note */}
</Box> </Box>
)} )}
@@ -471,12 +481,6 @@ const RSVPForm: React.FC = () => {
</Typography> </Typography>
)} )}
{event?.rsvp_cutoff_date && (
<Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 2 }}>
<strong>Note:</strong> RSVPs will close on {new Date(event.rsvp_cutoff_date).toLocaleString()}
</Typography>
)}
<Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}> <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField <TextField
label="Name" label="Name"