From c8effe3fa7e6f3b76d87bf5fc13b626dc77b10dc Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Sun, 13 Apr 2025 17:39:28 +0200
Subject: [PATCH] calendar 39

---
 components/calendar/calendar-client.tsx | 43 ++++++++++++++++++-------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx
index 3a6933c2..710f7b39 100644
--- a/components/calendar/calendar-client.tsx
+++ b/components/calendar/calendar-client.tsx
@@ -1127,8 +1127,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                 }))
               )}
             eventContent={(arg) => (
-              <div className="px-1 py-0.5 overflow-hidden w-full bg-opacity-90 hover:bg-opacity-100 transition-all">
-                <div className="flex items-center gap-1 text-xs">
+              <div 
+                className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm"
+                style={{
+                  backgroundColor: `${arg.event.backgroundColor}dd`, // Add transparency
+                  boxShadow: `inset 0 0 0 1px ${arg.event.backgroundColor}, 0 1px 2px ${arg.event.backgroundColor}40`
+                }}
+              >
+                <div className="flex items-center gap-1.5 text-xs">
                   {!arg.event.allDay && (
                     <span className="font-medium whitespace-nowrap">
                       {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
@@ -1144,10 +1150,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               </div>
             )}
             eventClassNames={(arg) => [
-              'rounded border-l-4',
-              'hover:ring-2 hover:ring-offset-1 hover:ring-opacity-50',
+              'hover:ring-2 hover:ring-offset-1',
               'transition-all duration-200',
-              'shadow-sm hover:shadow',
               arg.event.allDay ? 'py-1' : ''
             ]}
             locale={frLocale}
@@ -1163,7 +1167,17 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             slotMinTime="06:00:00"
             slotMaxTime="22:00:00"
             allDaySlot={true}
-            allDayText="Toute la journée"
+            allDayText=""
+            views={{
+              timeGridWeek: {
+                allDayText: "",
+                dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
+              },
+              timeGridDay: {
+                allDayText: "",
+                dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
+              }
+            }}
             slotLabelFormat={{
               hour: '2-digit',
               minute: '2-digit',
@@ -1225,8 +1239,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
           </div>
 
           <div className="space-y-2">
-            <Label>Calendrier</Label>
-            <div className="flex flex-wrap gap-2">
+            <Label className="text-base font-semibold">Calendrier</Label>
+            <div className="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-lg border border-gray-100">
               {calendars.map((cal) => (
                 <button
                   key={cal.id}
@@ -1238,17 +1252,22 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                       calendarId: cal.id
                     }));
                   }}
-                  className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${
+                  className={`flex items-center gap-2 px-4 py-2.5 rounded-md transition-all ${
                     eventForm.calendarId === cal.id
-                      ? 'border-primary bg-primary/5'
-                      : 'border-gray-200 hover:border-gray-300'
+                      ? 'bg-white shadow-md border border-gray-200'
+                      : 'hover:bg-white/50'
                   }`}
+                  style={{
+                    borderLeft: `4px solid ${cal.color}`,
+                  }}
                 >
                   <div 
                     className="w-3 h-3 rounded-full" 
                     style={{ backgroundColor: cal.color }}
                   />
-                  <span className="text-sm font-medium">{cal.name}</span>
+                  <span className={`text-sm ${eventForm.calendarId === cal.id ? 'font-medium' : ''}`}>
+                    {cal.name}
+                  </span>
                 </button>
               ))}
             </div>