From 754e44f0a58b8eed1fe00e2678dbb8e4a02b9510 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 12 Aug 2022 16:46:44 +0200
Subject: [PATCH] Various improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/assets/oruga-tailwindcss.css           |  5 +-
 js/src/components/Comment/CommentTree.vue     |  1 +
 .../Discussion/DiscussionComment.story.vue    |  1 +
 .../Discussion/DiscussionComment.vue          |  2 +-
 js/src/components/Event/EventCard.vue         | 12 ++--
 js/src/components/Event/EventListViewCard.vue |  2 +-
 .../Event/EventParticipationCard.vue          |  5 +-
 js/src/components/Event/MultiCard.vue         | 20 ++----
 js/src/components/Group/GroupCard.vue         |  2 +-
 js/src/components/Group/GroupMemberCard.vue   | 35 ++++-----
 js/src/components/Group/InvitationsList.vue   |  2 +-
 js/src/components/Home/CategoriesPreview.vue  | 17 +++--
 js/src/components/Home/SearchFields.vue       |  2 +-
 .../Home/UnloggedIntroduction.story.vue       | 20 +++---
 .../components/Home/UnloggedIntroduction.vue  | 11 +--
 js/src/components/Local/CloseContent.vue      |  6 +-
 js/src/components/Local/MoreContent.vue       |  2 +-
 js/src/components/NavBar.vue                  | 22 ++++--
 js/src/components/Post/SharePostModal.vue     |  2 +-
 js/src/components/Share/ShareModal.vue        |  2 +-
 js/src/components/Utils/EmptyContent.vue      |  4 +-
 js/src/composition/apollo/actor.ts            |  5 +-
 js/src/histoire.setup.ts                      |  1 +
 js/src/i18n/en_US.json                        |  8 ++-
 js/src/i18n/fr_FR.json                        |  8 ++-
 js/src/oruga-config.ts                        |  1 +
 js/src/utils/html.ts                          |  4 ++
 js/src/views/Event/Event.vue                  | 71 +++++++++----------
 js/src/views/Event/MyEvents.vue               | 17 ++---
 js/src/views/HomeView.vue                     | 19 +++--
 js/src/views/SettingsView.vue                 |  2 +-
 js/src/views/User/LoginView.vue               |  2 +-
 js/vite.config.js                             |  6 +-
 33 files changed, 165 insertions(+), 154 deletions(-)

diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 9e5be0fe5..8c2f80610 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -21,6 +21,9 @@ body {
 .btn-outlined-primary:hover {
   @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
 }
+.btn-size-large {
+  @apply text-2xl py-6;
+}
 .btn-disabled {
   @apply opacity-50 cursor-not-allowed;
 }
@@ -108,7 +111,7 @@ body {
 }
 .dropdown-menu {
   min-width: 12em;
-  @apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
+  @apply bg-white dark:bg-gray-700 shadow-lg rounded text-start py-2;
 }
 .dropdown-item {
   @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 79b022b06..1d1cf0b11 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -9,6 +9,7 @@
       <o-notification
         v-if="isEventOrganiser && !areCommentsClosed"
         :closable="false"
+        class="my-2"
         >{{ t("Comments are closed for everybody else.") }}</o-notification
       >
       <article class="flex flex-wrap items-start gap-2">
diff --git a/js/src/components/Discussion/DiscussionComment.story.vue b/js/src/components/Discussion/DiscussionComment.story.vue
index df08a9320..86621443f 100644
--- a/js/src/components/Discussion/DiscussionComment.story.vue
+++ b/js/src/components/Discussion/DiscussionComment.story.vue
@@ -44,6 +44,7 @@ const comment = reactive<IComment>({
 
 const deletedComment = reactive<IComment>({
   ...comment,
+  actor: null,
   deletedAt: new Date().toString(),
 });
 </script>
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index 20467153c..7f6df36d5 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="flex gap-1">
+  <article class="flex gap-2">
     <div class="">
       <figure class="" v-if="comment.actor && comment.actor.avatar">
         <img
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index c6219e296..069229c9c 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/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 = {
diff --git a/js/src/components/Event/EventListViewCard.vue b/js/src/components/Event/EventListViewCard.vue
index 9a46404b5..0924b6af3 100644
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/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="">
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 04ea561ed..6b0b33c85 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/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") }}
diff --git a/js/src/components/Event/MultiCard.vue b/js/src/components/Event/MultiCard.vue
index ba8cf4255..66b12de37 100644
--- a/js/src/components/Event/MultiCard.vue
+++ b/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>
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index 977c09806..a1126a869 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -4,7 +4,7 @@
       name: RouteName.GROUP,
       params: { preferredUsername: usernameWithDomain(group) },
     }"
-    class="card flex flex-col max-w-md bg-white dark:bg-mbz-purple dark:text-white rounded shadow-lg"
+    class="card flex flex-col max-w-md bg-white dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg"
   >
     <figure class="rounded-t-lg flex justify-center h-1/4">
       <lazy-image-wrapper :picture="group.banner" :rounded="true" />
diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index 4ed58157b..16581ed35 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -40,30 +40,30 @@
                 },
               }"
             >
-              <h2 class="text-2xl">{{ member.parent.name }}</h2>
-              <div class="">
+              <h2 class="mt-0">{{ member.parent.name }}</h2>
+              <div class="flex flex-col">
                 <span class="text-sm">{{
                   `@${usernameWithDomain(member.parent)}`
                 }}</span>
-                <div>
-                  <tag
-                    variant="info"
-                    v-if="member.role === MemberRole.ADMINISTRATOR"
-                    >{{ $t("Administrator") }}</tag
-                  >
-                  <tag
-                    variant="info"
-                    v-else-if="member.role === MemberRole.MODERATOR"
-                    >{{ $t("Moderator") }}</tag
-                  >
-                </div>
+                <tag
+                  variant="info"
+                  v-if="member.role === MemberRole.ADMINISTRATOR"
+                  >{{ $t("Administrator") }}</tag
+                >
+                <tag
+                  variant="info"
+                  v-else-if="member.role === MemberRole.MODERATOR"
+                  >{{ $t("Moderator") }}</tag
+                >
               </div>
             </router-link>
           </div>
         </div>
-        <div class="mt-3 prose lg:prose-xl" v-if="member.parent.summary">
-          <p v-html="member.parent.summary" />
-        </div>
+        <div
+          class="mt-3 prose dark:prose-invert lg:prose-xl line-clamp-2"
+          v-if="member.parent.summary"
+          v-html="flattenHTMLParagraphs(member.parent.summary)"
+        />
       </div>
       <div>
         <o-dropdown aria-role="list" position="bottom-left">
@@ -95,6 +95,7 @@ import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import Tag from "@/components/Tag.vue";
+import { flattenHTMLParagraphs } from "@/utils/html";
 
 defineProps<{
   member: IMember;
diff --git a/js/src/components/Group/InvitationsList.vue b/js/src/components/Group/InvitationsList.vue
index 2be46c20d..868375fcf 100644
--- a/js/src/components/Group/InvitationsList.vue
+++ b/js/src/components/Group/InvitationsList.vue
@@ -46,7 +46,7 @@ const notifier = inject<Notifier>("notifier");
 const onError = (error: ErrorResponse) => {
   console.error(error);
   if (error.graphQLErrors && error.graphQLErrors.length > 0) {
-    notifier.error(error.graphQLErrors[0].message);
+    notifier?.error(error.graphQLErrors[0].message);
   }
 };
 
diff --git a/js/src/components/Home/CategoriesPreview.vue b/js/src/components/Home/CategoriesPreview.vue
index 94e97ea37..7a51b6615 100644
--- a/js/src/components/Home/CategoriesPreview.vue
+++ b/js/src/components/Home/CategoriesPreview.vue
@@ -8,14 +8,13 @@
       :category="category"
       :with-details="false"
     />
-    <router-link :to="{ name: RouteName.CATEGORIES }">
-      <div
-        class="flex items-end brightness-85 h-36 w-36 md:h-52 md:w-52 rounded-lg font-semibold text-lg md:text-xl p-4 text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"
-      >
-        <span>
-          {{ t("View all categories") }}
-        </span>
-      </div>
+    <router-link
+      :to="{ name: RouteName.CATEGORIES }"
+      class="flex items-end brightness-85 h-36 w-36 md:h-52 md:w-52 rounded-lg font-semibold text-lg md:text-xl p-4 text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:text-slate-200"
+    >
+      <span>
+        {{ t("View all categories") }}
+      </span>
     </router-link>
   </section>
 </template>
@@ -63,6 +62,6 @@ const promotedCategories = computed((): CategoryStatsModel[] => {
       number,
       label: eventCategoryLabel(key),
     }))
-    .slice(0, 10);
+    .slice(0, 9);
 });
 </script>
