From 57c3df43ffe81aa1a8a2d95fb9dba1826fe18544 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 12 Jul 2022 10:55:28 +0200
Subject: [PATCH] Remove SCSS variables

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/App.vue                                |   4 -
 js/src/assets/oruga-tailwindcss.css           |  19 +-
 js/src/common.scss                            | 188 ------------------
 .../components/Account/PopoverActorCard.vue   |  10 -
 js/src/components/Activity/activity.scss      |   3 -
 js/src/components/Categories/CategoryCard.vue |   2 +
 js/src/components/Comment/Comment.vue         |  15 +-
 .../Dashboard/LinkedNumberDashboardTile.vue   |  25 +++
 .../Dashboard/NumberDashboardTile.vue         |  20 ++
 .../Discussion/DiscussionComment.vue          |   3 -
 js/src/components/Editor.vue                  |  22 --
 js/src/components/Editor/MentionList.vue      |   6 -
 js/src/components/ErrorComponent.vue          |   1 -
 js/src/components/Event/EventCard.vue         |   4 +-
 .../components/Event/EventMinimalistCard.vue  |  31 ++-
 .../Event/EventParticipationCard.vue          |   2 -
 .../Event/GroupedMultiEventMinimalistCard.vue |   1 -
 .../Event/RecentEventCardWrapper.vue          |   6 +-
 js/src/components/Footer.vue                  |   4 +-
 js/src/components/Group/InvitationCard.vue    |  10 -
 .../{Invitations.vue => InvitationsList.vue}  |   4 +-
 js/src/components/Image/LazyImage.vue         |   2 -
 .../{Logo.vue => MobilizonLogo.vue}           |  16 +-
 js/src/components/NavBar.vue                  | 115 ++---------
 js/src/components/Post/PostListItem.vue       |   1 -
 js/src/components/Resource/FolderItem.vue     |   1 -
 js/src/components/Resource/ResourceItem.vue   |   1 -
 .../components/Resource/ResourceSelector.vue  |   1 -
 .../components/Settings/SettingMenuItem.vue   |   1 -
 .../Settings/SettingMenuSection.vue           |  32 +--
 js/src/components/User/AuthProvider.vue       |   2 +
 js/src/components/Utils/VerticalDivider.vue   |   5 -
 js/src/components/core/Dialog.vue             |  19 +-
 js/src/components/core/MaterialIcon.vue       |  17 +-
 js/src/composition/apollo/actor.ts            |   5 +-
 js/src/composition/apollo/group.ts            |  14 +-
 js/src/i18n/en_US.json                        |   7 +-
 js/src/i18n/fr_FR.json                        |   5 +-
 js/src/plugins/dialog.ts                      |  15 +-
 js/src/router/settings.ts                     |   3 +-
 js/src/styles/vue-skip-to.scss                |   5 -
 js/src/variables.scss                         | 182 -----------------
 .../views/Account/IdentityPickerWrapper.vue   |  10 +-
 js/src/views/Account/Register.vue             |   4 -
 .../views/Account/children/EditIdentity.vue   |  15 +-
 js/src/views/Admin/Dashboard.vue              | 175 ----------------
 js/src/views/Admin/DashboardView.vue          | 151 ++++++++++++++
 js/src/views/Admin/Instances.vue              |   9 +-
 js/src/views/Admin/Settings.vue               | 187 +++++++++--------
 js/src/views/Admin/Users.vue                  |   1 -
 js/src/views/Event/Edit.vue                   |  64 ++----
 js/src/views/Event/Event.vue                  |   1 -
 js/src/views/Event/MyEvents.vue               |   3 -
 js/src/views/Event/Participants.vue           |   7 -
 js/src/views/Group/Group.vue                  |  26 +--
 js/src/views/Group/GroupSettings.vue          |   2 +-
 js/src/views/Group/MyGroups.vue               |   6 +-
 js/src/views/Group/Settings.vue               |   9 -
 js/src/views/HomeView.vue                     |  12 +-
 js/src/views/Interact.vue                     |   5 -
 js/src/views/Moderation/Logs.vue              |   2 +-
 js/src/views/Moderation/Report.vue            |   4 -
 js/src/views/Posts/Edit.vue                   |   2 -
 js/src/views/Posts/Post.vue                   |   2 -
 js/src/views/Settings/AccountSettings.vue     |   4 +-
 js/src/views/Settings/NotificationsView.vue   |   2 -
 js/src/views/SettingsView.vue                 |   2 +-
 js/tailwind.config.js                         |   6 +-
 js/vite.config.js                             |   3 -
 69 files changed, 478 insertions(+), 1065 deletions(-)
 delete mode 100644 js/src/common.scss
 create mode 100644 js/src/components/Dashboard/LinkedNumberDashboardTile.vue
 create mode 100644 js/src/components/Dashboard/NumberDashboardTile.vue
 rename js/src/components/Group/{Invitations.vue => InvitationsList.vue} (95%)
 rename js/src/components/{Logo.vue => MobilizonLogo.vue} (95%)
 delete mode 100644 js/src/variables.scss
 delete mode 100644 js/src/views/Admin/Dashboard.vue
 create mode 100644 js/src/views/Admin/DashboardView.vue

diff --git a/js/src/App.vue b/js/src/App.vue
index 6bcc887dd..37202e3f8 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -268,10 +268,6 @@ const { isDemoMode } = useIsDemoMode();
 </script>
 
 <style lang="scss">
-@import "variables";
-
-@import "common";
-
 #mobilizon {
   min-height: 100vh;
   display: flex;
diff --git a/js/src/assets/oruga-tailwindcss.css b/js/src/assets/oruga-tailwindcss.css
index 229633840..9e5be0fe5 100644
--- a/js/src/assets/oruga-tailwindcss.css
+++ b/js/src/assets/oruga-tailwindcss.css
@@ -7,18 +7,29 @@ body {
   outline: none !important;
   @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded h-10;
 }
+.btn:hover {
+  @apply text-slate-200;
+}
 .btn-rounded {
   @apply rounded-full;
 }
+.btn-outlined-,
 .btn-outlined-primary {
-  @apply bg-transparent text-blue-700 font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
+  @apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
 }
+.btn-outlined-:hover,
 .btn-outlined-primary:hover {
   @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
 }
 .btn-disabled {
   @apply opacity-50 cursor-not-allowed;
 }
