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,7 +127,25 @@ 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={<HowToRegIcon />}
+                        onClick={() => navigate(`/rsvp/events/${event.slug}`)}
+                      >
+                        Submit RSVP
+                      </Button>
+                    )}
+                    <Button
+                      size="small"
+                      startIcon={<VisibilityIcon />}
+                      onClick={(e) => handleViewClick(event, e)}
+                    >
+                      View RSVPs
+                    </Button>
+                  </Stack>
                   <Button
                     size="small"
                     startIcon={<AdminPanelSettingsIcon />}
@@ -141,13 +153,6 @@ const EventList: React.FC = () => {
                   >
                     Manage
                   </Button>
-                  <Button
-                    size="small"
-                    startIcon={<VisibilityIcon />}
-                    onClick={(e) => handleViewClick(event, e)}
-                  >
-                    View RSVPs
-                  </Button>
                 </CardActions>
               </Card>
             </Grid>