diff --git a/js/src/components/Home/SearchFields.vue b/js/src/components/Home/SearchFields.vue
index c7e28b4ca..011948324 100644
--- a/js/src/components/Home/SearchFields.vue
+++ b/js/src/components/Home/SearchFields.vue
@@ -32,7 +32,7 @@ import { IAddress } from "@/types/address.model";
 import { AddressSearchType } from "@/types/enums";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import FullAddressAutoComplete from "../Event/FullAddressAutoComplete.vue";
+import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 
 const props = defineProps<{
   location: IAddress;
diff --git a/js/src/components/Home/UnloggedIntroduction.story.vue b/js/src/components/Home/UnloggedIntroduction.story.vue
index 402889573..4958f4e22 100644
--- a/js/src/components/Home/UnloggedIntroduction.story.vue
+++ b/js/src/components/Home/UnloggedIntroduction.story.vue
@@ -1,19 +1,23 @@
 <template>
-  <Story :setup-app="setupApp">
+  <Story>
     <Variant :title="'Open'">
-      <UnloggedIntroduction />
+      <UnloggedIntroduction :config="config" />
     </Variant>
     <Variant :title="'Closed'">
-      <UnloggedIntroduction />
+      <UnloggedIntroduction :config="configClosed" />
     </Variant>
   </Story>
 </template>
 <script lang="ts" setup>
-import { apolloClient } from "@/vue-apollo";
-import { DefaultApolloClient } from "@vue/apollo-composable";
+import { reactive } from "vue";
 import UnloggedIntroduction from "./UnloggedIntroduction.vue";
 
-function setupApp({ app }) {
-  app.provide(DefaultApolloClient, apolloClient);
-}
+const config = reactive({
+  name: "My instance name",
+  description: "An instance that doesn't exist",
+  slogan: "Test! Test! Test!",
+  registrationsOpen: true,
+});
+
+const configClosed = reactive({ ...config, registrationsOpen: false });
 </script>
diff --git a/js/src/components/Home/UnloggedIntroduction.vue b/js/src/components/Home/UnloggedIntroduction.vue
index d3ea687b6..39fd0c73c 100644
--- a/js/src/components/Home/UnloggedIntroduction.vue
+++ b/js/src/components/Home/UnloggedIntroduction.vue
@@ -1,7 +1,7 @@
 <template>
-  <section v-if="config" class="container mx-auto px-2 my-3">
+  <section class="container mx-auto px-2 my-3">
     <h1 class="dark:text-white font-bold">
-      {{ config.slogan || t("Gather ⋅ Organize ⋅ Mobilize") }}
+      {{ config.slogan ?? t("Gather ⋅ Organize ⋅ Mobilize") }}
     </h1>
     <i18n-t
       keypath="Join {instance}, a Mobilizon instance"
@@ -37,16 +37,11 @@
   </section>
 </template>
 <script lang="ts" setup>
-import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
-import { useQuery } from "@vue/apollo-composable";
-import { computed } from "vue";
 import RouteName from "@/router/name";
 import { useI18n } from "vue-i18n";
 
-const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
-
-const config = computed(() => configResult.value?.config);
+defineProps<{ config: IConfig }>();
 
 const { t } = useI18n({ useScope: "global" });
 </script>
diff --git a/js/src/components/Local/CloseContent.vue b/js/src/components/Local/CloseContent.vue
index c7d7a3b1c..d705f87c2 100644
--- a/js/src/components/Local/CloseContent.vue
+++ b/js/src/components/Local/CloseContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative pt-10">
+  <div class="relative pt-10 px-2">
     <div class="w-full flex flex-wrap gap-3 mb-2 items-center">
       <h1
         class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
@@ -9,7 +9,7 @@
       <button
         v-if="suggestGeoloc && isIPLocation"
         class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
-        @click="$emit('doGeoLoc')"
+        @click="emit('doGeoLoc')"
       >
         {{ t("Geolocate me") }}
       </button>
@@ -24,7 +24,7 @@
     </div>
     <div class="overflow-hidden">
       <div
-        class="relative w-full flex gap-6 snap-x overflow-x-auto pb-6"
+        class="relative w-full snap-x overflow-x-auto pb-6 grid auto-rows-[1fr] gap-x-5 gap-y-8 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"
         ref="scrollContainer"
         @scroll="scrollHandler"
       >
diff --git a/js/src/components/Local/MoreContent.vue b/js/src/components/Local/MoreContent.vue
index 612875fd3..1f13ff471 100644
--- a/js/src/components/Local/MoreContent.vue
+++ b/js/src/components/Local/MoreContent.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link
     :to="to"
-    class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col my-4 snap-center shrink-0 first:pl-8 w-[18rem]"
+    class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem]"
   >
     <div class="relative w-full group">
       <img
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index d20120c2d..5b1e3e827 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,12 +1,10 @@
 <template>
   <nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-gray-900">
