Style event items as isolated box cards

2026-07-28 14:23:42 +05:30
parent c921e0ddef
commit 25a3ef2a5a
1 changed files with 9 additions and 3 deletions
@@ -67,10 +67,16 @@ export default function EventTimeline() {
  const renderEventCard = (ev, i, arrLength) => (
    <div key={ev.id} style={{ 
      display: 'flex', flexDirection: 'column', 
-      paddingBottom: i < arrLength - 1 ? '1rem' : '0', 
+      background: 'rgba(255, 255, 255, 0.03)',
+      border: '1px solid rgba(255, 255, 255, 0.05)',
+      borderRadius: '12px',
+      padding: '1rem',
      marginBottom: i < arrLength - 1 ? '1rem' : '0',
-      borderBottom: i < arrLength - 1 ? '1px solid rgba(255,255,255,0.05)' : 'none' 
-    }}>
+      transition: 'transform 0.2s ease, background 0.2s ease'
+    }}
+    onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.06)'}
+    onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.03)'}
+    >
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
        <span style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
          {ev.start_time.substring(0, 5)} - {ev.end_time.substring(0, 5)}