From 529cdd0c057c178f214d703cb011ccf669da6bf2 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 20:26:32 +0000
Subject: [PATCH] Improve event card clickability and add View Details button

- Add hover border effect to event cards for better visual feedback
- Add explicit 'View Details' button to each event card
- Rename register button to 'Quick Register' for clarity
- Makes it obvious that cards are clickable to view full details
---
 src/components/event/EventList.tsx | 32 ++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/event/EventList.tsx b/src/components/event/EventList.tsx
index b59cd02..9799bbe 100644
--- a/src/components/event/EventList.tsx
+++ b/src/components/event/EventList.tsx
@@ -89,7 +89,7 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
       {events.map((event) => (
         <div
           key={event.id}
-          className="bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+          className="bg-white rounded-lg shadow hover:shadow-lg transition-all cursor-pointer border-2 border-transparent hover:border-blue-200"
           onClick={() => onEventClick(event)}
         >
           <div className="p-6">
@@ -168,18 +168,30 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
               </div>
             )}
 
-            {/* Action Button */}
-            {event.status === 'upcoming' && onRegister && (
+            {/* Action Area */}
+            <div className="flex items-center justify-between pt-4 border-t border-gray-100">
               <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRegister(event.id);
-                }}
-                className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
+                onClick={() => onEventClick(event)}
+                className="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1"
               >
-                Register for Event
+                View Details
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
               </button>
-            )}
+              
+              {event.status === 'upcoming' && onRegister && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRegister(event.id);
+                  }}
+                  className="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
+                >
+                  Quick Register
+                </button>
+              )}
+            </div>
           </div>
         </div>
       ))}