-    <div
-      class="container mx-auto flex flex-wrap justify-between items-center mx-auto"
-    >
+    <div class="container mx-auto flex flex-wrap items-center mx-auto gap-4">
       <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
         <MobilizonLogo class="w-40" />
       </router-link>
-      <div class="flex items-center md:order-2" v-if="currentActor?.id">
+      <div class="flex items-center md:order-2 ml-auto" v-if="currentActor?.id">
         <o-dropdown>
           <template #trigger>
             <button
@@ -80,7 +78,7 @@
         </o-dropdown>
       </div>
       <button
-        @click="showMobileMenu = true"
+        @click="showMobileMenu = !showMobileMenu"
         type="button"
         class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         aria-controls="mobile-menu-2"
@@ -109,6 +107,20 @@
         <ul
           class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:text-sm md:font-medium"
         >
+          <li v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_EVENTS }"
+              class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My events") }}</router-link
+            >
+          </li>
+          <li v-if="currentActor?.id">
+            <router-link
+              :to="{ name: RouteName.MY_GROUPS }"
+              class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("My groups") }}</router-link
+            >
+          </li>
           <li v-if="!currentActor?.id">
             <router-link
               :to="{ name: RouteName.LOGIN }"
diff --git a/js/src/components/Post/SharePostModal.vue b/js/src/components/Post/SharePostModal.vue
index 3969b311d..d784646d6 100644
--- a/js/src/components/Post/SharePostModal.vue
+++ b/js/src/components/Post/SharePostModal.vue
@@ -23,7 +23,7 @@
 import { PostVisibility } from "@/types/enums";
 import { IPost } from "../../types/post.model";
 import RouteName from "@/router/name";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import ShareModal from "@/components/Share/ShareModal.vue";
diff --git a/js/src/components/Share/ShareModal.vue b/js/src/components/Share/ShareModal.vue
index 8ca0a710e..03556d426 100644
--- a/js/src/components/Share/ShareModal.vue
+++ b/js/src/components/Share/ShareModal.vue
@@ -28,7 +28,7 @@
             </o-tooltip>
           </p>
         </o-field>
-        <div class="flex">
+        <div class="flex flex-wrap gap-1">
           <a
             :href="twitterShare"
             target="_blank"
