Added light friendly calendar

components/calendar/CalendarMenu.vue

@@ -7,7 +7,7 @@ const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
-  <header class="pt-4 border-slate-700 border-b-[1px]">
+  <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
         <li class="flex items-center">

components/calendar/CalendarMenuSubnav.vue

@@ -62,7 +62,7 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
 
 <template>
   <div class="flex gap-2">
-    <div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm">
+    <div class="grid items-end w-40 px-4 py-2 border-slate-200 bg-white dark:bg-black dark:border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
       <ClientOnly>
         <span>{{ currentDate.currentDateTitle }}</span>
 
@@ -73,14 +73,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
         </template>
       </ClientOnly>
     </div>
-    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div>
       <UiTooltipProvider :delay-duration="250">
         <UiTooltip>
           <UiTooltipTrigger as-child>
             <UiButton
-              variant="ghost"
+              variant="outline"
               size="icon"
-              class="rounded-t-sm rounded-b-none"
+              class="rounded-t-sm rounded-b-none border-b-0"
               @click="handleGotoPreviousEventPage('prev')"
             >
               <PhArrowLineLeft size="22" />
@@ -92,14 +92,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
         </UiTooltip>
       </UiTooltipProvider>
     </div>
-    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div>
       <UiTooltipProvider :delay-duration="250">
         <UiTooltip>
           <UiTooltipTrigger as-child>
             <UiButton
-              variant="ghost"
+              variant="outline"
               size="icon"
-              class="rounded-t-sm rounded-b-none"
+              class="rounded-t-sm rounded-b-none border-b-0"
               @click="handleGotoPreviousEventPage('next')"
             >
               <PhArrowLineRight size="22" />

components/calendar/dialog/Delete.vue

@@ -47,7 +47,7 @@ function handleClosing() {
     <UiAlertDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
@@ -68,26 +68,24 @@ function handleClosing() {
           </div>
         </div>
 
-        <footer class="flex gap-2 justify-between">
-          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+        <footer class="flex gap-2 justify-end">
+          <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
             Retour
           </UiButton>
 
-          <div class="flex gap-2 justify-end">
-            <Transition name="fade-delay">
-              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
-                Annuler
-              </UiButton>
+          <Transition name="fade-delay">
+            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+              Annuler
+            </UiButton>
+          </Transition>
+
+          <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+            <Transition name="fade">
+              <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
             </Transition>
 
-            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
-              <Transition name="fade">
-                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
-              </Transition>
-
-              Supprimer "{{ calendar?.name }}"
-            </UiButton>
-          </div>
+            Supprimer "{{ calendar?.name }}"
+          </UiButton>
         </footer>
       </form>
     </UiAlertDialogContent>

components/calendar/state/monthly/DayTile.vue

@@ -73,10 +73,10 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative text-xs p-2 border-slate-700"
+    class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
     :class="{
-      'text-slate-500': props.faded,
-      'text-slate-300': !props.faded
+      'text-slate-300 dark:text-slate-500': props.faded,
+      'text-slate-500 dark:text-slate-300': !props.faded
     }"
   >
     <button
@@ -85,10 +85,10 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     >
       <ClientOnly>
         <span
-          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-slate-800"
+          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="{
-            'bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-blue-500': isSelectedDate
+            'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
+            'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate
           }"
         >
           {{ date.day }}

components/global/sidebar/Sidebar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
+import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
@@ -23,24 +23,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="!user">
-        <UiTooltipProvider :delay-duration="50">
-          <UiTooltip>
-            <UiTooltipTrigger as-child>
-              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                <RouterLink to="/">
-                  <PhHouse size="24" weight="fill" />
-                </RouterLink>
-              </UiButton>
-            </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'" :side-offset="6">
-              <p>Accueil</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </li>
-
-      <li v-else>
+      <li v-if="user">
         <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>

components/ui/button/index.ts

@@ -9,7 +9,7 @@ export const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"