feat: Reorganize event card actions and make content selectable

frontend/src/components/EventList.tsx

@@ -10,9 +10,11 @@ import {
   CardActions,
   Container,
   Chip,
+  Stack,
 } from '@mui/material';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import HowToRegIcon from '@mui/icons-material/HowToReg';
 import axios from 'axios';
 
 interface Event {
@@ -48,12 +50,6 @@ const EventList: React.FC = () => {
     return new Date() < cutoffDate;
   };
 
-  const handleEventClick = (event: Event) => {
-    if (isEventOpen(event)) {
-      navigate(`/rsvp/events/${event.slug}`);
-    }
-  };
-
   const handleAdminClick = (event: Event, e: React.MouseEvent) => {
     e.stopPropagation();
     navigate(`/admin/events/${event.slug}`);
@@ -99,13 +95,11 @@ const EventList: React.FC = () => {
                   height: '100%', 
                   display: 'flex', 
                   flexDirection: 'column',
-                  cursor: isEventOpen(event) ? 'pointer' : 'default',
                   opacity: isEventOpen(event) ? 1 : 0.7,
                   '& .MuiCardContent-root': {
                     padding: 3
                   }
                 }} 
-                onClick={() => handleEventClick(event)}
               >
                 <CardContent sx={{ flexGrow: 1 }}>
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
@@ -133,14 +127,17 @@ const EventList: React.FC = () => {
                     </Typography>
                   )}
                 </CardContent>
-                <CardActions>
+                <CardActions sx={{ justifyContent: 'space-between', px: 3, pb: 2 }}>
+                  <Stack direction="row" spacing={1}>
+                    {isEventOpen(event) && (
                       <Button
                         size="small"
-                    startIcon={<AdminPanelSettingsIcon />}
-                    onClick={(e) => handleAdminClick(event, e)}
+                        startIcon={<HowToRegIcon />}
+                        onClick={() => navigate(`/rsvp/events/${event.slug}`)}
                       >
-                    Manage
+                        Submit RSVP
                       </Button>
+                    )}
                     <Button
                       size="small"
                       startIcon={<VisibilityIcon />}
@@ -148,6 +145,14 @@ const EventList: React.FC = () => {
                     >
                       View RSVPs
                     </Button>
+                  </Stack>
+                  <Button
+                    size="small"
+                    startIcon={<AdminPanelSettingsIcon />}
+                    onClick={(e) => handleAdminClick(event, e)}
+                  >
+                    Manage
+                  </Button>
                 </CardActions>
               </Card>
             </Grid>