diff --git a/js/src/components/Utils/EmptyContent.vue b/js/src/components/Utils/EmptyContent.vue
index 9224ad51d..9b937cb63 100644
--- a/js/src/components/Utils/EmptyContent.vue
+++ b/js/src/components/Utils/EmptyContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="flex flex-col items-center mt-80"
-    :class="{ 'mt-40 mb-10': inline, 'text-center': center }"
+    class="flex flex-col items-center"
+    :class="{ 'mt-20 mb-10': inline, 'mt-80': !inline, 'text-center': center }"
     role="note"
   >
     <o-icon :icon="icon" customSize="48" />
diff --git a/js/src/composition/apollo/actor.ts b/js/src/composition/apollo/actor.ts
index 3cd381186..3fe3be7f7 100644
--- a/js/src/composition/apollo/actor.ts
+++ b/js/src/composition/apollo/actor.ts
@@ -4,10 +4,9 @@ import {
   IDENTITIES,
   PERSON_STATUS_GROUP,
 } from "@/graphql/actor";
-import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
+import { IPerson } from "@/types/actor";
 import { useQuery } from "@vue/apollo-composable";
-import { group } from "console";
-import { computed, ref, Ref, unref } from "vue";
+import { computed, Ref, unref } from "vue";
 import { useCurrentUserClient } from "./user";
 
 export function useCurrentActorClient() {
diff --git a/js/src/histoire.setup.ts b/js/src/histoire.setup.ts
index f2fe6b053..b9757b419 100644
--- a/js/src/histoire.setup.ts
+++ b/js/src/histoire.setup.ts
@@ -4,6 +4,7 @@ import { i18n } from "./utils/i18n";
 import Oruga from "@oruga-ui/oruga-next";
 import "@oruga-ui/oruga-next/dist/oruga-full-vars.css";
 import "./assets/tailwind.css";
+import "./assets/oruga-tailwindcss.css";
 import locale from "date-fns/locale/en-US";
 import MaterialIcon from "./components/core/MaterialIcon.vue";
 
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 859f1d013..92638ed13 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1359,5 +1359,11 @@
   "Published events with {comments} comments and {participations} confirmed participations": "Published events with {comments} comments and {participations} confirmed participations",
   "Ex: someone{'@'}mobilizon.org": "Ex: someone{'@'}mobilizon.org",
   "Group members": "Group members",
-  "e.g. Nantes, Berlin, Cork, …": "e.g. Nantes, Berlin, Cork, …"
+  "e.g. Nantes, Berlin, Cork, …": "e.g. Nantes, Berlin, Cork, …",
+  "find, create and organise events": "find, create and organise events",
+  "tool designed to serve you": "tool designed to serve you",
+  "multitude of interconnected Mobilizon websites": "multitude of interconnected Mobilizon websites",
+  "Mobilizon is a tool that helps you {find_create_organize_events}.": "Mobilizon is a tool that helps you {find_create_organize_events}.",
+  "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.": "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.",
+  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}."
 }
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index f022d27ac..4869c5a17 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1345,5 +1345,11 @@
   "Open user menu": "Ouvrir le menu utilisateur",
   "Open main menu": "Ouvrir le menu principal",
   "This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique.": "C'est comme votre adresse fédérée ({username}) pour les groupes. Cela permettra au groupe d'être trouvable sur la fédération, et est garanti d'être unique.",
-  "Published events with {comments} comments and {participations} confirmed participations": "Événements publiés avec {comments} commentaires et {participations} participations confirmées"
+  "Published events with {comments} comments and {participations} confirmed participations": "Événements publiés avec {comments} commentaires et {participations} participations confirmées",
+  "find, create and organise events": "trouver, créer et organiser des événements",
+  "tool designed to serve you": "outil conçu pour vous servir",
+  "multitude of interconnected Mobilizon websites": "multitude de sites web Mobilizon interconnectés",
+  "Mobilizon is a tool that helps you {find_create_organize_events}.": "Mobilizon est un outil qui vous permet de {find_create_organize_events}.",
+  "Ethical alternative to Facebook events, groups and pages, Mobilizon is a {tool_designed_to_serve_you}. Period.": "Alternative éthique aux événements, groupes et pages Facebook, Mobilizon est un {tool_designed_to_serve_you}. Point.",
+  "Mobilizon is not a giant platform, but a {multitude_of_interconnected_mobilizon_websites}.": "Mobilizon n’est pas une plateforme géante, mais une {multitude_of_interconnected_mobilizon_websites}."
 }
