Various improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/EventCard.vue

@@ -44,9 +44,9 @@
             :date="event.beginsOn.toString()"
           />
         </div>
-        <div class="flex-1 w-full flex flex-col justify-between">
+        <div class="w-full flex flex-col justify-between">
           <h3
-            class="text-lg leading-5 line-clamp-3 font-bold text-violet-3"
+            class="text-lg leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white"
             :title="event.title"
             dir="auto"
             :lang="event.language"
@@ -54,7 +54,10 @@
             {{ event.title }}
           </h3>
           <div class="pt-3">
-            <div class="flex items-center text-violet-3" dir="auto">
+            <div
+              class="flex items-center text-violet-3 dark:text-white"
+              dir="auto"
+            >
               <figure class="" v-if="actorAvatarURL">
                 <img
                   class="rounded-xl"
@@ -78,7 +81,7 @@
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
-              <o-icon icon="video" />
+              <Video />
               <span class="ltr:pl-2 rtl:pr-2">{{ $t("Online") }}</span>
             </div>
           </div>
@@ -104,6 +107,7 @@ import InlineAddress from "@/components/Address/InlineAddress.vue";
 import { computed } from "vue";
 import MobilizonTag from "../Tag.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import Video from "vue-material-design-icons/Video.vue";
 
 const props = defineProps<{ event: IEvent; options?: IEventCardOptions }>();
 const defaultOptions: IEventCardOptions = {

js/src/components/Event/EventListViewCard.vue

@@ -9,7 +9,7 @@
       <router-link
         :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
       >
-        <h2 class="text-2xl line-clamp-2">{{ event.title }}</h2>
+        <h2 class="mt-0 line-clamp-2">{{ event.title }}</h2>
       </router-link>
     </div>
     <div class="">

js/src/components/Event/EventParticipationCard.vue

@@ -21,7 +21,7 @@
     </div>
     <div class="list-card flex flex-col relative">
       <div
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-1.5 gapt-x-3"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-1.5 gapt-x-3 pb-2"
       >
         <div class="mr-0 ml-0">
           <div class="h-36 relative w-full">
@@ -89,6 +89,7 @@
             :physical-address="participation.event.physicalAddress"
           />
           <div
+            class="flex gap-1"
             v-else-if="
               participation.event.options &&
               participation.event.options.isOnline
@@ -182,7 +183,7 @@
           </div>
         </div>
 
-        <o-dropdown aria-role="list">
+        <o-dropdown aria-role="list" class="text-center self-center">
           <template #trigger>
             <o-button icon-right="dots-horizontal">
               {{ $t("Actions") }}

js/src/components/Event/MultiCard.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="multi-card-event">
+  <div
+    class="grid auto-rows-[1fr] gap-x-5 gap-y-8 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"
+  >
     <event-card
-      class="event-card"
+      class="flex flex-col h-full"
       v-for="event in events"
       :event="event"
       :key="event.uuid"
@@ -17,17 +19,3 @@ defineProps<{
   events: IEvent[];
 }>();
 </script>
-<style lang="scss" scoped>
-.multi-card-event {
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-column-gap: 20px;
-  grid-row-gap: 30px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  .event-card {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-</style>