Added light friendly event details

components/calendar/CalendarEventDetails.vue

@@ -62,7 +62,7 @@ function deployDeleteModal() {
 
 <template>
   <UiPopoverContent
-    class=" w-96 bg-slate-900 border-slate-800"
+    class=" w-96 "
     :align="'center'"
     :align-offset="50"
     :side="'left'"
@@ -96,15 +96,15 @@ function deployDeleteModal() {
 
       <div class="mb-1 space-y-1">
         <template v-if="event.location">
-          <p class="text-sm italic opacity-75 flex items-center gap-1">
+          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
             <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
           </p>
         </template>
-        <p class="text-sm italic opacity-75 flex items-center gap-1">
+        <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
           <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>
         <template v-if="dateDuration">
-          <p class="text-sm italic opacity-75 flex items-center gap-1">
+          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
             <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
           </p>
         </template>
@@ -113,13 +113,13 @@ function deployDeleteModal() {
       <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
-            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary">
+            <UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
               {{ event.category?.name }}
             </UiBadge>
           </li>
 
           <li v-for="cat in event.secondaryCategories" :key="cat.id">
-            <UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary">
+            <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
               {{ cat.name }}
             </UiBadge>
           </li>
@@ -129,7 +129,7 @@ function deployDeleteModal() {
       <template v-if="event.description">
         <hr class="border-slate-500 mt-2" >
 
-        <div class="mt-2 text-sm text-slate-300">
+        <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
           {{ event.description }}
         </div>
       </template>
@@ -138,7 +138,7 @@ function deployDeleteModal() {
     <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
       <UiPopover v-model:open="commandMenuOpened">
         <UiPopoverTrigger as-child>
-          <UiButton size="icon" variant="ghost">
+          <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
             <PhDotsThreeOutlineVertical size="20" weight="fill" />
           </UiButton>
         </UiPopoverTrigger>
@@ -156,7 +156,7 @@ function deployDeleteModal() {
     </menu>
 
     <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
+      <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
         <button
           class="flex gap-1"
           title="Naviguer au début"
@@ -165,7 +165,7 @@ function deployDeleteModal() {
           <PhHourglassHigh size="16" weight="fill" /> Début
         </button>
       </UiBadge>
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+      <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
         <button
           class="flex gap-1"
           title="Naviguer à la fin"

components/calendar/form/CreateEvent.vue

@@ -88,7 +88,7 @@ function handleCancel() {
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"

components/calendar/form/DeleteEvent.vue

@@ -63,7 +63,7 @@ function handleCancel(): void {
     <UiAlertDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
@@ -85,7 +85,7 @@ function handleCancel(): void {
         </div>
 
         <footer class="flex gap-2 justify-between">
-          <UiButton type="button" size="sm" variant="ghost" @click="() => isDeleteEventModalOpen = false">
+          <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
             Retour
           </UiButton>
 

components/calendar/form/UpdateEvent.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
-import { VisuallyHidden } from "radix-vue"
 
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
@@ -64,19 +63,19 @@ function handleCancel() {
     <UiDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
       @pointer-down-outside="(e) => e.preventDefault()"
     >
-      <VisuallyHidden>
+      <header class="pl-8 grid gap-y-2">
         <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
 
         <UiDialogDescription>
           Mettre à jour les données de l'évènement
         </UiDialogDescription>
-      </VisuallyHidden>
+      </header>
 
       <form @submit.prevent="handleAction">
         <div class="grid grid-cols-2 gap-y-3">

components/calendar/input/RPGDate.vue

@@ -117,7 +117,7 @@ function handleValueReset() {
       v-if="model"
       align="start"
       side="bottom"
-      class="bg-slate-900 border-slate-800"
+      class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
     >
       <div class="grid grid-cols-2 items-center gap-x-2 gap-y-3">
         <UiSelect @update:model-value="handleMonthChange">
@@ -151,8 +151,11 @@ function handleValueReset() {
             <button
               v-for="day in monthData.days"
               :key="`popover-day-grid-${id}-${day}`"
-              class="aspect-square rounded-full text-[.8em] transition-colors hover:bg-slate-700"
-              :class="{'bg-blue-500 hover:bg-blue-700': day === model.day}"
+              class="aspect-square rounded-full text-[.8em] transition-colors"
+              :class="{
+                'hover:bg-indigo-200 dark:hover:bg-indigo-700': day !== model.day,
+                'bg-indigo-500 hover:bg-indigo-700 text-white': day === model.day
+              }"
               @click="setModelDay(day)"
             >
               {{ day }}

components/calendar/state/monthly/DayTile.vue

@@ -88,7 +88,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
           class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
           :class="{
             'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate
+            'text-white bg-indigo-500': isSelectedDate
           }"
         >
           {{ date.day }}