Standardize background overlay darkness across all views - Added consistent linear-gradient overlay to RSVP form
This commit is contained in:
Starstrike
@@ -224,47 +224,49 @@ const RSVPForm: React.FC = () => {
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
width: '100%',
|
||||
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'fixed',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'fixed',
|
||||
backgroundColor: '#000',
|
||||
overflowY: 'auto',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary">
|
||||
Thank you!
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 3 }}>
|
||||
Your RSVP has been submitted successfully.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<VisibilityIcon />}
|
||||
onClick={() => navigate(`/view/events/${slug}`)}
|
||||
>
|
||||
View RSVPs
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Box sx={{ py: 4 }}>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary">
|
||||
Thank you!
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 3 }}>
|
||||
Your RSVP has been submitted successfully.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Events
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
startIcon={<VisibilityIcon />}
|
||||
onClick={() => navigate(`/view/events/${slug}`)}
|
||||
>
|
||||
View RSVPs
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -274,147 +276,149 @@ const RSVPForm: React.FC = () => {
|
||||
sx={{
|
||||
minHeight: '100vh',
|
||||
width: '100%',
|
||||
backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'fixed',
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundAttachment: 'fixed',
|
||||
backgroundColor: '#000',
|
||||
overflowY: 'auto',
|
||||
py: 4,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
|
||||
RSVP Form
|
||||
</Typography>
|
||||
|
||||
{error && (
|
||||
<Typography color="error" align="center" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
<Box sx={{ py: 4 }}>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
|
||||
RSVP Form
|
||||
</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 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you attending?</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={formData.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you attending?"
|
||||
required
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.attending === 'yes' && (
|
||||
<>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you bringing any guests?</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={formData.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you bringing any guests?"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={formData.guest_count}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={formData.guest_names}
|
||||
onChange={handleChange}
|
||||
multiline
|
||||
rows={3}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
placeholder="Please list the names of your guests"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{neededItems.length > 0 && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={formData.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{neededItems.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={formData.items_bringing.includes(item)} />
|
||||
<ListItemText primary={item} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
</>
|
||||
|
||||
{error && (
|
||||
<Typography color="error" align="center" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={isSubmitting}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit RSVP'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
{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 }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you attending?</InputLabel>
|
||||
<Select
|
||||
name="attending"
|
||||
value={formData.attending}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you attending?"
|
||||
required
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.attending === 'yes' && (
|
||||
<>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Are you bringing any guests?</InputLabel>
|
||||
<Select
|
||||
name="bringing_guests"
|
||||
value={formData.bringing_guests}
|
||||
onChange={handleSelectChange}
|
||||
label="Are you bringing any guests?"
|
||||
>
|
||||
<MenuItem value="yes">Yes</MenuItem>
|
||||
<MenuItem value="no">No</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{formData.bringing_guests === 'yes' && (
|
||||
<>
|
||||
<TextField
|
||||
label="Number of Guests"
|
||||
name="guest_count"
|
||||
type="number"
|
||||
value={formData.guest_count}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
inputProps={{ min: 1 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
label="Guest Names"
|
||||
name="guest_names"
|
||||
value={formData.guest_names}
|
||||
onChange={handleChange}
|
||||
multiline
|
||||
rows={3}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
placeholder="Please list the names of your guests"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{neededItems.length > 0 && (
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>What items are you bringing?</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
name="items_bringing"
|
||||
value={formData.items_bringing}
|
||||
onChange={handleItemsChange}
|
||||
input={<OutlinedInput label="What items are you bringing?" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{neededItems.map((item) => (
|
||||
<MenuItem key={item} value={item}>
|
||||
<Checkbox checked={formData.items_bringing.includes(item)} />
|
||||
<ListItemText primary={item} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
disabled={isSubmitting}
|
||||
sx={{ mt: 2 }}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit RSVP'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user