Updated packages and some other colours

app/components/calendar/input/EventCategories.vue

@@ -37,7 +37,7 @@ const filteredCategories = computed(() =>
         role="combobox"
         :aria-expanded="isPopoverOpen"
         aria-controls="event-categories"
-        class="relative w-full max-w-full h-fit justify-between"
+        class="relative w-full max-w-full h-fit justify-between hover:bg-secondary hover:text-primary-foreground"
       >
         <template v-if="!model.length">
           {{ props.placeholder }}
@@ -57,7 +57,7 @@ const filteredCategories = computed(() =>
     </UiPopoverTrigger>
     <UiPopoverContent
       id="event-categories"
-      align="start"
+      :align="'start'"
       side="bottom"
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"

app/components/calendar/input/EventCategory.vue

@@ -36,7 +36,7 @@ const filteredCategories = computed(() =>
         role="combobox"
         :aria-expanded="isPopoverOpen"
         aria-controls="event-category"
-        class="w-full max-w-full justify-between"
+        class="w-full max-w-full justify-between hover:bg-secondary hover:text-primary-foreground"
       >
         <template v-if="!model">
           {{ props.placeholder }}

app/components/calendar/input/RPGDate.vue

@@ -4,6 +4,7 @@ import type { RPGDate } from "@@/models/Date";
 import {
   PhXCircle
 } from "@phosphor-icons/vue"
+import { cn } from "~/lib/utils";
 
 const model = defineModel<RPGDate | null>()
 
@@ -134,7 +135,7 @@ function handleValueReset() {
 
         <UiInput v-model="model.year" type="number" />
 
-        <hr class="col-span-2" >
+        <hr class="col-span-2" />
 
         <div class="col-span-2">
           <div v-if="monthData" class="grid grid-cols-7 gap-1">
@@ -142,10 +143,10 @@ function handleValueReset() {
               v-for="day in monthData.days"
               :key="`popover-day-grid-${id}-${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
-              }"
+              :class="cn({
+                'hover:bg-accent hover:text-accent-foreground': day !== model.day,
+                'bg-primary text-primary-foreground hover:bg-accent hover:text-accent-foreground': day === model.day
+              })"
               @click="setModelDay(day)"
             >
               {{ day }}