Various improvements

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

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<{

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;
 }

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 ?? ""),
 });

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">

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"