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">
+        <footer class="flex gap-2 justify-end">
-          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+          <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
             Retour
           </UiButton>
 
-          <div class="flex gap-2 justify-end">
+          <Transition name="fade-delay">
-            <Transition name="fade-delay">
+            <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
-              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+              Annuler
-                Annuler
+            </UiButton>
-              </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">
+            Supprimer "{{ calendar?.name }}"
-              <Transition name="fade">
+          </UiButton>
-                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
-              </Transition>
-
-              Supprimer "{{ calendar?.name }}"
-            </UiButton>
-          </div>
         </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 dark:text-slate-500': props.faded,
-      'text-slate-300': !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-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-blue-500': 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">
+      <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>
         <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"

pages/my/index.vue

@@ -144,8 +144,8 @@ main {
     display: block;
     content: '';
     position: absolute;
-    right: -2.4rem;
+    right: 2.4rem;
-    bottom: -10%;
+    bottom: -5%;
     height: 75%;
     width: 100%;
     background-image: url('/images/galaxy.svg');

pages/my/worlds/[id].vue

@@ -159,7 +159,7 @@ function hideDeleteModal() {
                 <UiCardContent>
                   <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
 
-                  <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:bg-slate-600" @click="deployDeleteModal(calendar)">
+                  <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="deployDeleteModal(calendar)">
                     <PhTrash size="16" />
                   </UiButton>
                 </UiCardContent>
@@ -179,3 +179,29 @@ function hideDeleteModal() {
     <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
+
+<style lang="scss" scoped>
+main {
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    right: 2.4rem;
+    bottom: -5%;
+    height: 75%;
+    width: 100%;
+    background-image: url('/images/planet.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position-y: bottom;
+    background-position-x: right;
+    z-index: -1;
+    mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
+    opacity: .3;
+  }
+}
+</style>

public/images/planet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><path fill="#6366f1" d="M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"/></svg>