diff --git a/js/src/oruga-config.ts b/js/src/oruga-config.ts
index a46636656..59b6c867e 100644
--- a/js/src/oruga-config.ts
+++ b/js/src/oruga-config.ts
@@ -8,6 +8,7 @@ export const orugaConfig = {
     roundedClass: "btn-rounded",
     outlinedClass: "btn-outlined-",
     disabledClass: "btn-disabled",
+    sizeClass: "btn-size-",
   },
   field: {
     rootClass: "field",
diff --git a/js/src/utils/html.ts b/js/src/utils/html.ts
index ee6cea891..c47c06f20 100644
--- a/js/src/utils/html.ts
+++ b/js/src/utils/html.ts
@@ -1,3 +1,7 @@
 export function nl2br(text: string): string {
   return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
 }
+
+export function flattenHTMLParagraphs(html: string): string {
+  return html.replace("</p><p>", "<br />").replace(/<?\/p>/g, "");
+}
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index e94c8f8fc..6c0c613df 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -65,7 +65,7 @@
                   </popover-actor-card>
                 </span>
               </div>
-              <p class="tags" dir="auto">
+              <p class="flex gap-1 items-center" dir="auto">
                 <tag v-if="eventCategory" class="category">{{
                   eventCategory
                 }}</tag>
@@ -363,13 +363,10 @@
         </div>
       </div>
 
-      <section
-        class="more-events section"
-        v-if="(event?.relatedEvents ?? []).length > 0"
-      >
-        <h3 class="title has-text-centered">
+      <section class="" v-if="(event?.relatedEvents ?? []).length > 0">
+        <h2 class="">
           {{ t("These events may interest you") }}
-        </h3>
+        </h2>
         <multi-card :events="event?.relatedEvents ?? []" />
       </section>
       <o-modal
@@ -524,45 +521,45 @@ import {
   EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
   FETCH_EVENT,
   JOIN_EVENT,
-} from "../../graphql/event";
-import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "../../graphql/actor";
-import { EventModel, IEvent } from "../../types/event.model";
+} from "@/graphql/event";
+import { CURRENT_ACTOR_CLIENT, PERSON_STATUS_GROUP } from "@/graphql/actor";
+import { EventModel, IEvent } from "@/types/event.model";
 import {
   displayName,
   IActor,
   IPerson,
   Person,
   usernameWithDomain,
-} from "../../types/actor";
-import { GRAPHQL_API_ENDPOINT } from "../../api/_entrypoint";
-import DateCalendarIcon from "../../components/Event/DateCalendarIcon.vue";
-import MultiCard from "../../components/Event/MultiCard.vue";
-import ReportModal from "../../components/Report/ReportModal.vue";
-import { IReport } from "../../types/report.model";
-import { CREATE_REPORT } from "../../graphql/report";
-import EventMixin from "../../mixins/event";
+} from "@/types/actor";
+import { GRAPHQL_API_ENDPOINT } from "@/api/_entrypoint";
+import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import MultiCard from "@/components/Event/MultiCard.vue";
+import ReportModal from "@/components/Report/ReportModal.vue";
+import { IReport } from "@/types/report.model";
+import { CREATE_REPORT } from "@/graphql/report";
+import EventMixin from "@/mixins/event";
 import IdentityPicker from "../Account/IdentityPicker.vue";
-import ParticipationSection from "../../components/Participation/ParticipationSection.vue";
-import RouteName from "../../router/name";
-import CommentTree from "../../components/Comment/CommentTree.vue";
+import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
+import RouteName from "@/router/name";
+import CommentTree from "@/components/Comment/CommentTree.vue";
 import "intersection-observer";
