Moved event and colored element logic to css variables

components/calendar/event/Details.vue

@@ -62,17 +62,14 @@ function deployDeleteModal() {
 
 <template>
   <UiPopoverContent
-    class="w-96"
+    class="w-96 event-popover"
     :align="'center'"
     :align-offset="50"
     :side="'left'"
     :collision-padding="60"
     :hide-when-detached="true"
     :class="cn(
-      event.category ? `event-details-${event.category.color}` : '',
-      {
-        'event-details': event.category
-      }
+      event.category ? `element-${event.category.color}` : '',
     )"
     @focus-outside.prevent
   >

components/calendar/event/Event.vue

@@ -55,10 +55,10 @@ onMounted(() => {
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        class="event text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1"
+        class="event-button text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
         :class="
           cn(
-            event.category ? `event-${event.category.color}` : '',
+            `element-${event.category?.color}`,
             {
               'is-hidden': event.hidden,
               'rounded-r-none': isStartEvent,

components/calendar/search/lists/EventCallout.vue

@@ -21,9 +21,9 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
 
 <template>
   <button
-    class="event group relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
+    class="event-callout group relative block w-full text-left py-3 px-4 cursor-pointer transition-colors"
     :class="cn(
-      event.category ? `event-${event.category.color}` : '',
+      event.category ? `element-${event.category.color}` : '',
       {
         'pt-4 is-hidden': event.hidden,
       })"