+.btn-danger {
+  @apply bg-mbz-danger;
+}
+.btn-success {
+  @apply bg-mbz-success;
+}
 
 /* Field */
 .field {
@@ -100,7 +111,7 @@ body {
   @apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
 }
 .dropdown-item {
-  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer;
+  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
 }
 
 .dropdown-item-active {
@@ -157,7 +168,7 @@ button.menubar__button {
 
 /* Notification */
 .notification {
-  @apply p-7;
+  @apply p-7 bg-secondary text-black rounded;
 }
 
 .notification-primary {
@@ -178,7 +189,7 @@ button.menubar__button {
 
 /* Table */
 .table tr {
-  @apply odd:bg-white even:bg-gray-50 border-b;
+  @apply odd:bg-white dark:odd:bg-gray-800 even:bg-gray-50 dark:even:bg-gray-900 border-b;
 }
 
 .table-td {
diff --git a/js/src/common.scss b/js/src/common.scss
deleted file mode 100644
index 5e835f208..000000000
--- a/js/src/common.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-@use "@/styles/_mixins" as *;
-@import "variables.scss";
-
-// @import "node_modules/bulma/bulma.sass";
-// @import "node_modules/bulma-divider/src/sass/index.sass";
-// @import "node_modules/buefy/src/scss/buefy";
-@import "styles/vue-announcer.scss";
-@import "styles/vue-skip-to.scss";
-
-a.out,
-.content a,
-.ProseMirror a {
-  text-decoration: underline;
-  text-decoration-color: #ed8d07;
-  text-decoration-thickness: 2px;
-}
-
-.section {
-  padding: 1rem 1% 4rem;
-}
-
-$color-black: #000;
-
-.mention {
-  background: rgba($color-black, 0.1);
-  font-size: 0.9rem;
-  font-weight: bold;
-  border-radius: 5px;
-  padding: 0.2rem;
-  white-space: nowrap;
-  @include margin-right(0.2rem);
-}
-
-.mention-suggestion {
-  color: rgba($color-black, 0.6);
-}
-
-.mention .mention {
-  background: initial;
-  @include margin-right(0);
-}
-
-.select select {
-  border-color: $borders;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-body {
-  background: $body-background-color;
-  font-family: BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Segoe UI",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  overflow-x: hidden;
-}
-
-#mobilizon > .container > .message {
-  margin: 1rem auto auto;
-  .message-header {
-    button.delete {
-      background: #4a4a4a;
-    }
-  }
-}
-
-.module-description {
-  margin-bottom: 2rem;
-  color: $violet-1;
-}
-
-// $list-background-color: $scheme-main !default;
-// $list-shadow: 0 2px 3px rgba($scheme-invert, 0.1),
-//   0 0 0 1px rgba($scheme-invert, 0.1) !default;
-// $list-radius: $radius !default;
-
-// $list-item-border: 1px solid $border !default;
-// $list-item-color: $text !default;
-// $list-item-active-background-color: $link !default;
-// $list-item-active-color: $link-invert !default;
-// $list-item-hover-background-color: $background !default;
-
-// .list-item {
-//   display: block;
-//   padding: 0.5em 1em;
-//   &:not(a) {
-//     color: $list-item-color;
-//   }
-//   &:first-child {
-//     border-top-left-radius: $list-radius;
-//     border-top-right-radius: $list-radius;
-//   }
-//   &:last-child {
-//     border-bottom-left-radius: $list-radius;
-//     border-bottom-right-radius: $list-radius;
-//   }
-//   &:not(:last-child) {
-//     border-bottom: $list-item-border;
-//   }
-//   &.is-active {
-//     background-color: $list-item-active-background-color;
-//     color: $list-item-active-color;
-//   }
-// }
-
-// a.list-item {
-//   background-color: $list-item-hover-background-color;
-//   cursor: pointer;
-// }
-
-.setting-title {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-
-  h2 {
-    display: inline;
-    background: $secondary;
-    padding: 2px 7.5px;
-    text-transform: uppercase;
-    font-size: 1.25rem;
-  }
-}
-
-@mixin focus() {
-  &:focus {
-    border: 2px solid black;
-    border-radius: 5px;
-  }
-}
-
-ul.menu-list > li,
-p {
-  @include focus;
-}
-.navbar-item {
-  @include focus;
-}
-
-.navbar-dropdown span.navbar-item:hover {
-  background-color: whitesmoke;
-  color: #0a0a0a;
-}
-
-/**
- * Bulma/Buefy fixes
- */
-.icon {
-  vertical-align: middle;
-}
-
-.tags .tag:not(:last-child) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.button .icon {
-  &:first-child:not(:last-child) {
-    @include margin-left(calc(-0.5em - 1px));
-    @include margin-right(0.25em);
-  }
-  &:last-child:not(:first-child) {
-    @include margin-right(calc(-0.5em - 1px));
-    @include margin-left(0.25em);
-  }
-}
-
-.buttons .button:not(:last-child):not(.is-fullwidth) {
-  margin-right: unset;
-  @include margin-right(0.5rem);
-}
-
-.breadcrumb li:first-child a {
-  padding-left: unset;
-  @include padding-left(0);
-  @include padding-right(0.75em);
-}
-.media-left {
-  @include margin-left(1rem);
-}
-a.dropdown-item {
-  @include padding-right(3rem);
-}
diff --git a/js/src/components/Account/PopoverActorCard.vue b/js/src/components/Account/PopoverActorCard.vue
index 04d1cad06..b649075e2 100644
--- a/js/src/components/Account/PopoverActorCard.vue
+++ b/js/src/components/Account/PopoverActorCard.vue
@@ -26,13 +26,3 @@ withDefaults(
   }
 );
 </script>
-
-<style lang="scss">
-.v-popper__inner {
-  padding: 0 !important;
-  background-color: transparent !important;
-}
-.v-popper__arrow-outer {
-  border-color: $violet-1 !important;
-}
-</style>
diff --git a/js/src/components/Activity/activity.scss b/js/src/components/Activity/activity.scss
index e2b98df0a..c12b82a2b 100644
--- a/js/src/components/Activity/activity.scss
+++ b/js/src/components/Activity/activity.scss
@@ -9,9 +9,6 @@
     z-index: 2;
     flex-shrink: 0;
 
-    &.has-text-grey {
-      border-color: $grey;
-    }
   }
 
   .subject {
diff --git a/js/src/components/Categories/CategoryCard.vue b/js/src/components/Categories/CategoryCard.vue
index 49b18659c..02bc38042 100644
--- a/js/src/components/Categories/CategoryCard.vue
+++ b/js/src/components/Categories/CategoryCard.vue
@@ -26,6 +26,8 @@
         class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
         :src="`/img/categories/${category.key.toLowerCase()}.jpg`"
         :srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
+        width="384"
+        height="384"
         alt=""
       />
     </picture>
diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
index 4e93b7f01..668c00661 100644
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -198,6 +198,7 @@ import Alert from "vue-material-design-icons/Alert.vue";
 import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
 import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
 import Reply from "vue-material-design-icons/Reply.vue";
+import type { Locale } from "date-fns";
 
 const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
 
@@ -359,7 +360,6 @@ form.reply {
   }
 
   strong.organizer {
-    background: $background-color;
     border-radius: 12px;
     color: white;
     padding: 0 6px;
@@ -400,29 +400,18 @@ a.comment-link {
   border-radius: 5px;
 
   &.announcement {
-    background: $purple-2;
-
     small {
       color: hsl(0, 0%, 21%);
     }
   }
 
   &.selected {
-    background-color: $violet-1;
-    color: $white;
     .reply-btn,
     small,
     span,
     strong,
-    .icons button {
-      color: $white;
-    }
     a.comment-link:hover {
       text-decoration: underline;
-      text-decoration-color: $white;
-      small {
-        color: $purple-3;
-      }
     }
   }
 
@@ -484,13 +473,11 @@ a.comment-link {
 
   & > p > span {
     font-weight: bold;
-    color: $violet-2;
   }
 }
 
 .level-item.reply-btn {
   font-weight: bold;
-  color: $violet-2;
 }
 
 article {
diff --git a/js/src/components/Dashboard/LinkedNumberDashboardTile.vue b/js/src/components/Dashboard/LinkedNumberDashboardTile.vue
new file mode 100644
index 000000000..76f52b7d5
--- /dev/null
+++ b/js/src/components/Dashboard/LinkedNumberDashboardTile.vue
@@ -0,0 +1,25 @@
+<template>
+  <router-link
+    v-if="to?.name"
+    :to="to"
+    class="bg-white dark:bg-black mb-4 shadow-md rounded p-4"
+  >
+    <NumberDashboardTile :number="number" :subtitle="subtitle" :style="false">
+      <template #subtitle>
+        <slot name="subtitle" />
+      </template>
+    </NumberDashboardTile>
+  </router-link>
+</template>
+<script lang="ts" setup>
+import NumberDashboardTile from "./NumberDashboardTile.vue";
+defineProps<{
+  number?: number;
+  subtitle?: string;
+  to?: {
+    name: string;
+    params?: Record<string, any>;
+    query?: Record<string, any>;
+  };
+}>();
+</script>
diff --git a/js/src/components/Dashboard/NumberDashboardTile.vue b/js/src/components/Dashboard/NumberDashboardTile.vue
new file mode 100644
index 000000000..28f2d9127
--- /dev/null
+++ b/js/src/components/Dashboard/NumberDashboardTile.vue
@@ -0,0 +1,20 @@
+<template>
+  <article
+    :class="{ 'bg-white dark:bg-black mb-4 shadow-md rounded p-4': style }"
+  >
+    <p class="text-violet-3 text-4xl font-bold">{{ number }}</p>
+    <slot name="subtitle">
+      {{ subtitle }}
+    </slot>
+  </article>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    number?: number;
+    subtitle?: string;
+    style?: boolean;
+  }>(),
+  { style: true }
+);
+</script>
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index a931c007a..20467153c 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -190,8 +190,6 @@ article.comment {
           display: block;
           line-height: 1rem;
         }
-
-        color: #3c376e;
       }
 
       .icons {
@@ -244,7 +242,6 @@ article.comment {
           a {
             display: inline-block;
             padding: 0.3rem;
-            background: $secondary;
             color: #111;
 
             &:empty {
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index 7a3926629..51d0cf419 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -420,9 +420,6 @@ onBeforeUnmount(() => {
 @use "@/styles/_mixins" as *;
 @import "./Editor/style.scss";
 
-$color-black: #000;
-$color-white: #eee;
-
 .menubar {
   margin-bottom: 1rem;
   transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
@@ -432,19 +429,10 @@ $color-white: #eee;
     display: inline-flex;
     background: transparent;
     border: 0;
-    color: $color-black;
     padding: 0.2rem 0.5rem;
     // @include margin-right(0.2rem);
     border-radius: 3px;
     cursor: pointer;
-
-    &:hover {
-      background-color: rgba($color-black, 0.05);
-    }
-
-    &.is-active {
-      background-color: rgba($color-black, 0.1);
-    }
   }
 }
 
@@ -487,7 +475,6 @@ $color-white: #eee;
       padding: 12px 6px;
 
       &:focus {
-        border-color: $background-color;
         outline: none;
       }
     }
@@ -520,8 +507,6 @@ $color-white: #eee;
     }
 
     blockquote {
-      border-left: 3px solid rgba($color-black, 0.1);
-      color: rgba($color-black, 0.8);
       // @include padding-left(0.8rem);
       font-style: italic;
 
@@ -562,7 +547,6 @@ $color-white: #eee;
 
 .suggestion-list {
   padding: 0.2rem;
-  border: 2px solid rgba($color-black, 0.1);
   font-size: 0.8rem;
   font-weight: bold;
   &__no-results {
@@ -576,10 +560,6 @@ $color-white: #eee;
     &:last-child {
       margin-bottom: 0;
     }
-    &.is-selected,
-    &:hover {
-      background-color: rgba($color-white, 0.2);
-    }
     &.is-empty {
       opacity: 0.5;
     }
@@ -591,11 +571,9 @@ $color-white: #eee;
   }
 }
 .tippy-box[data-theme~="dark"] {
-  background-color: $color-black;
   padding: 0;
   font-size: 1rem;
   text-align: inherit;
-  color: $color-white;
   border-radius: 5px;
 }
 
diff --git a/js/src/components/Editor/MentionList.vue b/js/src/components/Editor/MentionList.vue
index 5ba9e1f4c..30642051a 100644
--- a/js/src/components/Editor/MentionList.vue
+++ b/js/src/components/Editor/MentionList.vue
@@ -90,11 +90,5 @@ const selectItem = (index: number): void => {
   background: transparent;
   border: none;
   padding: 0.5rem 0.75rem;
-
-  &.is-selected,
-  &:hover {
-    color: $background-color;
-    background: rgba($background-color, 0.1);
-  }
 }
 </style>
diff --git a/js/src/components/ErrorComponent.vue b/js/src/components/ErrorComponent.vue
index 46221138c..37fd5fe8f 100644
--- a/js/src/components/ErrorComponent.vue
+++ b/js/src/components/ErrorComponent.vue
@@ -198,7 +198,6 @@ const sentryProvider = computed((): IAnalyticsConfig | undefined => {
 <style lang="scss" scoped>
 #error-wrapper {
   width: 100%;
-  background: $white;
 
   section {
     margin-bottom: 2rem;
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 4a518d5bd..c6219e296 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -46,7 +46,7 @@
         </div>
         <div class="flex-1 w-full flex flex-col justify-between">
           <h3
-            class="text-lg leading-5 line-clamp-3 font-bold"
+            class="text-lg leading-5 line-clamp-3 font-bold text-violet-3"
             :title="event.title"
             dir="auto"
             :lang="event.language"
@@ -54,7 +54,7 @@
             {{ event.title }}
           </h3>
           <div class="pt-3">
-            <div class="flex items-center" dir="auto">
+            <div class="flex items-center text-violet-3" dir="auto">
               <figure class="" v-if="actorAvatarURL">
                 <img
                   class="rounded-xl"
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index c2527a64d..22c9624da 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -47,25 +47,25 @@
       </h3>
       <inline-address
         v-if="event.physicalAddress"
-        class="event-subtitle"
+        class=""
         :physical-address="event.physicalAddress"
       />
-      <div
-        class="event-subtitle"
-        v-else-if="event.options && event.options.isOnline"
-      >
+      <div class="" v-else-if="event.options && event.options.isOnline">
         <Video />
         <span>{{ $t("Online") }}</span>
       </div>
-      <div class="event-subtitle event-organizer flex" v-if="showOrganizer">
-        <figure
-          class="image is-24x24"
-          v-if="organizer(event) && organizer(event)?.avatar"
-        >
-          <img class="is-rounded" :src="organizer(event)?.avatar?.url" alt="" />
+      <div class="flex gap-1" v-if="showOrganizer">
+        <figure class="" v-if="organizer(event) && organizer(event)?.avatar">
+          <img
+            class="rounded-full"
+            :src="organizer(event)?.avatar?.url"
+            alt=""
+            width="24"
+            height="24"
+          />
         </figure>
-        <AccountCircle v-else />
-        <span class="organizer-name">
+        <AccountCircle v-else :size="24" />
+        <span class="">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
@@ -145,8 +145,6 @@ withDefaults(
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-// @import "node_modules/bulma/sass/utilities/mixins.sass";
-// @import "@/variables.scss";
 
 .event-minimalist-card-wrapper {
   // display: grid;
@@ -191,8 +189,7 @@ withDefaults(
     //   -webkit-box-orient: vertical;
     //   overflow: hidden;
     //   font-weight: bold;
-    //   color: $title-color;
-    // }
+    d    // }
 
     :deep(.icon) {
       vertical-align: middle;
diff --git a/js/src/components/Event/EventParticipationCard.vue b/js/src/components/Event/EventParticipationCard.vue
index 5c3a82239..04ea561ed 100644
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -618,7 +618,6 @@ article.box {
         //     line-height: 24px;
         //     margin: auto 0;
         //     font-weight: bold;
-        //     color: $title-color;
         //   }
         // }
       }
@@ -626,7 +625,6 @@ article.box {
   }
 
   // .identity-header {
-  //   background: $yellow-2;
   //   display: flex;
   //   padding: 5px;
 
diff --git a/js/src/components/Event/GroupedMultiEventMinimalistCard.vue b/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
index 19031c06e..516f1ddc6 100644
--- a/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
+++ b/js/src/components/Event/GroupedMultiEventMinimalistCard.vue
@@ -69,7 +69,6 @@ const monthName = (event: IEvent): string => {
     font-size: 1.3rem;
 
     &::after {
-      background: $orange-3;
       position: absolute;
       left: 0;
       right: 0;
diff --git a/js/src/components/Event/RecentEventCardWrapper.vue b/js/src/components/Event/RecentEventCardWrapper.vue
index 11b0df75e..59b1f47aa 100644
--- a/js/src/components/Event/RecentEventCardWrapper.vue
+++ b/js/src/components/Event/RecentEventCardWrapper.vue
@@ -16,14 +16,10 @@ import { IEvent } from "@/types/event.model";
 import { formatDistanceToNow } from "date-fns";
 import { inject } from "vue";
 import EventCard from "./EventCard.vue";
+import type { Locale } from "date-fns";
 defineProps<{
   event: IEvent;
 }>();
 
 const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
-<style lang="scss" scoped>
-p.time {
-  color: $violet-3;
-}
-</style>
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index 3389512c0..bb5dd4b88 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -15,8 +15,8 @@
       <img
         :src="`/img/pics/footer_${random}-1024w.jpg`"
         alt=""
-        width="5234"
-        height="2189"
+        width="1024"
+        height="428"
         loading="lazy"
       />
     </picture>
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index 7d656b464..73ac7e040 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -80,13 +80,3 @@ defineProps<{
   member: IMember;
 }>();
 </script>
-
-<style lang="scss" scoped>
-.media:not(.subfield) {
-  background: lighten($primary, 40%);
-  padding: 10px;
-}
-h3 {
-  color: $violet-3;
-}
-</style>
diff --git a/js/src/components/Group/Invitations.vue b/js/src/components/Group/InvitationsList.vue
similarity index 95%
rename from js/src/components/Group/Invitations.vue
rename to js/src/components/Group/InvitationsList.vue
index 1957983a7..2be46c20d 100644
--- a/js/src/components/Group/Invitations.vue
+++ b/js/src/components/Group/InvitationsList.vue
@@ -17,8 +17,10 @@ import { IMember } from "@/types/actor/member.model";
 import { IGroup, IPerson, usernameWithDomain } from "@/types/actor";
 import { useMutation } from "@vue/apollo-composable";
 import { ErrorResponse } from "@/types/errors.model";
+import { inject } from "vue";
+import type { Notifier } from "@/plugins/notifier";
 
-const props = defineProps<{
+defineProps<{
   invitations: IMember[];
 }>();
 
diff --git a/js/src/components/Image/LazyImage.vue b/js/src/components/Image/LazyImage.vue
index 469678a09..01b121c3a 100644
--- a/js/src/components/Image/LazyImage.vue
+++ b/js/src/components/Image/LazyImage.vue
@@ -75,11 +75,9 @@ onUnmounted(() => {
 });
 
 watchEffect(() => {
-  console.debug("src changed");
   // Image is visible (means: has entered the viewport),
   // so start loading by setting the src attribute
   if (image.value) {
-    console.debug("image is ok, setting it");
     image.value.src = src.value;
 
     image.value.onload = () => {
diff --git a/js/src/components/Logo.vue b/js/src/components/MobilizonLogo.vue
similarity index 95%
rename from js/src/components/Logo.vue
rename to js/src/components/MobilizonLogo.vue
index 8cd358f96..fc4c3253d 100644
--- a/js/src/components/Logo.vue
+++ b/js/src/components/MobilizonLogo.vue
@@ -1,5 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
+  <svg
+    class="bg-white dark:bg-gray-900 dark:fill-white"
+    :class="{ 'bg-gray-900': invert }"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 248.16 46.78"
+  >
     <title>Mobilizon Logo</title>
     <g data-name="header">
       <path
@@ -35,12 +40,3 @@ withDefaults(
   { invert: false }
 );
 </script>
-<style lang="scss" scoped>
-svg {
-  fill: $background-color;
-
-  &.invert {
-    fill: $secondary;
-  }
-}
-</style>
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index a5491344d..d20120c2d 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -4,7 +4,7 @@
       class="container mx-auto flex flex-wrap justify-between items-center mx-auto"
     >
       <router-link :to="{ name: RouteName.HOME }" class="flex items-center">
-        <logo class="w-40" />
+        <MobilizonLogo class="w-40" />
       </router-link>
       <div class="flex items-center md:order-2" v-if="currentActor?.id">
         <o-dropdown>
@@ -300,20 +300,21 @@
 </template>
 
 <script lang="ts" setup>
-import Logo from "@/components/Logo.vue";
+import MobilizonLogo from "@/components/MobilizonLogo.vue";
 import { ICurrentUserRole } from "@/types/enums";
 import { logout } from "../utils/auth";
-import { IDENTITIES } from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
+import { displayName } from "../types/actor";
 import RouteName from "../router/name";
-import { useQuery } from "@vue/apollo-composable";
-import { reactive, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 // import { useProgrammatic } from "@oruga-ui/oruga-next";
 import { useCurrentUserClient } from "@/composition/apollo/user";
-import { useCurrentActorClient } from "@/composition/apollo/actor";
+import {
+  useCurrentActorClient,
+  useCurrentUserIdentities,
+} from "@/composition/apollo/actor";
 // import { useRestrictions } from "@/composition/apollo/config";
 
 const { currentUser } = useCurrentUserClient();
@@ -325,7 +326,7 @@ const { currentActor } = useCurrentActorClient();
 const router = useRouter();
 // const route = useRoute();
 
-const identities = reactive<any[]>([]);
+const { identities } = useCurrentUserIdentities();
 
 // const mobileNavbarActive = ref(false);
 
@@ -336,44 +337,25 @@ const identities = reactive<any[]>([]);
 
 const { t } = useI18n({ useScope: "global" });
 
-// TODO: Refactor this
-const { onResult } = useQuery<{ identities: IPerson[] }>(
-  IDENTITIES,
-  {},
-  () => ({
-    enabled:
-      currentUser.value?.id !== undefined && currentUser.value?.id !== null,
-  })
-);
-
-onResult(async ({ data }) => {
-  identities.push([
-    ...data.identities.map((identity: IPerson) => new Person(identity)),
-  ]);
-
+watch(identities, () => {
   // If we don't have any identities, the user has validated their account,
   // is logging for the first time but didn't create an identity somehow
-  if (identities.length === 0) {
-    console.debug("We have no identities listed for current user", identities);
+  if (identities.value && identities.value.length === 0) {
+    console.debug(
+      "We have no identities listed for current user",
+      identities.value
+    );
     console.debug("Pushing route to REGISTER_PROFILE");
-    try {
-      await router.push({
-        name: RouteName.REGISTER_PROFILE,
-        params: {
-          email: currentUser.value?.email,
-          userAlreadyActivated: "true",
-        },
-      });
-    } catch (err) {
-      return undefined;
-    }
+    router.push({
+      name: RouteName.REGISTER_PROFILE,
+      params: {
+        email: currentUser.value?.email,
+        userAlreadyActivated: "true",
+      },
+    });
   }
 });
 
-watch(currentActor, async () => {
-  if (!currentUser.value?.isLoggedIn) return;
-});
-
 // watch(loggedUser, () => {
 //   if (loggedUser.value?.locale) {
 //     console.debug("Setting locale from navbar");
@@ -472,56 +454,3 @@ watch(currentActor, async () => {
 
 const showMobileMenu = ref(false);
 </script>
-<style lang="scss" scoped>
-@use "@/styles/_mixins" as *;
-nav {
-  .navbar-item {
-    a.button {
-      font-weight: bold;
-    }
-
-    svg {
-      height: 1.75rem;
-    }
-  }
-
-  .navbar-dropdown .navbar-item {
-    cursor: pointer;
-
-    span {
-      display: flex;
-    }
-
-    &.is-active {
-      background: $secondary;
-    }
-
-    span.icon.is-medium {
-      display: flex;
-    }
-
-    img {
-      max-height: 2.5em;
-    }
-  }
-
-  .navbar-item.has-dropdown a.navbar-link figure {
-    // @include margin-right(0.75rem);
-    display: flex;
-    align-items: center;
-  }
-
-  a.navbar-item:focus-within {
-    background-color: inherit;
-  }
-
-  .identity-wrapper {
-    display: flex;
-
-    .media-content span {
-      display: flex;
-      color: $violet-2;
-    }
-  }
-}
-</style>
diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index 90521821b..e582f4225 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -102,7 +102,6 @@ const isBeforeLastWeek = computed((): boolean => {
 
 .title-info-wrapper {
   .post-minimalist-title {
-    // color: #3c376e;
     font-size: 18px;
     line-height: 24px;
     font-weight: 700;
diff --git a/js/src/components/Resource/FolderItem.vue b/js/src/components/Resource/FolderItem.vue
index 916f915f0..82cc0af5a 100644
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -166,7 +166,6 @@ a {
       display: block;
       font-weight: 500;
       margin-bottom: 5px;
-      // color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
diff --git a/js/src/components/Resource/ResourceItem.vue b/js/src/components/Resource/ResourceItem.vue
index a2fc68030..856732910 100644
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -131,7 +131,6 @@ a {
       white-space: nowrap;
       display: inline-block;
       font-weight: 500;
-      // color: $primary;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;
diff --git a/js/src/components/Resource/ResourceSelector.vue b/js/src/components/Resource/ResourceSelector.vue
index 11251b95f..4691dd76f 100644
--- a/js/src/components/Resource/ResourceSelector.vue
+++ b/js/src/components/Resource/ResourceSelector.vue
@@ -171,7 +171,6 @@ const moveDisabled = computed((): boolean | undefined => {
   }
 
   &.is-primary .panel-heading {
-    background: $primary;
     color: #fff;
   }
 }
diff --git a/js/src/components/Settings/SettingMenuItem.vue b/js/src/components/Settings/SettingMenuItem.vue
index 731b02a14..6cb113e14 100644
--- a/js/src/components/Settings/SettingMenuItem.vue
+++ b/js/src/components/Settings/SettingMenuItem.vue
@@ -32,7 +32,6 @@ const isActive = computed((): boolean => {
 li.setting-menu-item {
   font-size: 1.05rem;
   background-color: #fff1de;
-  color: $background-color;
   margin: auto;
 
   span {
diff --git a/js/src/components/Settings/SettingMenuSection.vue b/js/src/components/Settings/SettingMenuSection.vue
index 395425fd1..091f45be5 100644
--- a/js/src/components/Settings/SettingMenuSection.vue
+++ b/js/src/components/Settings/SettingMenuSection.vue
@@ -1,6 +1,11 @@
 <template>
-  <li>
-    <router-link v-if="to" :to="to">{{ title }}</router-link>
+  <li class="bg-yellow-1 text-violet-2 text-xl">
+    <router-link
+      class="cursor-pointer my-2 mx-0 py-2 px-3 font-medium block no-underline"
+      v-if="to"
+      :to="to"
+      >{{ title }}</router-link
+    >
     <b v-else>{{ title }}</b>
     <ul>
       <slot></slot>
@@ -29,26 +34,3 @@ defineProps<{
 //   return false;
 // });
 </script>
-
-<style lang="scss" scoped>
-li {
-  font-size: 1.3rem;
-  background-color: $secondary;
-  color: $background-color;
-  margin: 2px auto;
-
-  &.active {
-    background-color: #fea72b;
-  }
-
-  a,
-  b {
-    cursor: pointer;
-    margin: 5px 0;
-    display: block;
-    padding: 5px 10px;
-    color: inherit;
-    font-weight: 500;
-  }
-}
-</style>
diff --git a/js/src/components/User/AuthProvider.vue b/js/src/components/User/AuthProvider.vue
index b216a124a..bd586e315 100644
--- a/js/src/components/User/AuthProvider.vue
+++ b/js/src/components/User/AuthProvider.vue
@@ -1,6 +1,7 @@
 <template>
   <o-button
     outlined
+    variant="primary"
     :icon-left="oauthProvider.id"
     v-if="isProviderSelected && !oauthProvider.label"
     :href="`/auth/${oauthProvider.id}`"
@@ -9,6 +10,7 @@
   >
   <o-button
     outlined
+    variant="primary"
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
     icon-left="lock"
diff --git a/js/src/components/Utils/VerticalDivider.vue b/js/src/components/Utils/VerticalDivider.vue
index dbd8e7f1c..c73b9f729 100644
--- a/js/src/components/Utils/VerticalDivider.vue
+++ b/js/src/components/Utils/VerticalDivider.vue
@@ -12,8 +12,3 @@ const dataContent = computed((): string => {
   return props.content.toLocaleUpperCase();
 });
 </script>
-<style lang="scss" scoped>
-.is-divider-vertical[data-content]::after {
-  background-color: $body-background-color;
-}
-</style>
diff --git a/js/src/components/core/Dialog.vue b/js/src/components/core/Dialog.vue
index d8e71d352..3fbc828de 100644
--- a/js/src/components/core/Dialog.vue
+++ b/js/src/components/core/Dialog.vue
@@ -8,7 +8,7 @@
       <div class="" v-if="hasIcon && (icon || iconByType)">
         <o-icon
           :icon="icon ? icon : iconByType"
-          :type="type"
+          :variant="variant"
           :both="!icon"
           custom-size="48"
         />
@@ -37,11 +37,11 @@
       </div>
     </section>
 
-    <footer v-if="canCancel" class="flex gap-2">
-      <o-button ref="cancelButton" @click="cancel('button')">{{
+    <footer v-if="canCancel" class="flex gap-2 my-2">
+      <o-button ref="cancelButton" outlined @click="cancel('button')">{{
         cancelText ?? t("Cancel")
       }}</o-button>
-      <o-button :type="type" ref="confirmButton" @click="confirm">{{
+      <o-button :variant="variant" ref="confirmButton" @click="confirm">{{
         confirmText ?? t("Confirm")
       }}</o-button>
     </footer>
@@ -58,7 +58,7 @@ const props = withDefaults(
     message: string | string[];
     icon?: string;
     hasIcon?: boolean;
-    type?: string;
+    variant?: string;
     size?: string;
     canCancel?: boolean;
     confirmText?: string;
@@ -71,7 +71,12 @@ const props = withDefaults(
     hasInput?: boolean;
     inputAttrs?: Record<string, any>;
   }>(),
-  { type: "primary", canCancel: true, hasInput: false, inputAttrs: () => ({}) }
+  {
+    variant: "primary",
+    canCancel: true,
+    hasInput: false,
+    inputAttrs: () => ({}),
+  }
 );
 
 const emit = defineEmits(["confirm", "cancel", "close"]);
@@ -91,7 +96,7 @@ const dialogClass = computed(() => {
  * Icon name (MDI) based on the type.
  */
 const iconByType = computed(() => {
-  switch (props.type) {
+  switch (props.variant) {
     case "info":
       return "information";
     case "success":
diff --git a/js/src/components/core/MaterialIcon.vue b/js/src/components/core/MaterialIcon.vue
index e2fe1862a..20cf3208d 100644
--- a/js/src/components/core/MaterialIcon.vue
+++ b/js/src/components/core/MaterialIcon.vue
@@ -219,6 +219,14 @@ const icons: Record<string, () => Promise<any>> = {
     import(`../../../node_modules/vue-material-design-icons/Email.vue`),
   ChatAlert: () =>
     import(`../../../node_modules/vue-material-design-icons/ChatAlert.vue`),
+  InboxArrowDown: () =>
+    import(
+      `../../../node_modules/vue-material-design-icons/InboxArrowDown.vue`
+    ),
+  LanDisconnect: () =>
+    import(`../../../node_modules/vue-material-design-icons/LanDisconnect.vue`),
+  CloudQuestion: () =>
+    import(`../../../node_modules/vue-material-design-icons/CloudQuestion.vue`),
 };
 
 const props = withDefaults(
@@ -236,15 +244,6 @@ const componentInstance = computed(() =>
   defineAsyncComponent(icons[name.value])
 );
 
-/*
- defineAsyncComponent(
-  async () =>
-    await import(
-      `../../../node_modules/vue-material-design-icons/${name.value}.vue`
-    )
-);
-*/
-
 const realSize = computed(() => Number.parseInt(props.size ?? "18"));
 
 function toPascalCase(text: string) {
diff --git a/js/src/composition/apollo/actor.ts b/js/src/composition/apollo/actor.ts
index 1d06171f8..3cd381186 100644
--- a/js/src/composition/apollo/actor.ts
+++ b/js/src/composition/apollo/actor.ts
@@ -29,7 +29,10 @@ export function useCurrentUserIdentities() {
     IDENTITIES,
     {},
     () => ({
-      enabled: currentUser.value?.isLoggedIn === true,
+      enabled:
+        currentUser.value?.id !== undefined &&
+        currentUser.value?.id !== null &&
+        currentUser.value?.isLoggedIn === true,
     })
   );
 
diff --git a/js/src/composition/apollo/group.ts b/js/src/composition/apollo/group.ts
index a766a0ec9..90417c530 100644
--- a/js/src/composition/apollo/group.ts
+++ b/js/src/composition/apollo/group.ts
@@ -11,7 +11,7 @@ import { MemberRole } from "@/types/enums";
 import { IMediaUploadWrapper } from "@/types/media.model";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import { computed } from "vue";
+import { computed, Ref, unref } from "vue";
 import { useCurrentActorClient } from "./actor";
 
 type useGroupOptions = {
@@ -28,7 +28,7 @@ type useGroupOptions = {
 };
 
 export function useGroup(
-  name: string | undefined,
+  name: string | undefined | Ref<string | undefined>,
   options: useGroupOptions = {}
 ) {
   console.debug("using group with", name);
@@ -52,11 +52,11 @@ export function useGroup(
     }
   >(
     FETCH_GROUP,
-    {
-      name: "hello",
+    () => ({
+      name: unref(name),
       ...options,
-    },
-    { enabled: name !== undefined }
+    }),
+    () => ({ enabled: unref(name) !== undefined })
   );
   const group = computed(() => result.value?.group);
   return { group, error, loading, onError, refetch };
@@ -84,7 +84,7 @@ export function useCreateGroup(variables: {
       if (!membershipData) return;
       if (!currentActor.value) return;
       const { person } = membershipData;
-      person.memberships.elements.push({
+      person.memberships?.elements.push({
         parent: data?.createGroup,
         role: MemberRole.ADMINISTRATOR,
         actor: currentActor.value,
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 773724ab1..859f1d013 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -1354,5 +1354,10 @@
   "Open user menu": "Open user menu",
   "Open main menu": "Open main menu",
   "{'@'}{username} ({role})": "{'@'}{username} ({role})",
-  "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.": "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."
+  "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.": "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.",
+  "Confirm": "Confirm",
+  "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, …"
 }
\ No newline at end of file
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 42e875b2c..f022d27ac 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -1338,11 +1338,12 @@
   "View all categories": "Voir toutes les catégories",
   "{instanceName} ({domain})": "{instanceName} ({domain})",
   "This instance, {instanceName}, hosts your profile, so remember its name.": "Cette instance, {instanceName}, héberge votre profil, donc souvenez-vous de son nom.",
-  "Keyword, event title, group name, etc.": "Keyword, event title, group name, etc.",
+  "Keyword, event title, group name, etc.": "Mot clé, titre d'un événement, nom d'un groupe, etc.",
   "Go!": "Go!",
   "Explore!": "Explorer !",
   "Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
   "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."
+  "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"
 }
diff --git a/js/src/plugins/dialog.ts b/js/src/plugins/dialog.ts
index e0c59e064..b67433380 100644
--- a/js/src/plugins/dialog.ts
+++ b/js/src/plugins/dialog.ts
@@ -13,25 +13,23 @@ export class Dialog {
     message,
     confirmText,
     cancelText,
-    type,
+    variant,
     hasIcon,
     size,
     onConfirm,
     onCancel,
     inputAttrs,
-    variant,
   }: {
     title?: string;
     message: string;
     confirmText?: string;
     cancelText?: string;
-    type?: string;
+    variant?: string;
     hasIcon?: boolean;
     size?: string;
     onConfirm?: (prompt: string) => void;
     onCancel?: (source: string) => void;
     inputAttrs: Record<string, any>;
-    variant?: string;
   }) {
     this.app.config.globalProperties.$oruga.modal.open({
       component: DialogComponent,
@@ -40,13 +38,12 @@ export class Dialog {
         message,
         confirmText,
         cancelText,
-        type,
+        variant,
         hasIcon,
         size,
         onConfirm,
         onCancel,
         inputAttrs,
-        variant,
       },
     });
   }
@@ -56,7 +53,7 @@ export class Dialog {
     message,
     confirmText,
     cancelText,
-    type,
+    variant,
     hasIcon,
     size,
     onConfirm,
@@ -66,7 +63,7 @@ export class Dialog {
     message: string;
     confirmText?: string;
     cancelText?: string;
-    type: string;
+    variant: string;
     hasIcon?: boolean;
     size?: string;
     onConfirm: () => any;
@@ -80,7 +77,7 @@ export class Dialog {
         message,
         confirmText,
         cancelText,
-        type,
+        variant,
         hasIcon,
         size,
         onConfirm,
diff --git a/js/src/router/settings.ts b/js/src/router/settings.ts
index 83ea0ea7a..fcf5fed44 100644
--- a/js/src/router/settings.ts
+++ b/js/src/router/settings.ts
@@ -93,7 +93,8 @@ export const settingsRoutes: RouteRecordRaw[] = [
       {
         path: "admin/dashboard",
         name: SettingsRouteName.ADMIN_DASHBOARD,
-        component: (): Promise<any> => import("@/views/Admin/Dashboard.vue"),
+        component: (): Promise<any> =>
+          import("@/views/Admin/DashboardView.vue"),
         meta: {
           requiredAuth: true,
           announcer: {
diff --git a/js/src/styles/vue-skip-to.scss b/js/src/styles/vue-skip-to.scss
index fdb62d8f2..222be9eda 100644
--- a/js/src/styles/vue-skip-to.scss
+++ b/js/src/styles/vue-skip-to.scss
@@ -28,8 +28,6 @@
     clip: auto;
     height: auto;
     width: auto;
-    background-color: $white;
-    border: 2px solid $violet-3;
   }
 
   &,
@@ -41,12 +39,10 @@
   &__link {
     display: block;
     padding: 8px 16px;
-    color: $violet-3;
     font-size: 18px;
   }
 
   &__nav > span {
-    border-bottom: 2px solid $violet-3;
     font-weight: bold;
   }
 
@@ -57,7 +53,6 @@
 
   &__link:focus {
     outline: none;
-    background-color: $violet-3;
     color: #f2f2f2;
   }
 }
diff --git a/js/src/variables.scss b/js/src/variables.scss
deleted file mode 100644
index d7d7194a3..000000000
--- a/js/src/variables.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-// @import "../node_modules/bulma/sass/utilities/functions.sass";
-// @import "../node_modules/bulma/sass/utilities/initial-variables.sass";
-// @import "../node_modules/bulma/sass/utilities/derived-variables.sass";
-
-$white: #fff;
-
-$bleuvert: #1e7d97;
-$jaune: #ffd599;
-$violet: #424056;
-
-/**
- * Text body, paragraphs
- */
-$violet-1: #3a384c;
-$violet-2: #474467;
-
-/**
- * Titles, dark borders, buttons
- */
-$violet-3: #3c376e;
-
-/**
- * Borders
- */
-$borders: #d7d6de;
-$backgrounds: #ecebf2;
-
-/**
- * Text
- */
-$purple-1: #757199;
-
-/**
- * Background
- */
-$purple-2: #cdcaea;
-$purple-3: #e6e4f4;
-
-$orange-2: #ed8d07;
-$orange-3: #d35204;
-
-$yellow-1: #ffd599;
-$yellow-2: #fff1de;
-$yellow-3: #fbd5cb;
-$yellow-4: #f7ba30;
-
-$primary: $bleuvert;
-$primary-invert: findColorInvert($primary);
-$secondary: $jaune;
-$secondary-invert: findColorInvert($secondary);
-
-$background-color: $violet-2;
-
-$success: #0d8758;
-$success-invert: findColorInvert($success);
-$info: #36bcd4;
-$info-invert: findColorInvert($info);
-$danger: #cd2026;
-$danger-invert: findColorInvert($danger);
-$link: $primary;
-$link-invert: $primary-invert;
-$text: $violet-1;
-$grey: #757575;
-
-// $colors: map-merge(
-//   $colors,
-//   (
-//     "primary": (
-//       $primary,
-//       $primary-invert,
-//     ),
-//     "secondary": (
-//       $secondary,
-//       $secondary-invert,
-//     ),
-//     "success": (
-//       $success,
-//       $success-invert,
-//     ),
-//     "info": (
-//       $info,
-//       $info-invert,
-//     ),
-//     "danger": (
-//       $danger,
-//       $danger-invert,
-//     ),
-//     "link": (
-//       $link,
-//       $link-invert,
-//     ),
-//     "grey": (
-//       $grey,
-//       findColorInvert($grey),
-//     ),
-//   )
-// );
-
-// Navbar
-$navbar-background-color: $secondary;
-$navbar-item-color: $background-color;
-$navbar-height: 4rem;
-
-// Footer
-$footer-padding: 3rem 1.5rem 1rem;
-$footer-background-color: $background-color;
-
-$body-background-color: #efeef4;
-$fullhd-enabled: false;
-$hero-body-padding-medium: 6rem 1.5rem;
-
-// main > .container {
-//   background: $body-background-color;
-//   min-height: 70vh;
-// }
-
-$title-color: #3c376e;
-$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
-$title-weight: 700;
-$title-size: 40px;
-$title-sub-size: 45px;
-$title-sup-size: 30px;
-
-$subtitle-color: #3a384c;
-$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
-$subtitle-weight: 400;
-$subtitle-size: 32px;
-$subtitle-sub-size: 30px;
-$subtitle-sup-size: 15px;
-
-.subtitle {
-  background: $secondary;
-  display: inline;
-  padding: 3px 8px;
-  margin: 15px auto 30px;
-}
-
-//$input-border-color: #dbdbdb;
-$breadcrumb-item-color: $primary;
-$checkbox-background-color: #fff;
-$title-color: $violet-3;
-
-:root {
-  --color-primary: 30 125 151;
-  --color-secondary: 255 213 153;
-  --color-violet-title: 66 64 86;
-  --color-tag: 230 228 244;
-  --color-mbz-yellow-2: 255 241 222;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-primary: 30 125 151;
-    --color-secondary: 255 213 153;
-    --color-violet-title: 66 64 86;
-    --color-tag: 230 228 244;
-    --color-mbz-yellow-2: 255 241 222;
-  }
-}
-
-// Oruga
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --oruga-field-label-color: white;
-
-    // tables
-    --oruga-table-background-color: #111827;
-    --oruga-table-th-color: white;
-
-    // modals
-    --oruga-modal-content-background-color: #111827;
-
-    // dropdowns
-    --oruga-dropdown-item-color: white;
-    --oruga-dropdown-menu-background: #111827;
-    --oruga-dropdown-item-hover-color: #white;
-    --oruga-dropdown-item-hover-background-color: #111827;
-  }
-}
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index 9b1f9f1b4..9ac849331 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -1,3 +1,4 @@
+import { useI18n } from "vue-i18n";
 <template>
   <div>
     <div
@@ -22,7 +23,7 @@
           <p class="">{{ currentIdentity.name }}</p>
           <p class="">
             {{ `@${currentIdentity.preferredUsername}` }}
-            <span v-if="masked">{{ $t("(Masked)") }}</span>
+            <span v-if="masked">{{ t("(Masked)") }}</span>
           </p>
         </div>
         <div class="" v-else>
@@ -33,7 +34,7 @@
           v-if="identities && identities.length > 1"
           @click="activateModal"
         >
-          {{ $t("Change") }}
+          {{ t("Change") }}
         </o-button>
       </div>
     </div>
@@ -55,7 +56,7 @@
     </span>
     <o-modal
       v-model:active="isComponentModalActive"
-      :close-button-aria-label="$t('Close')"
+      :close-button-aria-label="t('Close')"
     >
       <identity-picker v-if="currentIdentity" v-model="currentIdentity" />
     </o-modal>
@@ -67,6 +68,7 @@ import { computed, ref } from "vue";
 import { IPerson } from "../../types/actor";
 import IdentityPicker from "./IdentityPicker.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
+import { useI18n } from "vue-i18n";
 
 const { identities } = useCurrentUserIdentities();
 
@@ -84,6 +86,8 @@ const props = withDefaults(
 
 const emit = defineEmits(["update:modelValue"]);
 
+const { t } = useI18n({ useScope: "global" });
+
 const isComponentModalActive = ref(false);
 
 const currentIdentity = computed({
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index 943fef8e0..8b52b6cab 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -230,8 +230,4 @@ p.description {
   margin-bottom: 15px;
   margin-top: -10px;
 }
-
-section.section {
-  background: $white;
-}
 </style>
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index 6d5ec7c1e..a2e20106f 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -208,14 +208,13 @@ import {
   PERSON_FRAGMENT,
   PERSON_FRAGMENT_FEED_TOKENS,
   UPDATE_PERSON,
-} from "../../../graphql/actor";
-import { IPerson, displayName } from "../../../types/actor";
-import PictureUpload from "../../../components/PictureUpload.vue";
-import { MOBILIZON_INSTANCE_HOST } from "../../../api/_entrypoint";
-import RouteName from "../../../router/name";
-import { buildFileVariable } from "../../../utils/image";
-import { changeIdentity } from "../../../utils/identity";
-// import identityEditionMixin from "../../../mixins/identityEdition";
+} from "@/graphql/actor";
+import { IPerson, displayName } from "@/types/actor";
+import PictureUpload from "@/components/PictureUpload.vue";
+import { MOBILIZON_INSTANCE_HOST } from "@/api/_entrypoint";
+import RouteName from "@/router/name";
+import { buildFileVariable } from "@/utils/image";
+import { changeIdentity } from "@/utils/identity";
 import {
   CREATE_FEED_TOKEN_ACTOR,
   DELETE_FEED_TOKEN,
diff --git a/js/src/views/Admin/Dashboard.vue b/js/src/views/Admin/Dashboard.vue
deleted file mode 100644
index 23d17028b..000000000
--- a/js/src/views/Admin/Dashboard.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div>
-    <breadcrumbs-nav
-      :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
-        { text: $t('Dashboard') },
-      ]"
-    />
-    <section>
-      <h1>{{ $t("Administration") }}</h1>
-      <div class="tile is-ancestor" v-if="dashboard">
-        <div class="tile is-vertical">
-          <div class="tile">
-            <div class="tile is-parent is-vertical is-6">
-              <article class="tile is-child box">
-                <p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
-                <i18n-t
-                  keypath="Published events with {comments} comments and {participations} confirmed participations"
-                  tag="p"
-                >
-                  <template #comments>
-                    <b>{{ dashboard.numberOfComments }}</b>
-                  </template>
-                  <template #participations>
-                    <b>{{
-                      dashboard.numberOfConfirmedParticipationsToLocalEvents
-                    }}</b>
-                  </template>
-                </i18n-t>
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.ADMIN_GROUPS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfGroups }}</p>
-                  <p>{{ $t("Groups") }}</p>
-                </router-link>
-              </article>
-            </div>
-            <div class="tile is-parent is-vertical">
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.USERS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
-                  <p>{{ $t("Users") }}</p>
-                </router-link>
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfFollowers }}
-                  </p>
-                  <p>{{ $t("Instances following you") }}</p>
-                </router-link>
-              </article>
-            </div>
-            <div class="tile is-parent is-vertical">
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.REPORTS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfReports }}
-                  </p>
-                  <p>{{ $t("Opened reports") }}</p>
-                </router-link>
-              </article>
-              <article class="tile is-child box">
-                <router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">
-                  <p class="dashboard-number">
-                    {{ dashboard.numberOfFollowings }}
-                  </p>
-                  <p>{{ $t("Instances you follow") }}</p>
-                </router-link>
-              </article>
-            </div>
-          </div>
-          <div class="tile">
-            <div
-              class="tile is-parent is-vertical is-6"
-              v-if="dashboard.lastPublicEventPublished"
-            >
-              <article class="tile is-child box">
-                <router-link
-                  :to="{
-                    name: RouteName.EVENT,
-                    params: { uuid: dashboard.lastPublicEventPublished.uuid },
-                  }"
-                >
-                  <p>{{ $t("Last published event") }}</p>
-                  <p class="subtitle">
-                    {{ dashboard.lastPublicEventPublished.title }}
-                  </p>
-                  <figure
-                    class="image is-4by3"
-                    v-if="dashboard.lastPublicEventPublished.picture"
-                  >
-                    <img
-                      :src="dashboard.lastPublicEventPublished.picture.url"
-                    />
-                  </figure>
-                </router-link>
-              </article>
-            </div>
-            <div
-              class="tile is-parent is-vertical"
-              v-if="dashboard.lastGroupCreated"
-            >
-              <article class="tile is-child box">
-                <router-link
-                  :to="{
-                    name: RouteName.GROUP,
-                    params: {
-                      preferredUsername: usernameWithDomain(
-                        dashboard.lastGroupCreated
-                      ),
-                    },
-                  }"
-                >
-                  <p>{{ $t("Last group created") }}</p>
-                  <p class="subtitle">
-                    {{
-                      dashboard.lastGroupCreated.name ||
-                      dashboard.lastGroupCreated.preferredUsername
-                    }}
-                  </p>
-                  <figure
-                    class="image is-4by3"
-                    v-if="dashboard.lastGroupCreated.avatar"
-                  >
-                    <img :src="dashboard.lastGroupCreated.avatar.url" />
-                  </figure>
-                </router-link>
-              </article>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script lang="ts" setup>
-import { DASHBOARD } from "@/graphql/admin";
-import { IDashboard } from "@/types/admin.model";
-import { usernameWithDomain } from "@/types/actor";
-import RouteName from "@/router/name";
-import { useQuery } from "@vue/apollo-composable";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { useHead } from "@vueuse/head";
-
-const { result: dashboardResult } = useQuery<{ dashboard: IDashboard }>(
-  DASHBOARD
-);
-
-const dashboard = computed(() => dashboardResult.value?.dashboard);
-
-const { t } = useI18n({ useScope: "global" });
-
-useHead({
-  title: computed(() => t("Administration")),
-});
-</script>
-
-<style lang="scss" scoped>
-.dashboard-number {
-  font-size: 40px;
-  font-weight: 700;
-  line-height: 1.125;
-}
-
-.tile a,
-article.tile a {
-  text-decoration: none;
-}
-
-.image.is-4by3 img {
-  object-fit: cover;
-}
-</style>
diff --git a/js/src/views/Admin/DashboardView.vue b/js/src/views/Admin/DashboardView.vue
new file mode 100644
index 000000000..932d6c36d
--- /dev/null
+++ b/js/src/views/Admin/DashboardView.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <breadcrumbs-nav
+      :links="[
+        { name: RouteName.ADMIN, text: t('Admin') },
+        { text: t('Dashboard') },
+      ]"
+    />
+    <section>
+      <h1>{{ t("Administration") }}</h1>
+      <div
+        class="grid grid-cols-1 lg:grid-rows-2 lg:grid-flow-col gap-x-4 items-stretch"
+      >
+        <NumberDashboardTile :number="dashboard?.numberOfEvents">
+          <template #subtitle>
+            <i18n-t
+              keypath="Published events with {comments} comments and {participations} confirmed participations"
+              tag="p"
+            >
+              <template #comments>
+                <b>{{ dashboard?.numberOfComments }}</b>
+              </template>
+              <template #participations>
+                <b>{{
+                  dashboard?.numberOfConfirmedParticipationsToLocalEvents
+                }}</b>
+              </template>
+            </i18n-t>
+          </template>
+        </NumberDashboardTile>
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfGroups"
+          :subtitle="t('Groups', dashboard?.numberOfGroups ?? 0)"
+          :to="{ name: RouteName.ADMIN_GROUPS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfUsers"
+          :subtitle="t('Users', dashboard?.numberOfUsers ?? 0)"
+          :to="{ name: RouteName.ADMIN_GROUPS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfReports"
+          :subtitle="t('Opened reports', dashboard?.numberOfReports ?? 0)"
+          :to="{ name: RouteName.REPORTS }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfFollowers"
+          :subtitle="
+            t('Instances following you', dashboard?.numberOfFollowers ?? 0)
+          "
+          :to="{
+            name: RouteName.INSTANCES,
+            query: { followStatus: InstanceFilterFollowStatus.FOLLOWING },
+          }"
+        />
+        <LinkedNumberDashboardTile
+          :number="dashboard?.numberOfFollowings"
+          :subtitle="
+            t('Instances you follow', dashboard?.numberOfFollowings ?? 0)
+          "
+          :to="{
+            name: RouteName.INSTANCES,
+            query: { followStatus: InstanceFilterFollowStatus.FOLLOWED },
+          }"
+        />
+      </div>
+      <div class="tile">
+        <div
+          class="tile is-parent is-vertical is-6"
+          v-if="dashboard?.lastPublicEventPublished"
+        >
+          <article class="tile is-child box">
+            <router-link
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: dashboard?.lastPublicEventPublished.uuid },
+              }"
+            >
+              <p>{{ t("Last published event") }}</p>
+              <p>
+                {{ dashboard?.lastPublicEventPublished.title }}
+              </p>
+              <figure
+                class="image is-4by3"
+                v-if="dashboard?.lastPublicEventPublished.picture"
+              >
+                <img :src="dashboard?.lastPublicEventPublished.picture.url" />
+              </figure>
+            </router-link>
+          </article>
+        </div>
+        <div
+          class="tile is-parent is-vertical"
+          v-if="dashboard?.lastGroupCreated"
+        >
+          <article class="tile is-child box">
+            <router-link
+              :to="{
+                name: RouteName.GROUP,
+                params: {
+                  preferredUsername: usernameWithDomain(
+                    dashboard?.lastGroupCreated
+                  ),
+                },
+              }"
+            >
+              <p>{{ t("Last group created") }}</p>
+              <p>
+                {{
+                  dashboard?.lastGroupCreated.name ||
+                  dashboard?.lastGroupCreated.preferredUsername
+                }}
+              </p>
+              <figure
+                class="image is-4by3"
+                v-if="dashboard?.lastGroupCreated.avatar"
+              >
+                <img :src="dashboard?.lastGroupCreated.avatar.url" />
+              </figure>
+            </router-link>
+          </article>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script lang="ts" setup>
+import { DASHBOARD } from "@/graphql/admin";
+import { IDashboard } from "@/types/admin.model";
+import { usernameWithDomain } from "@/types/actor";
+import RouteName from "@/router/name";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useHead } from "@vueuse/head";
+import NumberDashboardTile from "@/components/Dashboard/NumberDashboardTile.vue";
+import LinkedNumberDashboardTile from "@/components/Dashboard/LinkedNumberDashboardTile.vue";
+import { InstanceFilterFollowStatus } from "@/types/enums";
+
+const { result: dashboardResult } = useQuery<{ dashboard: IDashboard }>(
+  DASHBOARD
+);
+
+const dashboard = computed(() => dashboardResult.value?.dashboard);
+
+const { t } = useI18n({ useScope: "global" });
+
+useHead({
+  title: computed(() => t("Administration")),
+});
+</script>
diff --git a/js/src/views/Admin/Instances.vue b/js/src/views/Admin/Instances.vue
index c1cd2404f..4a09ef21b 100644
--- a/js/src/views/Admin/Instances.vue
+++ b/js/src/views/Admin/Instances.vue
@@ -78,12 +78,8 @@
               src="../../assets/logo.svg"
               alt=""
             />
-            <o-icon
-              class="is-large"
-              v-else
-              custom-size="mdi-36px"
-              icon="cloud-question"
-            />
+            <CloudQuestion v-else :size="36" />
+
             <div class="">
               <h4 class="text-lg truncate">{{ instance.domain }}</h4>
               <span
@@ -183,6 +179,7 @@ import { useMutation, useQuery } from "@vue/apollo-composable";
 import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useHead } from "@vueuse/head";
+import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue";
 
 const INSTANCES_PAGE_LIMIT = 10;
 
diff --git a/js/src/views/Admin/Settings.vue b/js/src/views/Admin/Settings.vue
index 0ddb86d43..69aec4988 100644
--- a/js/src/views/Admin/Settings.vue
+++ b/js/src/views/Admin/Settings.vue
@@ -2,23 +2,23 @@
   <div>
     <breadcrumbs-nav
       :links="[
-        { name: RouteName.ADMIN, text: $t('Admin') },
-        { text: $t('Instance settings') },
+        { name: RouteName.ADMIN, text: t('Admin') },
+        { text: t('Instance settings') },
       ]"
     />
 
     <section v-if="settingsToWrite">
       <form @submit.prevent="updateSettings">
-        <o-field :label="$t('Instance Name')" label-for="instance-name">
+        <o-field :label="t('Instance Name')" label-for="instance-name">
           <o-input v-model="settingsToWrite.instanceName" id="instance-name" />
         </o-field>
-        <div class="field">
-          <label class="label has-help" for="instance-description">{{
-            $t("Instance Short Description")
+        <div class="field flex flex-col">
+          <label class="" for="instance-description">{{
+            t("Instance Short Description")
           }}</label>
           <small>
             {{
-              $t(
+              t(
                 "Displayed on homepage and meta tags. Describe what Mobilizon is and what makes this instance special in a single paragraph."
               )
             }}
@@ -30,73 +30,71 @@
             id="instance-description"
           />
         </div>
-        <div class="field">
-          <label class="label has-help" for="instance-slogan">{{
-            $t("Instance Slogan")
+        <div class="field flex flex-col">
+          <label class="" for="instance-slogan">{{
+            t("Instance Slogan")
           }}</label>
           <small>
             {{
-              $t(
+              t(
                 'A short tagline for your instance homepage. Defaults to "Gather ⋅ Organize ⋅ Mobilize"'
               )
             }}
           </small>
           <o-input
             v-model="settingsToWrite.instanceSlogan"
-            :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
+            :placeholder="t('Gather ⋅ Organize ⋅ Mobilize')"
             id="instance-slogan"
           />
         </div>
-        <div class="field">
-          <label class="label has-help" for="instance-contact">{{
-            $t("Contact")
-          }}</label>
+        <div class="field flex flex-col">
+          <label class="" for="instance-contact">{{ t("Contact") }}</label>
           <small>
-            {{ $t("Can be an email or a link, or just plain text.") }}
+            {{ t("Can be an email or a link, or just plain text.") }}
           </small>
           <o-input v-model="settingsToWrite.contact" id="instance-contact" />
         </div>
-        <o-field :label="$t('Allow registrations')">
+        <o-field :label="t('Allow registrations')">
           <o-switch v-model="settingsToWrite.registrationsOpen">
             <p
               class="prose dark:prose-invert"
               v-if="settingsToWrite.registrationsOpen"
             >
-              {{ $t("Registration is allowed, anyone can register.") }}
+              {{ t("Registration is allowed, anyone can register.") }}
             </p>
             <p class="prose dark:prose-invert" v-else>
-              {{ $t("Registration is closed.") }}
+              {{ t("Registration is closed.") }}
             </p>
           </o-switch>
         </o-field>
-        <div class="field">
-          <label class="label has-help" for="instance-languages">{{
-            $t("Instance languages")
+        <div class="field flex flex-col">
+          <label class="" for="instance-languages">{{
+            t("Instance languages")
           }}</label>
           <small>
-            {{ $t("Main languages you/your moderators speak") }}
+            {{ t("Main languages you/your moderators speak") }}
           </small>
-          <o-taginput
+          <o-inputitems
             v-model="instanceLanguages"
             :data="filteredLanguages"
             autocomplete
             :open-on-focus="true"
             field="name"
             icon="label"
-            :placeholder="$t('Select languages')"
+            :placeholder="t('Select languages')"
             @typing="getFilteredLanguages"
             id="instance-languages"
           >
-            <template #empty>{{ $t("No languages found") }}</template>
-          </o-taginput>
+            <template #empty>{{ t("No languages found") }}</template>
+          </o-inputitems>
         </div>
-        <div class="field">
-          <label class="label has-help" for="instance-long-description">{{
-            $t("Instance Long Description")
+        <div class="field flex flex-col">
+          <label class="" for="instance-long-description">{{
+            t("Instance Long Description")
           }}</label>
           <small>
             {{
-              $t(
+              t(
                 "A place to explain who you are and the things that set your instance apart. You can use HTML tags."
               )
             }}
@@ -108,13 +106,11 @@
             id="instance-long-description"
           />
         </div>
-        <div class="field">
-          <label class="label has-help" for="instance-rules">{{
-            $t("Instance Rules")
-          }}</label>
+        <div class="field flex flex-col">
+          <label class="" for="instance-rules">{{ t("Instance Rules") }}</label>
           <small>
             {{
-              $t(
+              t(
                 "A place for your code of conduct, rules or guidelines. You can use HTML tags."
               )
             }}
@@ -125,19 +121,19 @@
             id="instance-rules"
           />
         </div>
-        <o-field :label="$t('Instance Terms Source')">
-          <div class="columns">
-            <div class="column is-one-third-desktop">
+        <o-field :label="t('Instance Terms Source')">
+          <div class="">
+            <div class="">
               <fieldset>
                 <legend>
-                  {{ $t("Choose the source of the instance's Terms") }}
+                  {{ t("Choose the source of the instance's Terms") }}
                 </legend>
                 <o-field>
                   <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.DEFAULT"
-                    >{{ $t("Default Mobilizon terms") }}</o-radio
+                    >{{ t("Default Mobilizon terms") }}</o-radio
                   >
                 </o-field>
                 <o-field>
@@ -145,7 +141,7 @@
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.URL"
-                    >{{ $t("Custom URL") }}</o-radio
+                    >{{ t("Custom URL") }}</o-radio
                   >
                 </o-field>
                 <o-field>
@@ -153,20 +149,20 @@
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.CUSTOM"
-                    >{{ $t("Custom text") }}</o-radio
+                    >{{ t("Custom text") }}</o-radio
                   >
                 </o-field>
               </fieldset>
             </div>
-            <div class="column">
-              <div
-                class="notification"
+            <div class="">
+              <o-notification
+                class="bg-slate-700"
                 v-if="
                   settingsToWrite.instanceTermsType ===
                   InstanceTermsType.DEFAULT
                 "
               >
-                <b>{{ $t("Default") }}</b>
+                <b>{{ t("Default") }}</b>
                 <i18n-t
                   tag="p"
                   class="prose dark:prose-invert"
@@ -177,25 +173,25 @@
                       href="https://demo.mobilizon.org/terms"
                       target="_blank"
                       rel="noopener"
-                      >{{ $t("default Mobilizon terms") }}</a
+                      >{{ t("default Mobilizon terms") }}</a
                     >
                   </template>
                 </i18n-t>
                 <b>{{
-                  $t(
+                  t(
                     "NOTE! The default terms have not been checked over by a lawyer and thus are unlikely to provide full legal protection for all situations for an instance admin using them. They are also not specific to all countries and jurisdictions. If you are unsure, please check with a lawyer."
                   )
                 }}</b>
-              </div>
+              </o-notification>
               <div
                 class="notification"
                 v-if="
                   settingsToWrite.instanceTermsType === InstanceTermsType.URL
                 "
               >
-                <b>{{ $t("URL") }}</b>
+                <b>{{ t("URL") }}</b>
                 <p class="prose dark:prose-invert">
-                  {{ $t("Set an URL to a page with your own terms.") }}
+                  {{ t("Set an URL to a page with your own terms.") }}
                 </p>
               </div>
               <div
@@ -204,7 +200,7 @@
                   settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM
                 "
               >
-                <b>{{ $t("Custom") }}</b>
+                <b>{{ t("Custom") }}</b>
                 <i18n-t
                   tag="p"
                   class="prose dark:prose-invert"
@@ -216,7 +212,7 @@
                       target="_blank"
                       rel="noopener"
                     >
-                      {{ $t("default Mobilizon terms") }}</a
+                      {{ t("default Mobilizon terms") }}</a
                     >
                   </template>
                 </i18n-t>
@@ -225,7 +221,7 @@
           </div>
         </o-field>
         <o-field
-          :label="$t('Instance Terms URL')"
+          :label="t('Instance Terms URL')"
           label-for="instanceTermsUrl"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
         >
@@ -236,7 +232,7 @@
           />
         </o-field>
         <o-field
-          :label="$t('Instance Terms')"
+          :label="t('Instance Terms')"
           label-for="instanceTerms"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
         >
@@ -246,19 +242,19 @@
             id="instanceTerms"
           />
         </o-field>
-        <o-field :label="$t('Instance Privacy Policy Source')">
-          <div class="columns">
-            <div class="column is-one-third-desktop">
+        <o-field :label="t('Instance Privacy Policy Source')">
+          <div class="">
+            <div class="">
               <fieldset>
                 <legend>
-                  {{ $t("Choose the source of the instance's Privacy Policy") }}
+                  {{ t("Choose the source of the instance's Privacy Policy") }}
                 </legend>
                 <o-field>
                   <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.DEFAULT"
-                    >{{ $t("Default Mobilizon privacy policy") }}</o-radio
+                    >{{ t("Default Mobilizon privacy policy") }}</o-radio
                   >
                 </o-field>
                 <o-field>
@@ -266,7 +262,7 @@
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.URL"
-                    >{{ $t("Custom URL") }}</o-radio
+                    >{{ t("Custom URL") }}</o-radio
                   >
                 </o-field>
                 <o-field>
@@ -274,12 +270,12 @@
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.CUSTOM"
-                    >{{ $t("Custom text") }}</o-radio
+                    >{{ t("Custom text") }}</o-radio
                   >
                 </o-field>
               </fieldset>
             </div>
-            <div class="column">
+            <div class="">
               <div
                 class="notification"
                 v-if="
@@ -287,7 +283,7 @@
                   InstancePrivacyType.DEFAULT
                 "
               >
-                <b>{{ $t("Default") }}</b>
+                <b>{{ t("Default") }}</b>
                 <i18n-t
                   tag="p"
                   class="prose dark:prose-invert"
@@ -298,7 +294,7 @@
                       href="https://demo.mobilizon.org/privacy"
                       target="_blank"
                       rel="noopener"
-                      >{{ $t("default Mobilizon privacy policy") }}</a
+                      >{{ t("default Mobilizon privacy policy") }}</a
                     >
                   </template>
                 </i18n-t>
@@ -310,9 +306,9 @@
                   InstancePrivacyType.URL
                 "
               >
-                <b>{{ $t("URL") }}</b>
+                <b>{{ t("URL") }}</b>
                 <p class="prose dark:prose-invert">
-                  {{ $t("Set an URL to a page with your own privacy policy.") }}
+                  {{ t("Set an URL to a page with your own privacy policy.") }}
                 </p>
               </div>
               <div
@@ -322,11 +318,11 @@
                   InstancePrivacyType.CUSTOM
                 "
               >
-                <b>{{ $t("Custom") }}</b>
+                <b>{{ t("Custom") }}</b>
                 <i18n-t
                   tag="p"
                   class="prose dark:prose-invert"
-                  path="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
+                  keypath="Enter your own privacy policy. HTML tags allowed. The {mobilizon_privacy_policy} is provided as template."
                 >
                   <template #mobilizon_privacy_policy>
                     <a
@@ -334,7 +330,7 @@
                       target="_blank"
                       rel="noopener"
                     >
-                      {{ $t("default Mobilizon privacy policy") }}</a
+                      {{ t("default Mobilizon privacy policy") }}</a
                     >
                   </template>
                 </i18n-t>
@@ -343,7 +339,7 @@
           </div>
         </o-field>
         <o-field
-          :label="$t('Instance Privacy Policy URL')"
+          :label="t('Instance Privacy Policy URL')"
           label-for="instancePrivacyPolicyUrl"
           v-if="
             settingsToWrite.instancePrivacyPolicyType ===
@@ -357,7 +353,7 @@
           />
         </o-field>
         <o-field
-          :label="$t('Instance Privacy Policy')"
+          :label="t('Instance Privacy Policy')"
           label-for="instancePrivacyPolicy"
           v-if="
             settingsToWrite.instancePrivacyPolicyType ===
@@ -371,7 +367,7 @@
           />
         </o-field>
         <o-button native-type="submit" variant="primary">{{
-          $t("Save")
+          t("Save")
         }}</o-button>
       </form>
     </section>
@@ -390,29 +386,30 @@ import { useMutation, useQuery } from "@vue/apollo-composable";
 import { ref, computed, watch, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@vueuse/head";
-import { Notifier } from "@/plugins/notifier";
+import type { Notifier } from "@/plugins/notifier";
+
+const defaultAdminSettings: IAdminSettings = {
+  instanceName: "",
+  instanceDescription: "",
+  instanceSlogan: "",
+  instanceLongDescription: "",
+  contact: "",
+  instanceTerms: "",
+  instanceTermsType: InstanceTermsType.DEFAULT,
+  instanceTermsUrl: null,
+  instancePrivacyPolicy: "",
+  instancePrivacyPolicyType: InstancePrivacyType.DEFAULT,
+  instancePrivacyPolicyUrl: null,
+  instanceRules: "",
+  registrationsOpen: false,
+  instanceLanguages: [],
+};
 
 const { result: adminSettingsResult } = useQuery<{
   adminSettings: IAdminSettings;
 }>(ADMIN_SETTINGS);
 const adminSettings = computed(
-  () =>
-    adminSettingsResult.value?.adminSettings ?? {
-      instanceName: "",
-      instanceDescription: "",
-      instanceSlogan: "",
-      instanceLongDescription: "",
-      contact: "",
-      instanceTerms: "",
-      instanceTermsType: InstanceTermsType.DEFAULT,
-      instanceTermsUrl: null,
-      instancePrivacyPolicy: "",
-      instancePrivacyPolicyType: InstanceTermsType.DEFAULT,
-      instancePrivacyPolicyUrl: null,
-      instanceRules: "",
-      registrationsOpen: false,
-      instanceLanguages: [],
-    }
+  () => adminSettingsResult.value?.adminSettings ?? defaultAdminSettings
 );
 
 const { result: languageResult } = useQuery<{ languages: ILanguage[] }>(
@@ -425,10 +422,10 @@ useHead({
   title: computed(() => t("Settings")),
 });
 
-const settingsToWrite = ref<IAdminSettings>({ ...adminSettings });
+const settingsToWrite = ref<IAdminSettings>(defaultAdminSettings);
 
 watch(adminSettings, () => {
-  // settingsToWrite.value = { ...adminSettings.value };
+  settingsToWrite.value = { ...adminSettings.value };
 });
 
 const filteredLanguages = ref<string[]>([]);
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index 527476cba..4c3ccb075 100644
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -196,7 +196,6 @@ a.user-profile {
   text-decoration: none;
 }
 a.disabled {
-  color: $danger;
   text-decoration: line-through;
 }
 </style>
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index d5747331d..ec5dbd70e 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -496,7 +496,6 @@
 <style lang="scss" scoped>
 // @use "@/styles/_mixins" as *;
 // main section > .container {
-//   // background: $white;
 
 //   form {
 //     h2 {
@@ -528,7 +527,6 @@
 //   span {
 //     padding: 5px 7px;
 //     display: inline;
-//     background: $secondary;
 //   }
 // }
 
@@ -553,7 +551,6 @@
 
 //   nav.navbar {
 //     min-height: 2rem !important;
-//     background: lighten($secondary, 10%);
 
 //     .container {
 //       min-height: 2rem;
@@ -561,7 +558,6 @@
 //       .navbar-menu,
 //       .navbar-end {
 //         display: flex !important;
-//         background: lighten($secondary, 10%);
 //       }
 
 //       .navbar-end {
@@ -625,7 +621,6 @@ import {
   CREATE_EVENT,
   EDIT_EVENT,
   EVENT_PERSON_PARTICIPATION,
-  FETCH_EVENT,
 } from "../../graphql/event";
 import {
   EventModel,
@@ -634,20 +629,8 @@ import {
   removeTypeName,
   toEditJSON,
 } from "../../types/event.model";
-import {
-  CURRENT_ACTOR_CLIENT,
-  IDENTITIES,
-  LOGGED_USER_DRAFTS,
-  PERSON_STATUS_GROUP,
-} from "../../graphql/actor";
-import { FETCH_GROUP } from "../../graphql/group";
-import {
-  displayNameAndUsername,
-  IActor,
-  IGroup,
-  IPerson,
-  usernameWithDomain,
-} from "../../types/actor";
+import { LOGGED_USER_DRAFTS } from "../../graphql/actor";
+import { IActor, IGroup, IPerson, usernameWithDomain } from "../../types/actor";
 import {
   buildFileFromIMedia,
   buildFileVariable,
@@ -655,8 +638,6 @@ import {
 } from "../../utils/image";
 import RouteName from "../../router/name";
 import "intersection-observer";
-import { CONFIG_EDIT_EVENT } from "../../graphql/config";
-import { IConfig } from "../../types/config.model";
 import {
   ApolloCache,
   FetchResult,
@@ -664,8 +645,6 @@ import {
 } from "@apollo/client/core";
 import cloneDeep from "lodash/cloneDeep";
 import { IEventOptions } from "@/types/event-options.model";
-import { USER_SETTINGS } from "@/graphql/user";
-import { IUser } from "@/types/current-user.model";
 import { IAddress } from "@/types/address.model";
 import { LOGGED_USER_PARTICIPATIONS } from "@/graphql/participant";
 import {
@@ -690,6 +669,7 @@ import { Dialog } from "@/plugins/dialog";
 import { Notifier } from "@/plugins/notifier";
 import { useHead } from "@vueuse/head";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
+import type { Locale } from "date-fns";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
 
@@ -1033,10 +1013,10 @@ const handleError = (err: any) => {
  * Put in cache the updated or created event.
  * If the event is not a draft anymore, also put in cache the participation
  */
-const postCreateOrUpdate = (store: any, updateEvent: IEvent) => {
-  const resultEvent: IEvent = { ...updateEvent };
+const postCreateOrUpdate = (store: any, updatedEvent: IEvent) => {
+  const resultEvent: IEvent = { ...updatedEvent };
   console.debug("resultEvent", resultEvent);
-  if (!updateEvent.draft) {
+  if (!updatedEvent.draft) {
     store.writeQuery({
       query: EVENT_PERSON_PARTICIPATION,
       variables: {
@@ -1077,9 +1057,9 @@ const postCreateOrUpdate = (store: any, updateEvent: IEvent) => {
  */
 // eslint-disable-next-line class-methods-use-this
 const postRefetchQueries = (
-  updateEvent: IEvent
+  updatedEvent: IEvent
 ): InternalRefetchQueriesInclude => {
-  if (updateEvent.draft) {
+  if (updatedEvent.draft) {
     return [
       {
         query: LOGGED_USER_DRAFTS,
@@ -1253,10 +1233,10 @@ const beginsOn = computed({
     // }
     return event.value.beginsOn ? new Date(event.value.beginsOn) : null;
   },
-  set(beginsOn: Date | null) {
-    event.value.beginsOn = beginsOn?.toISOString() ?? null;
-    if (!event.value.endsOn || !beginsOn) return;
-    const dateBeginsOn = new Date(beginsOn);
+  set(newBeginsOn: Date | null) {
+    event.value.beginsOn = newBeginsOn?.toISOString() ?? null;
+    if (!event.value.endsOn || !newBeginsOn) return;
+    const dateBeginsOn = new Date(newBeginsOn);
     const dateEndsOn = new Date(event.value.endsOn);
     let endsOn = new Date(event.value.endsOn);
     if (dateEndsOn < dateBeginsOn) {
@@ -1277,8 +1257,8 @@ const endsOn = computed({
     // }
     return event.value.endsOn ? new Date(event.value.endsOn) : null;
   },
-  set(endsOn: Date | null) {
-    event.value.endsOn = endsOn?.toISOString() ?? null;
+  set(newEndsOn: Date | null) {
+    event.value.endsOn = newEndsOn?.toISOString() ?? null;
   },
 });
 
@@ -1324,10 +1304,10 @@ const timezone = computed({
   get(): string | null {
     return event.value.options.timezone;
   },
-  set(timezone: string | null) {
+  set(newTimezone: string | null) {
     event.value.options = {
       ...event.value.options,
-      timezone,
+      timezone: newTimezone,
     };
   },
 });
@@ -1368,10 +1348,10 @@ const isOnline = computed({
   get(): boolean {
     return event.value.options.isOnline;
   },
-  set(isOnline: boolean) {
+  set(newIsOnline: boolean) {
     event.value.options = {
       ...event.value.options,
-      isOnline,
+      isOnline: newIsOnline,
     };
   },
 });
@@ -1391,13 +1371,13 @@ onFetchEventResult((result) => {
   }
 });
 
-const { person } = usePersonStatusGroup(
+const groupFederatedUsername = computed(() =>
   usernameWithDomain(fetchedEvent.value?.attributedTo)
 );
 
-const { group } = useGroup(
-  usernameWithDomain(fetchedEvent.value?.attributedTo)
-);
+const { person } = usePersonStatusGroup(groupFederatedUsername);
+
+const { group } = useGroup(groupFederatedUsername);
 
 watch(group, () => {
   if (!props.isUpdate && group.value?.visibility == GroupVisibility.UNLISTED) {
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 011eabdea..85a731085 100755
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -1339,7 +1339,6 @@ div.sidebar {
       a {
         display: inline-block;
         padding: 0.3rem;
-        background: $secondary;
         color: #111;
 
         &:empty {
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index c4c90590a..adf5bdce7 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -416,8 +416,6 @@ const firstDayOfWeek = computed((): number => {
 // @import "node_modules/bulma/sass/utilities/mixins.sass";
 
 main > .container {
-  // background: $white;
-
   & > h1 {
     margin: 10px auto 5px;
   }
@@ -436,7 +434,6 @@ section {
     font-size: 1.3rem;
 
     &::after {
-      background: $orange-3;
       position: absolute;
       left: 0;
       right: 0;
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index 12ff89bf9..7dfdbd76c 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -456,7 +456,6 @@ const openDetailedRows = <Record<string, boolean>>{};
 <style lang="scss" scoped>
 section.container.container {
   padding: 1rem;
-  // background: $white;
 }
 
 .table {
@@ -479,12 +478,6 @@ section.container.container {
       display: inline;
     }
   }
-
-  span.tag {
-    &.is-primary {
-      background-color: $primary;
-    }
-  }
 }
 
 nav.breadcrumb {
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index 02dc61902..67dd3e4da 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -135,7 +135,10 @@
                     currentActor?.id !== undefined
                   "
                 >
-                  <button class="media py-4 px-2 w-full" @click="followGroup">
+                  <button
+                    class="flex gap-1 text-start py-4 px-2 w-full"
+                    @click="followGroup"
+                  >
                     <RSS />
                     <div class="pl-2">
                       <h3 class="font-medium text-lg">{{ t("Follow") }}</h3>
@@ -174,7 +177,10 @@
                     isGroupInviteOnly || isCurrentActorAPendingGroupMember
                   "
                 >
-                  <button class="media py-4 px-2 w-full" @click="joinGroup">
+                  <button
+                    class="flex gap-1 text-start py-4 px-2 w-full"
+                    @click="joinGroup"
+                  >
                     <AccountMultiplePlus />
                     <div class="pl-2">
                       <h3 class="font-medium text-lg">{{ t("Join") }}</h3>
@@ -346,7 +352,7 @@
               </o-dropdown>
             </div>
           </div>
-          <invitations
+          <InvitationsList
             v-if="
               isCurrentActorAnInvitedGroupMember && groupMember !== undefined
             "
@@ -626,7 +632,7 @@ import {
 import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
 import MultiPostListItem from "@/components/Post/MultiPostListItem.vue";
 import { Address, addressFullName } from "@/types/address.model";
-import Invitations from "@/components/Group/Invitations.vue";
+import InvitationsList from "@/components/Group/InvitationsList.vue";
 import addMinutes from "date-fns/addMinutes";
 import { JOIN_GROUP } from "@/graphql/member";
 import { MemberRole, Openness, PostVisibility } from "@/types/enums";
@@ -1129,7 +1135,6 @@ watch(isCurrentActorAGroupMember, () => {
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
-// @import "node_modules/bulma/sass/utilities/mixins.sass";
 div.container {
   .block-container {
     display: flex;
@@ -1137,21 +1142,10 @@ div.container {
     margin-top: 15px;
 
     &.presentation {
-      border: 2px solid $purple-2;
       padding: 0 0 10px;
       position: relative;
       flex-direction: column;
 
-      // h1 {
-      //   color: $purple-1;
-      //   font-size: 2rem;
-      //   font-weight: 500;
-      // }
-
-      .button.is-outlined {
-        border-color: $purple-2;
-      }
-
       & > *:not(img) {
         position: relative;
         z-index: 2;
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index 32b49762b..bae70ac2b 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -403,7 +403,7 @@ const confirmDeleteGroup = (): void => {
     ),
     confirmText: t("Delete group"),
     cancelText: t("Cancel"),
-    type: "danger",
+    variant: "danger",
     hasIcon: true,
     onConfirm: () =>
       deleteGroupMutation({
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index c7c98c077..9b14f1559 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -17,7 +17,7 @@
       >
     </div>
     <o-loading v-model:active="loading"></o-loading>
-    <invitations
+    <InvitationsList
       :invitations="invitations"
       @accept-invitation="acceptInvitation"
       @reject-invitation="rejectInvitation"
@@ -82,8 +82,8 @@
 import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
 import { LEAVE_GROUP } from "@/graphql/group";
 import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
-import Invitations from "@/components/Group/Invitations.vue";
-import { IGroup, usernameWithDomain } from "@/types/actor";
+import InvitationsList from "@/components/Group/InvitationsList.vue";
+import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import { MemberRole } from "@/types/enums";
 import { supportsWebPFormat } from "@/utils/support";
diff --git a/js/src/views/Group/Settings.vue b/js/src/views/Group/Settings.vue
index c783c01fb..0d39aca36 100644
--- a/js/src/views/Group/Settings.vue
+++ b/js/src/views/Group/Settings.vue
@@ -43,12 +43,3 @@ useHead({
   title: computed(() => t("Group settings")),
 });
 </script>
-
-<style lang="scss" scoped>
-aside.section {
-  padding-top: 1rem;
-}
-.container.section {
-  background: $white;
-}
-</style>
diff --git a/js/src/views/HomeView.vue b/js/src/views/HomeView.vue
index 402d5146e..b8a45267b 100644
--- a/js/src/views/HomeView.vue
+++ b/js/src/views/HomeView.vue
@@ -288,12 +288,12 @@
 <script lang="ts" setup>
 import { EventSortField, ParticipantRole, SortDirection } from "@/types/enums";
 import { Paginate } from "@/types/paginate";
-import { IParticipant, Participant } from "../types/participant.model";
+import { IParticipant } from "../types/participant.model";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventParticipationCard from "../components/Event/EventParticipationCard.vue";
 import MultiCard from "../components/Event/MultiCard.vue";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
+import { IPerson, Person } from "../types/actor";
 import ngeohash from "ngeohash";
 import {
   ICurrentUser,
@@ -471,10 +471,8 @@ const locationName = computed(
 //   () => closeEventsResult.value?.searchEvents || { total: 0, elements: [] }
 // );
 
-const currentUserParticipations = computed(() =>
-  loggedUser.value?.participations.elements.map(
-    (participation: IParticipant) => new Participant(participation)
-  )
+const currentUserParticipations = computed(
+  () => loggedUser.value?.participations.elements
 );
 
 const instanceName = computed((): string | undefined => config.value?.name);
@@ -635,6 +633,6 @@ watch(loggedUser, (loggedUserValue) => {
 // },
 
 useHead({
-  title: computed(() => instanceName.value),
+  title: computed(() => instanceName.value ?? ""),
 });
 </script>
diff --git a/js/src/views/Interact.vue b/js/src/views/Interact.vue
index c91e78151..c18d71f5a 100644
--- a/js/src/views/Interact.vue
+++ b/js/src/views/Interact.vue
@@ -99,8 +99,3 @@ useHead({
   title: computed(() => t("Interact with a remote content")),
 });
 </script>
-<style lang="scss">
-main > .container {
-  background: $white;
-}
-</style>
diff --git a/js/src/views/Moderation/Logs.vue b/js/src/views/Moderation/Logs.vue
index c2433824d..142d7ad5f 100644
--- a/js/src/views/Moderation/Logs.vue
+++ b/js/src/views/Moderation/Logs.vue
@@ -214,7 +214,7 @@
                 log.object.__typename == 'Group'
               "
               tag="span"
-              path="{moderator} suspended group {profile}"
+              keypath="{moderator} suspended group {profile}"
             >
               <template #moderator>
                 <router-link
diff --git a/js/src/views/Moderation/Report.vue b/js/src/views/Moderation/Report.vue
index f7c6b42ca..a368acc35 100644
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -515,10 +515,6 @@ tbody td img.image,
   justify-content: flex-end;
 }
 
-.report-content {
-  border-left: 4px solid $primary;
-}
-
 .box a {
   text-decoration: none;
   color: inherit;
diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue
index 7e39de5e6..301a7cef1 100644
--- a/js/src/views/Posts/Edit.vue
+++ b/js/src/views/Posts/Edit.vue
@@ -411,7 +411,6 @@ useHead({
 form {
   nav.navbar {
     // min-height: 2rem !important;
-    background: lighten($secondary, 10%);
 
     .container {
       // min-height: 2rem;
@@ -419,7 +418,6 @@ form {
       .navbar-menu,
       .navbar-end {
         // display: flex !important;
-        background: lighten($secondary, 10%);
         // flex-wrap: wrap;
       }
 
diff --git a/js/src/views/Posts/Post.vue b/js/src/views/Posts/Post.vue
index 1d46d97b8..f6ae5da06 100644
--- a/js/src/views/Posts/Post.vue
+++ b/js/src/views/Posts/Post.vue
@@ -416,7 +416,6 @@ onDeletePostDone(({ data }) => {
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
 article.post {
-  // background: $white !important;
   header {
     display: flex;
     flex-direction: column;
@@ -487,7 +486,6 @@ article.post {
         height: 0.2rem;
         content: " ";
         display: block;
-        background-color: $purple-1;
       }
 
       .buttons {
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index cf22198fc..eafb64894 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -250,10 +250,10 @@ import RouteName from "../../router/name";
 import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 
-const { loggedUser } = useLoggedUser();
-
 const { t } = useI18n({ useScope: "global" });
 
+const { loggedUser } = useLoggedUser();
+
 useHead({
   title: computed(() => t("General settings")),
 });
diff --git a/js/src/views/Settings/NotificationsView.vue b/js/src/views/Settings/NotificationsView.vue
index 26ae0dc95..258883d65 100644
--- a/js/src/views/Settings/NotificationsView.vue
+++ b/js/src/views/Settings/NotificationsView.vue
@@ -832,9 +832,7 @@ const { mutate: createNewFeedToken } = useMutation(CREATE_FEED_TOKEN, () => ({
   }
 
   a.change-timezone {
-    color: $primary;
     text-decoration: underline;
-    text-decoration-color: #fea72b;
     text-decoration-thickness: 2px;
     @include margin-left(5px);
   }
diff --git a/js/src/views/SettingsView.vue b/js/src/views/SettingsView.vue
index bd282c89e..6a3b65ecd 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="">{{ t("Settings") }}</h1>
+    <h1 class="text-violet-3">{{ 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/tailwind.config.js b/js/tailwind.config.js
index 6e39abeeb..29b35fc39 100644
--- a/js/tailwind.config.js
+++ b/js/tailwind.config.js
@@ -3,9 +3,9 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: "rgb(var(--color-primary) / <alpha-value>)",
-        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-        "violet-title": "rgb(var(--color-violet-title) / <alpha-value>)",
+        primary: "#1e7d97",
+        secondary: "#ffd599",
+        "violet-title": "#3c376e",
         tag: "rgb(var(--color-tag) / <alpha-value>)",
         "frama-violet": "#725794",
         "frama-orange": "#cc4e13",
diff --git a/js/vite.config.js b/js/vite.config.js
index 8d62d3e0d..7ab9854e6 100644
--- a/js/vite.config.js
+++ b/js/vite.config.js
@@ -61,9 +61,6 @@ export default defineConfig(({ command }) => {
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `
-        @use "@/variables.scss" as *;
-        `,
           sassOptions: {
             quietDeps: true,
           },