-import { CONFIG } from "../../graphql/config";
+import { CONFIG } from "@/graphql/config";
 import {
   AnonymousParticipationNotFoundError,
   getLeaveTokenForParticipation,
   isParticipatingInThisEvent,
   removeAnonymousParticipation,
-} from "../../services/AnonymousParticipationStorage";
-import { IConfig } from "../../types/config.model";
-import Tag from "../../components/Tag.vue";
-import EventMetadataSidebar from "../../components/Event/EventMetadataSidebar.vue";
-import EventBanner from "../../components/Event/EventBanner.vue";
-import EventMap from "../../components/Event/EventMap.vue";
-import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
-import { IParticipant } from "../../types/participant.model";
+} from "@/services/AnonymousParticipationStorage";
+import { IConfig } from "@/types/config.model";
+import Tag from "@/components/Tag.vue";
+import EventMetadataSidebar from "@/components/Event/EventMetadataSidebar.vue";
+import EventBanner from "@/components/Event/EventBanner.vue";
+import EventMap from "@/components/Event/EventMap.vue";
+import PopoverActorCard from "@/components/Account/PopoverActorCard.vue";
+import { IParticipant } from "@/types/participant.model";
 import { ApolloCache, FetchResult } from "@apollo/client/core";
 import { IEventMetadataDescription } from "@/types/event-metadata";
-import { eventMetaDataList } from "../../services/EventMetadata";
+import { eventMetaDataList } from "@/services/EventMetadata";
 import { USER_SETTINGS } from "@/graphql/user";
 import { IUser } from "@/types/current-user.model";
 import { useDeleteEvent, useFetchEvent } from "@/composition/apollo/event";
