From 6782b9bd41cd2886a5363bd5d24ac4e96b8cc328 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 1 Sep 2024 11:23:06 +0200
Subject: [PATCH] Added light friendly calendar

---
 components/calendar/CalendarMenu.vue          |  2 +-
 components/calendar/CalendarMenuSubnav.vue    | 14 ++++-----
 components/calendar/dialog/Delete.vue         | 30 +++++++++----------
 components/calendar/state/monthly/DayTile.vue | 12 ++++----
 components/global/sidebar/Sidebar.vue         | 21 ++-----------
 components/ui/button/index.ts                 |  2 +-
 pages/my/index.vue                            |  4 +--
 pages/my/worlds/[id].vue                      | 28 ++++++++++++++++-
 public/images/planet.svg                      |  1 +
 9 files changed, 61 insertions(+), 53 deletions(-)
 create mode 100644 public/images/planet.svg

diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index 008082c..a606a76 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/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">
diff --git a/components/calendar/CalendarMenuSubnav.vue b/components/calendar/CalendarMenuSubnav.vue
index c7f0199..37137f6 100644
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/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" />
diff --git a/components/calendar/dialog/Delete.vue b/components/calendar/dialog/Delete.vue
index f1accfe..f3482ec 100644
--- a/components/calendar/dialog/Delete.vue
+++ b/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>
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 4c3d5d8..15d51c9 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/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 }}
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 7559691..5fdca98 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/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>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index cf23820..e92f470 100644
--- a/components/ui/button/index.ts
+++ b/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"
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 9a2473b..06d6424 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -144,8 +144,8 @@ main {
     display: block;
     content: '';
     position: absolute;
-    right: -2.4rem;
-    bottom: -10%;
+    right: 2.4rem;
+    bottom: -5%;
     height: 75%;
     width: 100%;
     background-image: url('/images/galaxy.svg');
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 888081a..165a5fb 100644
--- a/pages/my/worlds/[id].vue
+++ b/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>
diff --git a/public/images/planet.svg b/public/images/planet.svg
new file mode 100644
index 0000000..f632d3d
--- /dev/null
+++ b/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>