Various improvements

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

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>

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;

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>

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>