@@ -606,22 +603,22 @@ import { Dialog } from "@/plugins/dialog";
 import { Notifier } from "@/plugins/notifier";
 
 const ShareEventModal = defineAsyncComponent(
-  () => import("../../components/Event/ShareEventModal.vue")
+  () => import("@/components/Event/ShareEventModal.vue")
 );
 const IntegrationTwitch = defineAsyncComponent(
-  () => import("../../components/Event/Integrations/Twitch.vue")
+  () => import("@/components/Event/Integrations/Twitch.vue")
 );
 const IntegrationPeertube = defineAsyncComponent(
-  () => import("../../components/Event/Integrations/PeerTube.vue")
+  () => import("@/components/Event/Integrations/PeerTube.vue")
 );
 const IntegrationYoutube = defineAsyncComponent(
-  () => import("../../components/Event/Integrations/YouTube.vue")
+  () => import("@/components/Event/Integrations/YouTube.vue")
 );
 const IntegrationJitsiMeet = defineAsyncComponent(
-  () => import("../../components/Event/Integrations/JitsiMeet.vue")
+  () => import("@/components/Event/Integrations/JitsiMeet.vue")
 );
 const IntegrationEtherpad = defineAsyncComponent(
-  () => import("../../components/Event/Integrations/Etherpad.vue")
+  () => import("@/components/Event/Integrations/Etherpad.vue")
 );
 
 const props = defineProps<{
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 31578f070..8112a5f04 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container mx-auto">
-    <h1 class="text-4xl">
+  <div class="container mx-auto px-1">
+    <h1>
       {{ t("My events") }}
     </h1>
     <p>
@@ -126,7 +126,7 @@
           </div>
         </section>
         <section
-          class="has-text-centered not-found"
+          class="text-center not-found"
           v-if="
             showUpcoming &&
             monthlyFutureEvents &&
@@ -135,7 +135,7 @@
           "
         >
           <div class="img-container h-64" />
-          <div class="content has-text-centered">
+          <div class="text-center prose dark:prose-invert">
             <p>
               {{
                 t(
@@ -411,16 +411,7 @@ const firstDayOfWeek = computed((): number => {
 });
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-// @import "node_modules/bulma/sass/utilities/mixins.sass";
-
-main > .container {
-  & > h1 {
-    margin: 10px auto 5px;
-  }
-}
-
 .participation {
   margin: 1rem auto;
 }
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
index 2e7507dd8..7c693c28b 100644
--- a/js/src/views/HomeView.vue
+++ b/js/src/views/HomeView.vue
@@ -1,13 +1,7 @@
 <template>
   <div>
     <!-- <o-loading v-model:active="$apollo.loading" /> -->
-    <section
-      class="mt-5 sm:mt-24"
-      v-if="
-        config &&
-        (!currentUser || !currentUser.id || !currentActor || !currentActor.id)
-      "
-    >
+    <section class="mt-5 sm:mt-24">
       <div class="-z-10 overflow-hidden">
         <img
           alt=""
@@ -29,7 +23,7 @@
         />
       </div>
     </section>
-    <unlogged-introduction />
+    <unlogged-introduction :config="config" v-if="config && !isLoggedIn" />
     <search-fields v-model:search="search" v-model:location="location" />
     <categories-preview />
     <div
@@ -37,7 +31,7 @@
       class="container mx-auto section"
       v-if="config && (!currentUser || !currentActor)"
     >
-      <section class="events-recent">
+      <section class="events-recent px-2">
         <h2 class="title">
           {{ $t("Last published events") }}
         </h2>
@@ -254,7 +248,7 @@
         class="home-separator"
         v-if="canShowMyUpcomingEvents"
       />
-      <section class="events-recent">
+      <section class="events-recent px-2">
         <h2 class="dark:text-white text-2xl font-bold">
           {{ $t("Last published events") }}
         </h2>
@@ -285,7 +279,7 @@
         <o-notification v-else variant="danger"
           >{{ $t("No events found") }}<br />
           <div v-if="goingToEvents.size > 0">
-            <!-- <o-icon size="small" icon="information-outline" /> -->
+            <InformationOutline :size="16" />
             <small>{{
               $t("The events you created are not shown here.")
             }}</small>
@@ -335,6 +329,7 @@ import CategoriesPreview from "@/components/Home/CategoriesPreview.vue";
 import UnloggedIntroduction from "@/components/Home/UnloggedIntroduction.vue";
 import SearchFields from "@/components/Home/SearchFields.vue";
 import { useHead } from "@vueuse/head";
+import InformationOutline from "vue-material-design-icons/InformationOutline.vue";
 
 const { result: resultEvents } = useQuery<{ events: Paginate<IEvent> }>(
   FETCH_EVENTS,
@@ -644,6 +639,8 @@ watch(loggedUser, (loggedUserValue) => {
 //   };
 // },
 
+const isLoggedIn = computed(() => loggedUser.value?.id !== undefined);
+
 useHead({
   title: computed(() => instanceName.value ?? ""),
 });
diff --git a/js/src/views/SettingsView.vue b/js/src/views/SettingsView.vue
index 6a3b65ecd..c7a8c2709 100644
--- a/js/src/views/SettingsView.vue
+++ b/js/src/views/SettingsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container mx-auto">
-    <h1 class="text-violet-3">{{ t("Settings") }}</h1>
+    <h1 class="text-violet-3 dark:text-white">{{ t("Settings") }}</h1>
     <div class="flex flex-wrap gap-4">
       <SettingsMenu class="max-w-xs w-full" />
       <div class="flex-1">
diff --git a/js/src/views/User/LoginView.vue b/js/src/views/User/LoginView.vue
index 9745fef84..923e01939 100644
--- a/js/src/views/User/LoginView.vue
+++ b/js/src/views/User/LoginView.vue
@@ -69,7 +69,7 @@
         />
       </o-field>
 
-      <p class="control has-text-centered" v-if="!submitted">
+      <p class="text-center my-2" v-if="!submitted">
         <o-button
           variant="primary"
           size="large"
diff --git a/js/vite.config.js b/js/vite.config.js
index 7ab9854e6..ea799e616 100644
--- a/js/vite.config.js
+++ b/js/vite.config.js
@@ -27,9 +27,9 @@ export default defineConfig(({ command }) => {
         srcDir: "src",
         filename: "service-worker.ts",
         // injectRegister: "auto",
-        devOptions: {
-          enabled: true,
-        },
+        // devOptions: {
+        //   enabled: true,
+        // },
       }),
       // vueI18n({
       //   /* options */