From c598640cdd0964da9f5bb68bc1bc8092f6e246b6 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 29 Apr 2025 18:27:07 -0400
Subject: [PATCH] Update styling with space background, blur effects, and
 proper status formatting

---
 frontend/src/components/EventDetails.tsx | 254 +++++++++++++----------
 1 file changed, 145 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/EventDetails.tsx b/frontend/src/components/EventDetails.tsx
index be2edaf..c50ebbf 100644
--- a/frontend/src/components/EventDetails.tsx
+++ b/frontend/src/components/EventDetails.tsx
@@ -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>
   );
 };