Initial work

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

js/package.json

@@ -16,6 +16,8 @@
     "@absinthe/socket-apollo-link": "^0.2.1",
     "@apollo/client": "^3.3.16",
     "@mdi/font": "^6.1.95",
+    "@oruga-ui/oruga-next": "^0.4.7",
+    "@oruga-ui/theme-bulma": "^0.1.3",
     "@tiptap/core": "^2.0.0-beta.41",
     "@tiptap/extension-blockquote": "^2.0.0-beta.6",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
@@ -28,14 +30,14 @@
     "@tiptap/extension-ordered-list": "^2.0.0-beta.6",
     "@tiptap/extension-underline": "^2.0.0-beta.7",
     "@tiptap/starter-kit": "^2.0.0-beta.37",
-    "@tiptap/vue-2": "^2.0.0-beta.21",
+    "@tiptap/vue-3": "^2.0.0-beta.81",
-    "@vue/compat": "^3.1.0",
+    "@vue-a11y/announcer": "^3.1.5",
-    "@vue-a11y/announcer": "^2.1.0",
+    "@vue-a11y/skip-to": "^3.0.3",
-    "@vue-a11y/skip-to": "^2.1.2",
+    "@vue-leaflet/vue-leaflet": "^0.6.1",
-    "@vue/apollo-option": "4.0.0-alpha.11",
+    "@vue/apollo-composable": "^4.0.0-alpha.15",
+    "@vue/apollo-option": "^4.0.0-alpha.15",
     "apollo-absinthe-upload-link": "^1.5.0",
     "blurhash": "^1.1.3",
-    "buefy": "^0.9.0",
     "bulma-divider": "^0.2.0",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.0",
@@ -54,15 +56,14 @@
     "sanitize-html": "^2.5.3",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
-    "v-tooltip": "^2.1.3",
+    "v-tooltip": "^4.0.0-beta.2",
     "vue": "^3.1.0",
-    "vue-class-component": "^7.2.3",
+    "vue-class-component": "8.0.0-rc.1",
-    "vue-i18n": "^8.14.0",
+    "vue-i18n": "^9.0.0",
-    "vue-meta": "^2.3.1",
+    "vue-meta": "^3.0.0-alpha.9",
-    "vue-property-decorator": "^9.0.0",
+    "vue-property-decorator": "^10.0.0-rc.3",
-    "vue-router": "^3.1.6",
+    "vue-router": "^4.0.0",
     "vue-scrollto": "^2.17.1",
-    "vue2-leaflet": "^2.0.3",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
@@ -79,19 +80,19 @@
     "@types/sanitize-html": "^2.5.0",
     "@typescript-eslint/eslint-plugin": "^5.3.0",
     "@typescript-eslint/parser": "^5.3.0",
-    "@vue/cli-plugin-babel": "~5.0.0-rc.0",
+    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
-    "@vue/cli-plugin-eslint": "~5.0.0-rc.0",
+    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
-    "@vue/cli-plugin-pwa": "~5.0.0-rc.0",
+    "@vue/cli-plugin-pwa": "~5.0.0-rc.1",
-    "@vue/cli-plugin-router": "~5.0.0-rc.0",
+    "@vue/cli-plugin-router": "~5.0.0-rc.1",
-    "@vue/cli-plugin-typescript": "~5.0.0-rc.0",
+    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
-    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
-    "@vue/cli-service": "~5.0.0-rc.0",
+    "@vue/cli-service": "~5.0.0-rc.1",
     "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-typescript": "^9.0.0",
-    "@vue/test-utils": "^1.1.0",
+    "@vue/test-utils": "^2.0.0-rc.16",
-    "@vue/vue2-jest": "^27.0.0-alpha.3",
+    "@vue/vue3-jest": "^27.0.0-alpha.3",
-    "@vue/vue3-jest": "^27.0.0-alpha.1",
+    "babel-core": "^7.0.0-bridge.0",
     "cypress": "^8.3.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",

js/src/App.vue

@@ -4,7 +4,7 @@
     <VueSkipTo to="#main" :label="$t('Skip to main content')" />
     <NavBar />
     <div v-if="config && config.demoMode">
-      <b-message
+      <o-message
         class="container"
         type="is-danger"
         :title="$t('Warning').toLocaleUpperCase()"
@@ -20,13 +20,13 @@
             )
           }}
         </p>
-      </b-message>
+      </o-message>
     </div>
     <error v-if="error" :error="error" />
 
     <main id="main" v-else>
       <transition name="fade" mode="out-in">
-        <router-view ref="routerView" />
+        <!-- <router-view ref="routerView" /> -->
       </transition>
     </main>
     <mobilizon-footer />
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import NavBar from "./components/NavBar.vue";
 import {
   AUTH_ACCESS_TOKEN,
@@ -47,81 +46,110 @@ import {
   UPDATE_CURRENT_USER_CLIENT,
 } from "./graphql/user";
 import Footer from "./components/Footer.vue";
-import Logo from "./components/Logo.vue";
 import { initializeCurrentActor } from "./utils/auth";
 import { CONFIG } from "./graphql/config";
 import { IConfig } from "./types/config.model";
 import { ICurrentUser } from "./types/current-user.model";
 import jwt_decode, { JwtPayload } from "jwt-decode";
 import { refreshAccessToken } from "./apollo/utils";
-import { Route } from "vue-router";
+import { defineComponent, ref } from "vue";
+import { useMutation, useQuery, useResult } from "@vue/apollo-composable";
+import { RouterView } from "vue-router";
+import { useAnnouncer } from "@vue-a11y/announcer";
+import { useMeta } from "vue-meta";
 
-@Component({
+export default defineComponent({
-  apollo: {
+  name: "App",
-    currentUser: CURRENT_USER_CLIENT,
+  setup() {
-    config: CONFIG,
+    const { result: configResult } = useQuery(CONFIG);
+    const config = useResult<{ config: IConfig }>(configResult);
+
+    const { result } = useQuery(CURRENT_USER_CLIENT);
+    const currentUser = useResult<{ currentUser: ICurrentUser }>(result);
+
+    const { mutate: updateUserClient } = useMutation(
+      UPDATE_CURRENT_USER_CLIENT
+    );
+
+    const interval: number | undefined = 0;
+    const routerView = ref<InstanceType<typeof RouterView> | null>(null);
+
+    useMeta({ titleTemplate: "%s | Mobilizon" });
+
+    return {
+      config,
+      currentUser,
+      updateUserClient,
+      online: false,
+      interval,
+      routerView,
+    };
   },
   components: {
-    Logo,
     NavBar,
     error: () =>
       import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
     "mobilizon-footer": Footer,
   },
-  metaInfo() {
-    return {
-      titleTemplate: "%s | Mobilizon",
-    };
-  },
-})
-export default class App extends Vue {
-  config!: IConfig;
-
-  currentUser!: ICurrentUser;
-
-  error: Error | null = null;
-
-  online = true;
-
-  interval: number | undefined = undefined;
-
-  @Ref("routerView") routerView!: Vue;
-
   async created(): Promise<void> {
     if (await this.initializeCurrentUser()) {
       await initializeCurrentActor(this.$apollo.provider.defaultClient);
     }
-  }
+  },
+  methods: {
+    async initializeCurrentUser(): Promise<boolean> {
+      const userId = localStorage.getItem(AUTH_USER_ID);
+      const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
+      const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
+      const role = localStorage.getItem(AUTH_USER_ROLE);
 
-  errorCaptured(error: Error): void {
+      if (userId && userEmail && accessToken && role) {
-    this.error = error;
+        this.updateUserClient({
-  }
-
-  private async initializeCurrentUser() {
-    const userId = localStorage.getItem(AUTH_USER_ID);
-    const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
-    const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
-    const role = localStorage.getItem(AUTH_USER_ROLE);
-
-    if (userId && userEmail && accessToken && role) {
-      return this.$apollo.mutate({
-        mutation: UPDATE_CURRENT_USER_CLIENT,
-        variables: {
           id: userId,
           email: userEmail,
           isLoggedIn: true,
           role,
-        },
+        });
-      });
+        return true;
-    }
+      }
-    return false;
+      return false;
-  }
+    },
+    async refreshApp(registration: ServiceWorkerRegistration): Promise<any> {
+      const worker = registration.waiting;
+      if (!worker) {
+        return Promise.resolve();
+      }
+      console.debug("Doing worker.skipWaiting().");
+      return new Promise((resolve, reject) => {
+        const channel = new MessageChannel();
 
+        channel.port1.onmessage = (event) => {
+          console.debug("Done worker.skipWaiting().");
+          if (event.data.error) {
+            reject(event.data);
+          } else {
+            resolve(event.data);
+          }
+        };
+        console.debug("calling skip waiting");
+        worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
+      });
+    },
+    showOfflineNetworkWarnin(): void {
+      // this.$notifier.error(this.$t("You are offline") as string);
+    },
+    extractPageTitleFromRoute(route: any): string {
+      if (route.meta?.announcer?.message) {
+        return route.meta?.announcer?.message();
+      }
+      return document.title;
+    },
+  },
   mounted(): void {
     this.online = window.navigator.onLine;
     window.addEventListener("offline", () => {
       this.online = false;
-      this.showOfflineNetworkWarning();
+      // this.showOfflineNetworkWarning();
       console.debug("offline");
     });
     window.addEventListener("online", () => {
@@ -129,7 +157,7 @@ export default class App extends Vue {
       console.debug("online");
     });
     document.addEventListener("refreshApp", (event: Event) => {
-      this.$buefy.snackbar.open({
+      this.$oruga.snackbar.open({
         queue: false,
         indefinite: true,
         type: "is-secondary",
@@ -168,76 +196,40 @@ export default class App extends Vue {
         }
       }
     }, 60000);
-  }
+  },
-
-  private async refreshApp(
-    registration: ServiceWorkerRegistration
-  ): Promise<any> {
-    const worker = registration.waiting;
-    if (!worker) {
-      return Promise.resolve();
-    }
-    console.debug("Doing worker.skipWaiting().");
-    return new Promise((resolve, reject) => {
-      const channel = new MessageChannel();
-
-      channel.port1.onmessage = (event) => {
-        console.debug("Done worker.skipWaiting().");
-        if (event.data.error) {
-          reject(event.data);
-        } else {
-          resolve(event.data);
-        }
-      };
-      console.debug("calling skip waiting");
-      worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
-    });
-  }
-
-  showOfflineNetworkWarning(): void {
-    this.$notifier.error(this.$t("You are offline") as string);
-  }
-
   unmounted(): void {
     clearInterval(this.interval);
-    this.interval = undefined;
+    this.interval = 0;
-  }
+  },
-
+  async beforeRouteUpdate(to) {
-  @Watch("$route", { immediate: true })
+    const pageTitle = this.extractPageTitleFromRoute(to);
-  updateAnnouncement(route: Route): void {
-    const pageTitle = this.extractPageTitleFromRoute(route);
     if (pageTitle) {
-      this.$announcer.polite(
+      const { polite } = useAnnouncer();
+      polite(
         this.$t("Navigated to {pageTitle}", {
           pageTitle,
-        }) as string
+        })
       );
     }
     // Set the focus to the router view
     // https://marcus.io/blog/accessible-routing-vuejs
     setTimeout(() => {
-      const focusTarget = this.routerView?.$el as HTMLElement;
+      console.log(this.routerView);
-      if (focusTarget) {
+      // const focusTarget = this.routerView?.$el as HTMLElement;
-        // Make focustarget programmatically focussable
+      // if (focusTarget) {
-        focusTarget.setAttribute("tabindex", "-1");
+      //   // Make focustarget programmatically focussable
+      //   focusTarget.setAttribute("tabindex", "-1");
 
-        // Focus element
+      //   // Focus element
-        focusTarget.focus();
+      //   focusTarget.focus();
 
-        // Remove tabindex from focustarget.
+      //   // Remove tabindex from focustarget.
-        // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+      //   // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
-        focusTarget.removeAttribute("tabindex");
+      //   focusTarget.removeAttribute("tabindex");
-      }
+      // }
     }, 0);
-  }
+  },
-
+});
-  extractPageTitleFromRoute(route: Route): string {
-    if (route.meta?.announcer?.message) {
-      return route.meta?.announcer?.message();
-    }
-    return document.title;
-  }
-}
 </script>
 
 <style lang="scss">

js/src/components/Account/ActorAutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-autocomplete
+  <o-autocomplete
     :data="baseData"
     :placeholder="$t('Actor')"
     v-model="name"
@@ -19,7 +19,7 @@
             v-if="props.option.avatar"
             alt=""
           />
-          <b-icon v-else icon="account-circle" />
+          <o-icon v-else icon="account-circle" />
         </div>
         <div class="media-content">
           <span v-if="props.option.name">
@@ -41,7 +41,7 @@
         Thats it! No more movies found.
       </span>
     </template>
-  </b-autocomplete>
+  </o-autocomplete>
 </template>
 <script lang="ts">
 import { Component, Model, Vue, Watch } from "vue-property-decorator";

js/src/components/Account/ActorCard.vue

@@ -4,7 +4,7 @@
       <figure class="image is-32x32" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
 
     <div class="media-content">

js/src/components/Account/ActorInline.vue

@@ -4,7 +4,7 @@
       <figure class="image is-24x24" v-if="actor.avatar">
         <img class="is-rounded" :src="actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
 
     <div class="actor-name">

js/src/components/Activity/DiscussionActivityItem.vue

@@ -1,45 +1,49 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'chat'" :type="iconColor" />
+    <o-icon :icon="'chat'" :type="iconColor" />
     <div class="subject">
-      <i18n :path="translation" tag="p">
+      <i18n-t :path="translation" tag="p">
-        <router-link
+        <template #discussion v-if="activity.object">
-          v-if="activity.object"
+          <router-link
-          slot="discussion"
+            :to="{
-          :to="{
+              name: RouteName.DISCUSSION,
-            name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
-            params: { slug: subjectParams.discussion_slug },
+            }"
-          }"
+            >{{ subjectParams.discussion_title }}</router-link
-          >{{ subjectParams.discussion_title }}</router-link
+          >
-        >
+        </template>
-        <b v-else slot="discussion">{{ subjectParams.discussion_title }}</b>
+        <template v-else #discussion>
-        <router-link
+          <b>{{ subjectParams.discussion_title }}</b>
+        </template>
+        <template
           v-if="activity.object && subjectParams.old_discussion_title"
-          slot="old_discussion"
+          #old_discussion
-          :to="{
-            name: RouteName.DISCUSSION,
-            params: { slug: subjectParams.discussion_slug },
-          }"
-          >{{ subjectParams.old_discussion_title }}</router-link
         >
-        <b
+          <router-link
+            :to="{
+              name: RouteName.DISCUSSION,
+              params: { slug: subjectParams.discussion_slug },
+            }"
+            >{{ subjectParams.old_discussion_title }}</router-link
+          >
+        </template>
+        <template
+          #old_discussion
           v-else-if="subjectParams.old_discussion_title"
-          slot="old_discussion"
-          >{{ subjectParams.old_discussion_title }}</b
         >
-        <popover-actor-card
+          <b>{{ subjectParams.old_discussion_title }}</b>
-          :actor="activity.author"
+        </template>
-          :inline="true"
+        <template #profile>
-          slot="profile"
+          <popover-actor-card :actor="activity.author" :inline="true">
-        >
+            <b>
-          <b>
+              {{
-            {{
+                $t("@{username}", {
-              $t("@{username}", {
+                  username: usernameWithDomain(activity.author),
-                username: usernameWithDomain(activity.author),
+                })
-              })
+              }}</b
-            }}</b
+            ></popover-actor-card
-          ></popover-actor-card
+          >
-        ></i18n
+        </template></i18n-t
       >
       <small class="has-text-grey-dark activity-date">{{
         activity.insertedAt | formatTimeString

js/src/components/Activity/EventActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'calendar'" :type="iconColor" />
+    <o-icon :icon="'calendar'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link

js/src/components/Activity/GroupActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'cog'" :type="iconColor" />
+    <o-icon :icon="'cog'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link

js/src/components/Activity/MemberActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="icon" :type="iconColor" />
+    <o-icon :icon="icon" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <popover-actor-card

js/src/components/Activity/PostActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'bullhorn'" :type="iconColor" />
+    <o-icon :icon="'bullhorn'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link

js/src/components/Activity/ResourceActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="activity-item">
-    <b-icon :icon="'link'" :type="iconColor" />
+    <o-icon :icon="'link'" :type="iconColor" />
     <div class="subject">
       <i18n :path="translation" tag="p">
         <router-link v-if="activity.object" slot="resource" :to="path">{{

js/src/components/Activity/SkeletonActivityItem.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="activity-item">
     <span>
-      <b-skeleton circle width="32px" height="32px"></b-skeleton>
+      <o-skeleton circle width="32px" height="32px"></o-skeleton>
     </span>
     <div class="subject">
       <div class="content">
         <p>
-          <b-skeleton active></b-skeleton>
+          <o-skeleton active></o-skeleton>
-          <b-skeleton active class="datetime"></b-skeleton>
+          <o-skeleton active class="datetime"></o-skeleton>
         </p>
       </div>
     </div>

js/src/components/Address/AddressInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <address dir="auto">
-    <b-icon
+    <o-icon
       v-if="showIcon"
       :icon="address.poiInfos.poiIcon.icon"
       size="is-medium"

js/src/components/Address/InlineAddress.vue

@@ -7,7 +7,7 @@
         : physicalAddress.description
     "
   >
-    <b-icon icon="map-marker" />
+    <o-icon icon="map-marker" />
     <span v-if="isDescriptionDifferentFromLocality">
       {{ physicalAddress.description }},
       {{ physicalAddress.locality }}

js/src/components/Admin/Followers.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-table
+    <o-table
       v-show="relayFollowers.elements.length > 0"
       :data="relayFollowers.elements"
       :loading="$apollo.queries.relayFollowers.loading"
@@ -21,26 +21,26 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column
+      <o-table-column
         field="actor.id"
         label="ID"
         width="40"
         numeric
         v-slot="props"
-        >{{ props.row.actor.id }}</b-table-column
+        >{{ props.row.actor.id }}</o-table-column
       >
 
-      <b-table-column
+      <o-table-column
         field="actor.type"
         :label="$t('Type')"
         width="80"
         v-slot="props"
       >
-        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
+        <o-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
-        <b-icon icon="account-circle" v-else />
+        <o-icon icon="account-circle" v-else />
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="approved"
         :label="$t('Status')"
         width="100"
@@ -52,9 +52,9 @@
           :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
           >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
         >
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
+      <o-table-column field="actor.domain" :label="$t('Domain')" sortable>
         <template v-slot:default="props">
           <a
             @click="toggle(props.row)"
@@ -65,9 +65,9 @@
             `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
           }}</a>
         </template>
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="targetActor.updatedAt"
         :label="$t('Date')"
         sortable
@@ -80,7 +80,7 @@
               locale: $dateFnsLocale,
             })
           }}</span
-        ></b-table-column
+        ></o-table-column
       >
 
       <template #detail="props">
@@ -97,7 +97,7 @@
 
       <template slot="bottom-left" v-if="checkedRows.length > 0">
         <div class="buttons">
-          <b-button
+          <o-button
             @click="acceptRelays"
             type="is-success"
             v-if="checkedRowsHaveAtLeastOneToApprove"
@@ -109,8 +109,8 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
-          <b-button @click="rejectRelays" type="is-danger">
+          <o-button @click="rejectRelays" type="is-danger">
             {{
               $tc(
                 "No instance to reject|Reject instance|Reject {number} instances",
@@ -118,13 +118,13 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
         </div>
       </template>
-    </b-table>
+    </o-table>
-    <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
+    <o-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
       $t("No instance follows your instance yet.")
-    }}</b-message>
+    }}</o-message>
   </div>
 </template>
 <script lang="ts">

js/src/components/Admin/Followings.vue

@@ -1,27 +1,27 @@
 <template>
   <div>
     <form @submit="followRelay">
-      <b-field
+      <o-field
         :label="$t('Add an instance')"
         custom-class="add-relay"
         horizontal
       >
-        <b-field grouped expanded size="is-large">
+        <o-field grouped expanded size="is-large">
           <p class="control">
-            <b-input
+            <o-input
               v-model="newRelayAddress"
               :placeholder="$t('Ex: mobilizon.fr')"
             />
           </p>
           <p class="control">
-            <b-button type="is-primary" native-type="submit">{{
+            <o-button type="is-primary" native-type="submit">{{
               $t("Add an instance")
-            }}</b-button>
+            }}</o-button>
           </p>
-        </b-field>
+        </o-field>
-      </b-field>
+      </o-field>
     </form>
-    <b-table
+    <o-table
       v-show="relayFollowings.elements.length > 0"
       :data="relayFollowings.elements"
       :loading="$apollo.queries.relayFollowings.loading"
@@ -43,29 +43,29 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column
+      <o-table-column
         field="targetActor.id"
         label="ID"
         width="40"
         numeric
         v-slot="props"
-        >{{ props.row.targetActor.id }}</b-table-column
+        >{{ props.row.targetActor.id }}</o-table-column
       >
 
-      <b-table-column
+      <o-table-column
         field="targetActor.type"
         :label="$t('Type')"
         width="80"
         v-slot="props"
       >
-        <b-icon
+        <o-icon
           icon="lan"
           v-if="RelayMixin.isInstance(props.row.targetActor)"
         />
-        <b-icon icon="account-circle" v-else />
+        <o-icon icon="account-circle" v-else />
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="approved"
         :label="$t('Status')"
         width="100"
@@ -77,9 +77,9 @@
           :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
           >{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
         >
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
+      <o-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
         <template v-slot:default="props">
           <a
             @click="toggle(props.row)"
@@ -90,9 +90,9 @@
             `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
           }}</a>
         </template>
-      </b-table-column>
+      </o-table-column>
 
-      <b-table-column
+      <o-table-column
         field="targetActor.updatedAt"
         :label="$t('Date')"
         sortable
@@ -105,7 +105,7 @@
               locale: $dateFnsLocale,
             })
           }}</span
-        ></b-table-column
+        ></o-table-column
       >
 
       <template #detail="props">
@@ -121,7 +121,7 @@
       </template>
 
       <template slot="bottom-left" v-if="checkedRows.length > 0">
-        <b-button @click="removeRelays" type="is-danger">
+        <o-button @click="removeRelays" type="is-danger">
           {{
             $tc(
               "No instance to remove|Remove instance|Remove {number} instances",
@@ -129,12 +129,12 @@
               { number: checkedRows.length }
             )
           }}
-        </b-button>
+        </o-button>
       </template>
-    </b-table>
+    </o-table>
-    <b-message type="is-danger" v-if="relayFollowings.total === 0">{{
+    <o-message type="is-danger" v-if="relayFollowings.total === 0">{{
       $t("You don't follow any instances yet.")
-    }}</b-message>
+    }}</o-message>
   </div>
 </template>
 <script lang="ts">

js/src/components/Comment/Comment.vue

@@ -19,7 +19,7 @@
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon class="media-left" v-else icon="account-circle" />
+        <o-icon class="media-left" v-else icon="account-circle" />
       </popover-actor-card>
       <div v-else class="media-left">
         <figure
@@ -28,7 +28,7 @@
         >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon v-else icon="account-circle" />
+        <o-icon v-else icon="account-circle" />
       </div>
       <div class="media-content">
         <div class="content">
@@ -54,11 +54,11 @@
               v-if="comment.actor.id === currentActor.id"
               @click="deleteComment"
             >
-              <b-icon icon="delete" size="is-small" aria-hidden="true" />
+              <o-icon icon="delete" size="is-small" aria-hidden="true" />
               <span class="visually-hidden">{{ $t("Delete") }}</span>
             </button>
             <button @click="reportModal()">
-              <b-icon icon="alert" size="is-small" />
+              <o-icon icon="alert" size="is-small" />
               <span class="visually-hidden">{{ $t("Report") }}</span>
             </button>
           </span>
@@ -72,7 +72,7 @@
           <div v-else>{{ $t("[This comment has been deleted]") }}</div>
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
-              <b-icon icon="chevron-down" class="reply-btn" />
+              <o-icon icon="chevron-down" class="reply-btn" />
               <span class="reply-btn">{{
                 $tc("View a reply", comment.totalReplies, {
                   totalReplies: comment.totalReplies,
@@ -83,7 +83,7 @@
               v-else-if="comment.totalReplies && showReplies"
               @click="showReplies = false"
             >
-              <b-icon icon="chevron-up" class="reply-btn" />
+              <o-icon icon="chevron-up" class="reply-btn" />
               <span class="reply-btn">{{ $t("Hide replies") }}</span>
             </p>
           </div>
@@ -103,7 +103,7 @@
               @click="createReplyToComment()"
             >
               <span class="icon is-small">
-                <b-icon icon="reply" />
+                <o-icon icon="reply" />
               </span>
               <span>{{ $t("Reply") }}</span>
             </span>
@@ -123,7 +123,7 @@
             <img :src="currentActor.avatar.url" alt="" />
           </p>
         </figure>
-        <b-icon
+        <o-icon
           class="media-left"
           v-else
           size="is-large"
@@ -144,11 +144,11 @@
                 mode="comment"
                 :aria-label="$t('Comment body')"
               />
-              <b-button
+              <o-button
                 :disabled="newComment.text.trim().length === 0"
                 native-type="submit"
                 type="is-primary"
-                >{{ $t("Post a reply") }}</b-button
+                >{{ $t("Post a reply") }}</o-button
               >
             </span>
           </div>
@@ -508,7 +508,7 @@ article {
   transition-property: opacity, transform;
 }
 
-.comment-replies-enter {
+.comment-replies-enter-from {
   opacity: 0;
   transform: translateX(50px) scaleY(0.5);
 }

js/src/components/Comment/CommentTree.vue

@@ -6,10 +6,10 @@
       @submit.prevent="createCommentForEvent(newComment)"
       @keyup.ctrl.enter="createCommentForEvent(newComment)"
     >
-      <b-notification
+      <o-notification
         v-if="isEventOrganiser && !areCommentsClosed"
         :closable="false"
-        >{{ $t("Comments are closed for everybody else.") }}</b-notification
+        >{{ $t("Comments are closed for everybody else.") }}</o-notification
       >
       <article class="media">
         <figure class="media-left" v-if="newComment.actor">
@@ -31,28 +31,28 @@
               </p>
             </div>
             <div class="field notify-participants" v-if="isEventOrganiser">
-              <b-switch
+              <o-switch
                 aria-labelledby="notify-participants-toggle"
                 v-model="newComment.isAnnouncement"
-                >{{ $t("Notify participants") }}</b-switch
+                >{{ $t("Notify participants") }}</o-switch
               >
             </div>
           </div>
         </div>
         <div class="send-comment">
-          <b-button
+          <o-button
             native-type="submit"
             type="is-primary"
             class="comment-button-submit"
             icon-left="send"
-            >{{ $t("Send") }}</b-button
+            >{{ $t("Send") }}</o-button
           >
         </div>
       </article>
     </form>
-    <b-notification v-else-if="isConnected" :closable="false">{{
+    <o-notification v-else-if="isConnected" :closable="false">{{
       $t("The organiser has chosen to close comments.")
-    }}</b-notification>
+    }}</o-notification>
     <p
       v-if="$apollo.queries.comments.loading"
       class="loading has-text-centered"
@@ -425,7 +425,7 @@ ul.comment-list li {
   transition-property: opacity, transform;
 }
 
-.comment-list-enter {
+.comment-list-enter-from {
   opacity: 0;
   transform: translateX(50px) scaleY(0.5);
 }
@@ -451,7 +451,7 @@ ul.comment-list li {
 /*    transition: opacity .5s;*/
 /*}*/
 
-/*.comment-empty-list-enter {*/
+/*.comment-empty-list-enter-from {*/
 /*    opacity: 0;*/
 /*}*/
 </style>

js/src/components/Discussion/DiscussionComment.vue

@@ -7,7 +7,7 @@
       >
         <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </div>
     <div class="body">
       <div class="meta" dir="auto">
@@ -29,30 +29,30 @@
             comment.actor.id === currentActor.id
           "
         >
-          <b-dropdown aria-role="list">
+          <o-dropdown aria-role="list">
-            <b-icon slot="trigger" role="button" icon="dots-horizontal" />
+            <o-icon slot="trigger" role="button" icon="dots-horizontal" />
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="comment.actor.id === currentActor.id"
               @click="toggleEditMode"
               aria-role="menuitem"
             >
-              <b-icon icon="pencil"></b-icon>
+              <o-icon icon="pencil"></o-icon>
               {{ $t("Edit") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="comment.actor.id === currentActor.id"
               @click="$emit('delete-comment', comment)"
               aria-role="menuitem"
             >
-              <b-icon icon="delete"></b-icon>
+              <o-icon icon="delete"></o-icon>
               {{ $t("Delete") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
-            <!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
+            <!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
-              <b-icon icon="flag" />
+              <o-icon icon="flag" />
               {{ $t("Report") }}
-            </b-dropdown-item> -->
+            </o-dropdown-item> -->
-          </b-dropdown>
+          </o-dropdown>
         </span>
         <div class="post-infos">
           <span :title="comment.insertedAt | formatDateTimeString">
@@ -94,15 +94,15 @@
       <form v-else class="edition" @submit.prevent="updateComment">
         <editor v-model="updatedComment" :aria-label="$t('Comment body')" />
         <div class="buttons">
-          <b-button
+          <o-button
             native-type="submit"
             :disabled="['<p></p>', '', comment.text].includes(updatedComment)"
             type="is-primary"
-            >{{ $t("Update") }}</b-button
+            >{{ $t("Update") }}</o-button
           >
-          <b-button native-type="button" @click="toggleEditMode">{{
+          <o-button native-type="button" @click="toggleEditMode">{{
             $t("Cancel")
-          }}</b-button>
+          }}</o-button>
         </div>
       </form>
     </div>

js/src/components/Discussion/DiscussionListItem.vue

@@ -20,7 +20,7 @@
           alt
         />
       </figure>
-      <b-icon v-else size="is-medium" icon="account-circle" />
+      <o-icon v-else size="is-medium" icon="account-circle" />
     </div>
     <div class="title-info-wrapper">
       <div class="title-and-date">

js/src/components/Editor.vue

@@ -18,7 +18,7 @@
           type="button"
           :title="$t('Bold')"
         >
-          <b-icon icon="format-bold" />
+          <o-icon icon="format-bold" />
         </button>
 
         <button
@@ -28,7 +28,7 @@
           type="button"
           :title="$t('Italic')"
         >
-          <b-icon icon="format-italic" />
+          <o-icon icon="format-italic" />
         </button>
 
         <button
@@ -38,7 +38,7 @@
           type="button"
           :title="$t('Underline')"
         >
-          <b-icon icon="format-underline" />
+          <o-icon icon="format-underline" />
         </button>
 
         <button
@@ -49,7 +49,7 @@
           type="button"
           :title="$t('Heading Level 1')"
         >
-          <b-icon icon="format-header-1" />
+          <o-icon icon="format-header-1" />
         </button>
 
         <button
@@ -60,7 +60,7 @@
           type="button"
           :title="$t('Heading Level 2')"
         >
-          <b-icon icon="format-header-2" />
+          <o-icon icon="format-header-2" />
         </button>
 
         <button
@@ -71,7 +71,7 @@
           type="button"
           :title="$t('Heading Level 3')"
         >
-          <b-icon icon="format-header-3" />
+          <o-icon icon="format-header-3" />
         </button>
 
         <button
@@ -81,7 +81,7 @@
           type="button"
           :title="$t('Add link')"
         >
-          <b-icon icon="link" />
+          <o-icon icon="link" />
         </button>
 
         <button
@@ -91,7 +91,7 @@
           type="button"
           :title="$t('Remove link')"
         >
-          <b-icon icon="link-off" />
+          <o-icon icon="link-off" />
         </button>
 
         <button
@@ -101,7 +101,7 @@
           type="button"
           :title="$t('Add picture')"
         >
-          <b-icon icon="image" />
+          <o-icon icon="image" />
         </button>
 
         <button
@@ -112,7 +112,7 @@
           type="button"
           :title="$t('Bullet list')"
         >
-          <b-icon icon="format-list-bulleted" />
+          <o-icon icon="format-list-bulleted" />
         </button>
 
         <button
@@ -123,7 +123,7 @@
           type="button"
           :title="$t('Ordered list')"
         >
-          <b-icon icon="format-list-numbered" />
+          <o-icon icon="format-list-numbered" />
         </button>
 
         <button
@@ -134,7 +134,7 @@
           type="button"
           :title="$t('Quote')"
         >
-          <b-icon icon="format-quote-close" />
+          <o-icon icon="format-quote-close" />
         </button>
 
         <button
@@ -144,7 +144,7 @@
           type="button"
           :title="$t('Undo')"
         >
-          <b-icon icon="undo" />
+          <o-icon icon="undo" />
         </button>
 
         <button
@@ -154,7 +154,7 @@
           type="button"
           :title="$t('Redo')"
         >
-          <b-icon icon="redo" />
+          <o-icon icon="redo" />
         </button>
       </div>
 
@@ -171,7 +171,7 @@
           type="button"
           :title="$t('Bold')"
         >
-          <b-icon icon="format-bold" />
+          <o-icon icon="format-bold" />
           <span class="visually-hidden">{{ $t("Bold") }}</span>
         </button>
 
@@ -182,7 +182,7 @@
           type="button"
           :title="$t('Italic')"
         >
-          <b-icon icon="format-italic" />
+          <o-icon icon="format-italic" />
           <span class="visually-hidden">{{ $t("Italic") }}</span>
         </button>
       </bubble-menu>

js/src/components/Error.vue

@@ -25,7 +25,7 @@
             />
           </picture>
         </div>
-        <b-message type="is-danger" class="is-size-5">
+        <o-message type="is-danger" class="is-size-5">
           <h1>
             {{
               $t(
@@ -33,21 +33,23 @@
               )
             }}
           </h1>
-        </b-message>
+        </o-message>
       </section>
-      <b-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
+      <o-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
       <section v-else>
         <h2 class="is-size-5">{{ $t("What can I do to help?") }}</h2>
         <p class="content">
-          <i18n
+          <i18n-t
             tag="span"
             path="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
           >
-            <b slot="instanceName">{{ config.name }}</b>
+            <template #instanceName>
-            <a slot="mobilizon_link" href="https://joinmobilizon.org">{{
+              <b>{{ config.name }}</b>
-              $t("Mobilizon")
+            </template>
-            }}</a>
+            <template #mobilizon_link>
-          </i18n>
+              <a href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a>
+            </template>
+          </i18n-t>
           {{
             $t(
               "We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
@@ -97,18 +99,18 @@
           }}
         </p>
         <div class="buttons">
-          <b-tooltip
+          <o-tooltip
             :label="tooltipConfig.label"
             :type="tooltipConfig.type"
             :active="copied !== false"
             always
           >
-            <b-button
+            <o-button
               @click="copyErrorToClipboard"
               @keyup.enter="copyErrorToClipboard"
-              >{{ $t("Copy details to clipboard") }}</b-button
+              >{{ $t("Copy details to clipboard") }}</o-button
             >
-          </b-tooltip>
+          </o-tooltip>
         </div>
       </section>
     </div>

js/src/components/Event/AddressAutoComplete.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="address-autocomplete">
-    <b-field expanded>
+    <o-field expanded>
-      <b-autocomplete
+      <o-autocomplete
         :data="addressData"
         v-model="queryText"
         :placeholder="$t('e.g. 10 Rue Jangot')"
@@ -15,31 +15,31 @@
         dir="auto"
       >
         <template #default="{ option }">
-          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <o-icon :icon="option.poiInfos.poiIcon.icon" />
           <b>{{ option.poiInfos.name }}</b
           ><br />
           <small>{{ option.poiInfos.alternativeName }}</small>
         </template>
-      </b-autocomplete>
+      </o-autocomplete>
-    </b-field>
+    </o-field>
-    <b-field
+    <o-field
       v-if="canDoGeoLocation"
       :message="fieldErrors"
       :type="{ 'is-danger': fieldErrors.length }"
     >
-      <b-button
+      <o-button
         type="is-text"
         v-if="!gettingLocation"
         icon-right="target"
         @click="locateMe"
         @keyup.enter="locateMe"
-        >{{ $t("Use my location") }}</b-button
+        >{{ $t("Use my location") }}</o-button
       >
       <span v-else>{{ $t("Getting location") }}</span>
-    </b-field>
+    </o-field>
     <!--
     <div v-if="selected && selected.geom" class="control">
-      <b-checkbox  @input="togglemap" />
+      <o-checkbox  @input="togglemap" />
       <label class="label">{{ $t("Show map") }}</label>
     </div>
 

js/src/components/Event/EventCard.vue

@@ -13,18 +13,18 @@
           class="tag-container"
           v-if="event.tags || event.status !== EventStatus.CONFIRMED"
         >
-          <b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
+          <o-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
             {{ $t("Tentative") }}
-          </b-tag>
+          </o-tag>
-          <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
+          <o-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
             {{ $t("Cancelled") }}
-          </b-tag>
+          </o-tag>
           <router-link
             :to="{ name: RouteName.TAG, params: { tag: tag.title } }"
             v-for="tag in (event.tags || []).slice(0, 3)"
             :key="tag.slug"
           >
-            <b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
+            <o-tag type="is-light" dir="auto">{{ tag.title }}</o-tag>
           </router-link>
         </div>
       </figure>
@@ -59,7 +59,7 @@
                   alt=""
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
+              <o-icon v-else icon="account-circle" />
               <span class="organizer-name">
                 {{ organizerDisplayName(event) }}
               </span>
@@ -75,7 +75,7 @@
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
-              <b-icon icon="video" />
+              <o-icon icon="video" />
               <span>{{ $t("Online") }}</span>
             </div>
           </div>

js/src/components/Event/EventFullDate.vue

@@ -23,13 +23,13 @@
       formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
     }}</span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && showEndTime">
     <span>{{
@@ -40,13 +40,13 @@
       })
     }}</span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="isSameDay() && showStartTime && !showEndTime">
     {{
@@ -74,13 +74,13 @@
       }}
     </span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ multipleTimeZones }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn && showStartTime">
     <span>
@@ -93,13 +93,13 @@
       }}
     </span>
     <br />
-    <b-switch
+    <o-switch
       size="is-small"
       v-model="showLocalTimezone"
       v-if="differentFromUserTimezone"
     >
       {{ singleTimeZone }}
-    </b-switch>
+    </o-switch>
   </p>
   <p v-else-if="endsOn">
     {{

js/src/components/Event/EventListViewCard.vue

@@ -33,15 +33,15 @@
         </div>
         <div class="columns">
           <span class="column is-narrow">
-            <b-icon
+            <o-icon
               icon="earth"
               v-if="event.visibility === EventVisibility.PUBLIC"
             />
-            <b-icon
+            <o-icon
               icon="link"
               v-if="event.visibility === EventVisibility.UNLISTED"
             />
-            <b-icon
+            <o-icon
               icon="lock"
               v-if="event.visibility === EventVisibility.PRIVATE"
             />

js/src/components/Event/EventMetadataBlock.vue

@@ -13,7 +13,7 @@
           height="32"
         />
       </span>
-      <b-icon v-else-if="icon" :icon="icon" size="is-medium" />
+      <o-icon v-else-if="icon" :icon="icon" size="is-medium" />
       <div class="content-wrapper" :class="{ 'padding-left': icon }">
         <slot></slot>
       </div>

js/src/components/Event/EventMetadataItem.vue

@@ -12,8 +12,8 @@
           alt=""
         />
 
-        <b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
+        <o-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
-        <b-icon v-else icon="help-circle" />
+        <o-icon v-else icon="help-circle" />
       </div>
       <div class="media-content">
         <b>{{ metadataItem.title || metadataItem.label }}</b>
@@ -28,19 +28,19 @@
             metadataItem.choices
           "
         >
-          <b-field v-for="(value, key) in metadataItem.choices" :key="key">
+          <o-field v-for="(value, key) in metadataItem.choices" :key="key">
-            <b-radio v-model="metadataItemValue" :native-value="key">{{
+            <o-radio v-model="metadataItemValue" :native-value="key">{{
               value
-            }}</b-radio>
+            }}</o-radio>
-          </b-field>
+          </o-field>
         </div>
-        <b-field
+        <o-field
           v-else-if="
             metadataItem.type === EventMetadataType.STRING &&
             metadataItem.keyType == EventMetadataKeyType.URL
           "
         >
-          <b-input
+          <o-input
             @blur="validatePattern"
             ref="urlInput"
             type="url"
@@ -52,27 +52,27 @@
             v-model="metadataItemValue"
             :placeholder="metadataItem.placeholder"
           />
-        </b-field>
+        </o-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
+        <o-field v-else-if="metadataItem.type === EventMetadataType.STRING">
-          <b-input
+          <o-input
             v-model="metadataItemValue"
             :placeholder="metadataItem.placeholder"
           />
-        </b-field>
+        </o-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
+        <o-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
-          <b-numberinput v-model="metadataItemValue" />
+          <o-numberinput v-model="metadataItemValue" />
-        </b-field>
+        </o-field>
-        <b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
+        <o-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
-          <b-checkbox v-model="metadataItemValue">
+          <o-checkbox v-model="metadataItemValue">
             {{
               metadataItemValue === "true"
                 ? metadataItem.choices["true"]
                 : metadataItem.choices["false"]
             }}
-          </b-checkbox>
+          </o-checkbox>
-        </b-field>
+        </o-field>
       </div>
-      <b-button
+      <o-button
         icon-left="close"
         @click="$emit('removeItem', metadataItem.key)"
       />

js/src/components/Event/EventMetadataList.vue

@@ -9,12 +9,12 @@
         />
       </div>
     </div>
-    <b-field
+    <o-field
       grouped
       :label="$t('Find or add an element')"
       label-for="event-metadata-autocomplete"
     >
-      <b-autocomplete
+      <o-autocomplete
         expanded
         v-model="search"
         ref="autocomplete"
@@ -40,8 +40,8 @@
                 height="24"
                 alt=""
               />
-              <b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
+              <o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
-              <b-icon v-else icon="help-circle" />
+              <o-icon v-else icon="help-circle" />
             </div>
             <div class="media-content">
               <b>{{ props.option.label }}</b>
@@ -55,14 +55,14 @@
         <template #empty>{{
           $t("No results for {search}", { search })
         }}</template>
-      </b-autocomplete>
+      </o-autocomplete>
       <p class="control">
-        <b-button @click="showNewElementModal = true">
+        <o-button @click="showNewElementModal = true">
           {{ $t("Add new…") }}
-        </b-button>
+        </o-button>
       </p>
-    </b-field>
+    </o-field>
-    <b-modal
+    <o-modal
       has-modal-card
       v-model="showNewElementModal"
       :close-button-aria-label="$t('Close')"
@@ -77,19 +77,19 @@
         </header>
         <div class="modal-card-body">
           <form @submit="addNewElement">
-            <b-field :label="$t('Element title')">
+            <o-field :label="$t('Element title')">
-              <b-input v-model="newElement.title" />
+              <o-input v-model="newElement.title" />
-            </b-field>
+            </o-field>
-            <b-field :label="$t('Element value')">
+            <o-field :label="$t('Element value')">
-              <b-input v-model="newElement.value" />
+              <o-input v-model="newElement.value" />
-            </b-field>
+            </o-field>
-            <b-button type="is-primary" native-type="submit">{{
+            <o-button type="is-primary" native-type="submit">{{
               $t("Add")
-            }}</b-button>
+            }}</o-button>
           </form>
         </div>
       </div>
-    </b-modal>
+    </o-modal>
   </section>
 </template>
 <script lang="ts">

js/src/components/Event/EventMetadataSidebar.vue

@@ -9,14 +9,14 @@
         <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
         <div class="address" v-if="physicalAddress">
           <address-info :address="physicalAddress" />
-          <b-button
+          <o-button
             type="is-text"
             class="map-show-button"
             @click="$emit('showMapModal', true)"
             v-if="physicalAddress.geom"
           >
             {{ $t("Show map") }}
-          </b-button>
+          </o-button>
         </div>
       </div>
     </event-metadata-block>

js/src/components/Event/EventMinimalistCard.vue

@@ -18,12 +18,12 @@
     </div>
     <div class="title-info-wrapper has-text-grey-dark">
       <h3 class="event-minimalist-title" :lang="event.language" dir="auto">
-        <b-tag
+        <o-tag
           class="mr-2"
           type="is-warning"
           size="is-medium"
           v-if="event.draft"
-          >{{ $t("Draft") }}</b-tag
+          >{{ $t("Draft") }}</o-tag
         >
         {{ event.title }}
       </h3>
@@ -36,7 +36,7 @@
         class="event-subtitle"
         v-else-if="event.options && event.options.isOnline"
       >
-        <b-icon icon="video" />
+        <o-icon icon="video" />
         <span>{{ $t("Online") }}</span>
       </div>
       <div class="event-subtitle event-organizer" v-if="showOrganizer">
@@ -46,13 +46,13 @@
         >
           <img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
         </figure>
-        <b-icon v-else icon="account-circle" />
+        <o-icon v-else icon="account-circle" />
         <span class="organizer-name">
           {{ organizerDisplayName(event) }}
         </span>
       </div>
       <p class="participant-metadata">
-        <b-icon icon="account-multiple" />
+        <o-icon icon="account-multiple" />
         <span v-if="event.options.maximumAttendeeCapacity !== 0">
           {{
             $tc(
@@ -76,7 +76,7 @@
           }}
         </span>
         <span v-if="event.participantStats.notApproved > 0">
-          <b-button
+          <o-button
             type="is-text"
             @click="
               gotToWithCheck(participation, {
@@ -95,7 +95,7 @@
                 }
               )
             }}
-          </b-button>
+          </o-button>
         </span>
       </p>
     </div>

js/src/components/Event/EventParticipationCard.vue

@@ -10,7 +10,7 @@
           width="24"
         />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <o-icon v-else icon="account-circle" />
       {{ displayNameAndUsername(participation.actor) }}
     </div>
     <div class="list-card">
@@ -68,7 +68,7 @@
               participation.event.options.isOnline
             "
           >
-            <b-icon icon="video" />
+            <o-icon icon="video" />
             <span>{{ $t("Online") }}</span>
           </div>
           <div class="event-subtitle event-organizer">
@@ -85,13 +85,13 @@
                 alt=""
               />
             </figure>
-            <b-icon v-else icon="account-circle" />
+            <o-icon v-else icon="account-circle" />
             <span class="organizer-name">
               {{ organizerDisplayName(participation.event) }}
             </span>
           </div>
           <div class="event-subtitle event-participants">
-            <b-icon
+            <o-icon
               :class="{ 'has-text-danger': lastSeatsLeft }"
               icon="account-group"
             />
@@ -138,7 +138,7 @@
                   )
                 }}
               </span>
-              <b-button
+              <o-button
                 v-if="participation.event.participantStats.notApproved > 0"
                 type="is-text"
                 @click="
@@ -158,17 +158,17 @@
                     }
                   )
                 }}
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>
         <div class="actions">
-          <b-dropdown aria-role="list" position="is-bottom-left">
+          <o-dropdown aria-role="list" position="is-bottom-left">
-            <b-button slot="trigger" role="button" icon-right="dots-horizontal">
+            <o-button slot="trigger" role="button" icon-right="dots-horizontal">
               {{ $t("Actions") }}
-            </b-button>
+            </o-button>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -183,11 +183,11 @@
                 })
               "
             >
-              <b-icon icon="pencil" />
+              <o-icon icon="pencil" />
               {{ $t("Edit") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="participation.role === ParticipantRole.CREATOR"
               aria-role="listitem"
               @click="
@@ -197,11 +197,11 @@
                 })
               "
             >
-              <b-icon icon="content-duplicate" />
+              <o-icon icon="content-duplicate" />
               {{ $t("Duplicate") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -211,11 +211,11 @@
               aria-role="listitem"
               @click="openDeleteEventModalWrapper"
             >
-              <b-icon icon="delete" />
+              <o-icon icon="delete" />
               {{ $t("Delete") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item
+            <o-dropdown-item
               v-if="
                 ![
                   ParticipantRole.PARTICIPANT,
@@ -230,22 +230,22 @@
                 })
               "
             >
-              <b-icon icon="account-multiple-plus" />
+              <o-icon icon="account-multiple-plus" />
               {{ $t("Manage participations") }}
-            </b-dropdown-item>
+            </o-dropdown-item>
 
-            <b-dropdown-item aria-role="listitem" has-link>
+            <o-dropdown-item aria-role="listitem" has-link>
               <router-link
                 :to="{
                   name: RouteName.EVENT,
                   params: { uuid: participation.event.uuid },
                 }"
               >
-                <b-icon icon="view-compact" />
+                <o-icon icon="view-compact" />
                 {{ $t("View event page") }}
               </router-link>
-            </b-dropdown-item>
+            </o-dropdown-item>
-          </b-dropdown>
+          </o-dropdown>
         </div>
       </div>
     </div>

js/src/components/Event/FullAddressAutoComplete.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="address-autocomplete columns is-desktop">
     <div class="column">
-      <b-field
+      <o-field
         :label-for="id"
         expanded
         :message="fieldErrors"
@@ -16,13 +16,13 @@
           >
         </template>
         <p class="control" v-if="canShowLocateMeButton && !gettingLocation">
-          <b-button
+          <o-button
             icon-right="map-marker"
             @click="locateMe"
             :title="$t('Use my location')"
           />
         </p>
-        <b-autocomplete
+        <o-autocomplete
           :data="addressData"
           v-model="queryText"
           :placeholder="$t('e.g. 10 Rue Jangot')"
@@ -38,7 +38,7 @@
           dir="auto"
         >
           <template #default="{ option }">
-            <b-icon :icon="option.poiInfos.poiIcon.icon" />
+            <o-icon :icon="option.poiInfos.poiIcon.icon" />
             <b>{{ option.poiInfos.name }}</b
             ><br />
             <small>{{ option.poiInfos.alternativeName }}</small>
@@ -62,15 +62,15 @@
               <!--                        </p>-->
             </div>
           </template>
-        </b-autocomplete>
+        </o-autocomplete>
-        <b-button
+        <o-button
           :disabled="!queryText"
           @click="resetAddress"
           class="reset-area"
           icon-left="close"
           :title="$t('Clear address field')"
         />
-      </b-field>
+      </o-field>
       <div
         class="card"
         v-if="!hideSelected && (selected.originId || selected.url)"

js/src/components/Event/OrganizerPicker.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="list is-hoverable">
-    <b-input
+    <o-input
       dir="auto"
       :placeholder="$t('Filter by profile or group name')"
       v-model="actorFilter"
     />
-    <b-radio-button
+    <o-radio-button
       v-model="selectedActor"
       :native-value="availableActor"
       class="list-item"
@@ -20,7 +20,7 @@
             alt=""
           />
         </figure>
-        <b-icon
+        <o-icon
           class="media-left"
           v-else
           size="is-large"
@@ -31,7 +31,7 @@
           <small>{{ `@${availableActor.preferredUsername}` }}</small>
         </div>
       </div>
-    </b-radio-button>
+    </o-radio-button>
   </div>
 </template>
 <script lang="ts">

js/src/components/Event/OrganizerPickerWrapper.vue

@@ -16,7 +16,7 @@
               :alt="selectedActor.avatar.alt || ''"
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="selectedActor.name">
           <p class="is-4">{{ selectedActor.name }}</p>
@@ -27,9 +27,9 @@
         <div class="media-content" v-else>
           {{ `@${selectedActor.preferredUsername}` }}
         </div>
-        <b-button type="is-text" @click="isComponentModalActive = true">
+        <o-button type="is-text" @click="isComponentModalActive = true">
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <!-- If we have a current actor -->
@@ -44,9 +44,9 @@
         :src="selectedActor.avatar.url"
         :alt="selectedActor.avatar.alt"
       />
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal
+    <o-modal
       :active.sync="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -67,7 +67,7 @@
             <div class="column contact-picker">
               <div v-if="isSelectedActorAGroup && actorMembers.length > 0">
                 <p>{{ $t("Add a contact") }}</p>
-                <b-input
+                <o-input
                   :placeholder="$t('Filter by name')"
                   v-model="contactFilter"
                   dir="auto"
@@ -77,7 +77,7 @@
                   v-for="actor in filteredActorMembers"
                   :key="actor.id"
                 >
-                  <b-checkbox v-model="actualContacts" :native-value="actor.id">
+                  <o-checkbox v-model="actualContacts" :native-value="actor.id">
                     <div class="media">
                       <div class="media-left">
                         <figure class="image is-48x48" v-if="actor.avatar">
@@ -87,7 +87,7 @@
                             :alt="actor.avatar.alt"
                           />
                         </figure>
-                        <b-icon v-else size="is-large" icon="account-circle" />
+                        <o-icon v-else size="is-large" icon="account-circle" />
                       </div>
                       <div class="media-content" v-if="actor.name">
                         <p class="is-4">{{ actor.name }}</p>
@@ -99,7 +99,7 @@
                         {{ `@${usernameWithDomain(actor)}` }}
                       </div>
                     </div>
-                  </b-checkbox>
+                  </o-checkbox>
                 </p>
               </div>
               <div v-else class="content has-text-grey-dark has-text-centered">
@@ -114,7 +114,7 @@
           </button>
         </footer>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">

js/src/components/Event/ParticipationButton.vue

@@ -25,63 +25,63 @@ A button to set your participation
 
 <template>
   <div class="participation-button">
-    <b-dropdown
+    <o-dropdown
       aria-role="list"
       position="is-bottom-left"
       v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
     >
       <template #trigger="{ active }">
-        <b-button
+        <o-button
           type="is-success"
           size="is-large"
           icon-left="check"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
           {{ $t("I participate") }}
-        </b-button>
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="confirmLeave"
         @keyup.enter="confirmLeave"
         class="has-text-danger"
-        >{{ $t("Cancel my participation…") }}</b-dropdown-item
+        >{{ $t("Cancel my participation…") }}</o-dropdown-item
       >
-    </b-dropdown>
+    </o-dropdown>
 
     <div
       v-else-if="
         participation && participation.role === ParticipantRole.NOT_APPROVED
       "
     >
-      <b-dropdown
+      <o-dropdown
         aria-role="list"
         position="is-bottom-left"
         class="dropdown-disabled"
       >
         <button class="button is-success is-large" type="button" slot="trigger">
-          <b-icon icon="timer-sand-empty" />
+          <o-icon icon="timer-sand-empty" />
           <template>
             <span>{{ $t("I participate") }}</span>
           </template>
-          <b-icon icon="menu-down" />
+          <o-icon icon="menu-down" />
         </button>
 
-        <!--                <b-dropdown-item :value="false" aria-role="listitem">-->
+        <!--                <o-dropdown-item :value="false" aria-role="listitem">-->
         <!--                  {{ $t('Change my identity…')}}-->
-        <!--                </b-dropdown-item>-->
+        <!--                </o-dropdown-item>-->
 
-        <b-dropdown-item
+        <o-dropdown-item
           :value="false"
           aria-role="listitem"
           @click="confirmLeave"
           @keyup.enter="confirmLeave"
           class="has-text-danger"
-          >{{ $t("Cancel my participation request…") }}</b-dropdown-item
+          >{{ $t("Cancel my participation request…") }}</o-dropdown-item
         >
-      </b-dropdown>
+      </o-dropdown>
       <small>{{ $t("Participation requested!") }}</small>
       <br />
       <small>{{ $t("Waiting for organization team approval.") }}</small>
@@ -101,22 +101,22 @@ A button to set your participation
       </span>
     </div>
 
-    <b-dropdown
+    <o-dropdown
       aria-role="list"
       position="is-bottom-left"
       v-else-if="!participation && currentActor.id"
     >
       <template #trigger="{ active }">
-        <b-button
+        <o-button
           type="is-primary"
           size="is-large"
           :icon-right="active ? 'menu-up' : 'menu-down'"
         >
           {{ $t("Participate") }}
-        </b-button>
+        </o-button>
       </template>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="true"
         aria-role="listitem"
         @click="joinEvent(currentActor)"
@@ -139,18 +139,18 @@ A button to set your participation
             </span>
           </div>
         </div>
-      </b-dropdown-item>
+      </o-dropdown-item>
 
-      <b-dropdown-item
+      <o-dropdown-item
         :value="false"
         aria-role="listitem"
         @click="joinModal"
         @keyup.enter="joinModal"
         v-if="identities.length > 1"
-        >{{ $t("with another identity…") }}</b-dropdown-item
+        >{{ $t("with another identity…") }}</o-dropdown-item
       >
-    </b-dropdown>
+    </o-dropdown>
-    <b-button
+    <o-button
       rel="nofollow"
       tag="router-link"
       :to="{
@@ -161,9 +161,9 @@ A button to set your participation
       type="is-primary"
       size="is-large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ $t("Participate") }}</o-button
     >
-    <b-button
+    <o-button
       tag="router-link"
       rel="nofollow"
       :to="{
@@ -174,7 +174,7 @@ A button to set your participation
       type="is-primary"
       size="is-large"
       native-type="button"
-      >{{ $t("Participate") }}</b-button
+      >{{ $t("Participate") }}</o-button
     >
   </div>
 </template>

js/src/components/Event/ShareEventModal.vue

@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="event">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="event.visibility !== EventVisibility.PUBLIC"
           :closable="false"
@@ -16,33 +16,33 @@
               "This event is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
+        </o-notification>
-        <b-notification
+        <o-notification
           type="is-danger"
           v-if="event.status === EventStatus.CANCELLED"
           :closable="false"
         >
           {{ $t("This event has been cancelled.") }}
-        </b-notification>
+        </o-notification>
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
-        <b-field :label="$t('Event URL')" label-for="event-url-text">
+        <o-field :label="$t('Event URL')" label-for="event-url-text">
-          <b-input
+          <o-input
             id="event-url-text"
             ref="eventURLInput"
             :value="event.url"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -50,16 +50,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -75,14 +75,14 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -98,7 +98,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="diasporaShareUrl"
@@ -114,7 +114,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>

js/src/components/Event/TagInput.vue

@@ -1,17 +1,17 @@
 <template>
-  <b-field :label-for="id">
+  <o-field :label-for="id">
     <template slot="label">
       {{ $t("Add some tags") }}
-      <b-tooltip
+      <o-tooltip
         type="is-dark"
         :label="
           $t('You can add tags by hitting the Enter key or by adding a comma')
         "
       >
-        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
+        <o-icon size="is-small" icon="help-circle-outline"></o-icon>
-      </b-tooltip>
+      </o-tooltip>
     </template>
-    <b-taginput
+    <o-taginput
       v-model="tagsStrings"
       :data="filteredTags"
       autocomplete
@@ -25,8 +25,8 @@
       :id="id"
       dir="auto"
     >
-    </b-taginput>
+    </o-taginput>
-  </b-field>
+  </o-field>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";

js/src/components/Footer.vue

@@ -19,7 +19,7 @@
     </picture>
     <ul>
       <li>
-        <b-select
+        <o-select
           :aria-label="$t('Language')"
           v-if="$i18n"
           v-model="locale"
@@ -33,7 +33,7 @@
           >
             {{ language }}
           </option>
-        </b-select>
+        </o-select>
       </li>
       <li>
         <router-link :to="{ name: RouteName.ABOUT }">{{
@@ -59,21 +59,24 @@
       </li>
     </ul>
     <div class="content has-text-centered">
-      <i18n
+      <i18n-t
         tag="span"
         path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
       >
-        <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
+        <template #mobilizon>
-          $t("Mobilizon")
+          <a rel="external" href="https://joinmobilizon.org">{{
-        }}</a>
+            $t("Mobilizon")
-        <span slot="date">{{ new Date().getFullYear() }}</span>
+          }}</a>
-        <a
+        </template>
-          rel="external"
+        <template #date>
-          href="https://joinmobilizon.org/hall-of-fame"
+          <span>{{ new Date().getFullYear() }}</span>
-          slot="contributors"
+        </template>
-          >{{ $t("more than 1360 contributors") }}</a
+        <template #contributors>
-        >
+          <a rel="external" href="https://joinmobilizon.org/hall-of-fame">{{
-      </i18n>
+            $t("more than 1360 contributors")
+          }}</a>
+        </template>
+      </i18n-t>
     </div>
   </footer>
 </template>

js/src/components/Group/GroupCard.vue

@@ -20,7 +20,7 @@
           <figure class="image is-48x48" v-if="group.avatar">
             <img class="is-rounded" :src="group.avatar.url" alt="" />
           </figure>
-          <b-icon v-else size="is-large" icon="account-group" />
+          <o-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
           <h3 class="is-size-5 group-title" dir="auto">
@@ -39,7 +39,7 @@
           :physicalAddress="group.physicalAddress"
         />
         <p class="has-text-grey-dark">
-          <b-icon icon="account" />
+          <o-icon icon="account" />
           {{
             $tc(
               "{count} members or followers",

js/src/components/Group/GroupMemberCard.vue

@@ -4,7 +4,7 @@
       <figure class="image is-24x24" v-if="member.actor.avatar">
         <img class="is-rounded" :src="member.actor.avatar.url" alt="" />
       </figure>
-      <b-icon v-else icon="account-circle" />
+      <o-icon v-else icon="account-circle" />
       {{ displayNameAndUsername(member.actor) }}
     </div>
     <div class="card-content" dir="auto">
@@ -14,7 +14,7 @@
             <figure class="image is-48x48" v-if="member.parent.avatar">
               <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="media-content" dir="auto">
             <router-link
@@ -28,18 +28,18 @@
               <h2>{{ member.parent.name }}</h2>
               <p class="is-6 has-text-grey-dark">
                 <span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
-                <b-taglist>
+                <o-taglist>
-                  <b-tag
+                  <o-tag
                     type="is-info"
                     v-if="member.role === MemberRole.ADMINISTRATOR"
-                    >{{ $t("Administrator") }}</b-tag
+                    >{{ $t("Administrator") }}</o-tag
                   >
-                  <b-tag
+                  <o-tag
                     type="is-info"
                     v-else-if="member.role === MemberRole.MODERATOR"
-                    >{{ $t("Moderator") }}</b-tag
+                    >{{ $t("Moderator") }}</o-tag
                   >
-                </b-taglist>
+                </o-taglist>
               </p>
             </router-link>
           </div>
@@ -49,14 +49,14 @@
         </div>
       </div>
       <div>
-        <b-dropdown aria-role="list" position="is-bottom-left">
+        <o-dropdown aria-role="list" position="is-bottom-left">
-          <b-icon icon="dots-horizontal" slot="trigger" />
+          <o-icon icon="dots-horizontal" slot="trigger" />
 
-          <b-dropdown-item aria-role="listitem" @click="$emit('leave')">
+          <o-dropdown-item aria-role="listitem" @click="$emit('leave')">
-            <b-icon icon="exit-to-app" />
+            <o-icon icon="exit-to-app" />
             {{ $t("Leave") }}
-          </b-dropdown-item>
+          </o-dropdown-item>
-        </b-dropdown>
+        </o-dropdown>
       </div>
     </div>
   </div>

js/src/components/Group/GroupSection.vue

@@ -2,7 +2,7 @@
   <section>
     <div class="group-section-title" :class="{ privateSection }">
       <h2>
-        <b-icon :icon="icon" />
+        <o-icon :icon="icon" />
         <span>{{ title }}</span>
       </h2>
       <router-link :to="route">{{ $t("View all") }}</router-link>

js/src/components/Group/InvitationCard.vue

@@ -15,7 +15,7 @@
             <figure class="image is-48x48" v-if="member.parent.avatar">
               <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="media-content">
             <div class="level">
@@ -45,20 +45,20 @@
               </div>
               <div class="level-right">
                 <div class="level-item">
-                  <b-button
+                  <o-button
                     type="is-success"
                     @click="$emit('accept', member.id)"
                   >
                     {{ $t("Accept") }}
-                  </b-button>
+                  </o-button>
                 </div>
                 <div class="level-item">
-                  <b-button
+                  <o-button
                     type="is-danger"
                     @click="$emit('reject', member.id)"
                   >
                     {{ $t("Decline") }}
-                  </b-button>
+                  </o-button>
                 </div>
               </div>
             </div>

js/src/components/Group/ShareGroupModal.vue

@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="group">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="group.visibility !== GroupVisibility.PUBLIC"
           :closable="false"
@@ -16,23 +16,23 @@
               "This group is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
+        </o-notification>
-        <b-field :label="$t('Group URL')" label-for="group-url-text">
+        <o-field :label="$t('Group URL')" label-for="group-url-text">
-          <b-input
+          <o-input
             id="group-url-text"
             ref="groupURLInput"
             :value="group.url"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -40,16 +40,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -65,21 +65,21 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="linkedInShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -104,7 +104,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>

js/src/components/NavBar.vue

@@ -1,30 +1,30 @@
 <template>
-  <b-navbar
+  <o-navbar
     id="navbar"
     type="is-secondary"
     wrapper-class="container"
     :active.sync="mobileNavbarActive"
   >
-    <template slot="brand">
+    <template #brand>
-      <b-navbar-item
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.HOME }"
         :aria-label="$t('Home')"
       >
         <logo />
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="start">
+    <template #start>
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
+      <o-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
         $t("Explore")
-      }}</b-navbar-item>
+      }}</o-navbar-item>
-      <b-navbar-item
+      <o-navbar-item
         v-if="currentActor.id && currentUser.isLoggedIn"
         tag="router-link"
         :to="{ name: RouteName.MY_EVENTS }"
-        >{{ $t("My events") }}</b-navbar-item
+        >{{ $t("My events") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="router-link"
         :to="{ name: RouteName.MY_GROUPS }"
         v-if="
@@ -33,9 +33,9 @@
           currentActor.id &&
           currentUser.isLoggedIn
         "
-        >{{ $t("My groups") }}</b-navbar-item
+        >{{ $t("My groups") }}</o-navbar-item
       >
-      <b-navbar-item
+      <o-navbar-item
         tag="span"
         v-if="
           config &&
@@ -44,15 +44,15 @@
           currentUser.isLoggedIn
         "
       >
-        <b-button
+        <o-button
           v-if="!hideCreateEventsButton"
           tag="router-link"
           :to="{ name: RouteName.CREATE_EVENT }"
           type="is-primary"
-          >{{ $t("Create") }}</b-button
+          >{{ $t("Create") }}</o-button
         >
-      </b-navbar-item>
+      </o-navbar-item>
-      <b-navbar-item
+      <o-navbar-item
         v-if="config && config.features.koenaConnect"
         class="koena"
         tag="a"
@@ -66,14 +66,14 @@
           width="150"
           alt="Contact accessibilité"
         />
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-    <template slot="end">
+    <template #end>
-      <b-navbar-item tag="div">
+      <o-navbar-item tag="div">
         <search-field @navbar-search="mobileNavbarActive = false" />
-      </b-navbar-item>
+      </o-navbar-item>
 
-      <b-navbar-dropdown
+      <o-navbar-dropdown
         v-if="currentActor.id && currentUser.isLoggedIn"
         right
         collapsible
@@ -82,7 +82,7 @@
         tag="span"
         @keyup.enter="toggleMenu"
       >
-        <template slot="label" v-if="currentActor">
+        <template #label v-if="currentActor">
           <div class="identity-wrapper">
             <div>
               <figure class="image is-32x32" v-if="currentActor.avatar">
@@ -92,7 +92,7 @@
                   :src="currentActor.avatar.url"
                 />
               </figure>
-              <b-icon v-else icon="account-circle" />
+              <o-icon v-else icon="account-circle" />
             </div>
             <div class="media-content is-hidden-desktop">
               <span>{{ displayName(currentActor) }}</span>
@@ -105,7 +105,7 @@
 
         <!-- No identities dropdown if no identities -->
         <span v-if="identities.length <= 1" />
-        <b-navbar-item
+        <o-navbar-item
           tag="span"
           v-for="identity in identities"
           v-else
@@ -125,7 +125,7 @@
                   alt
                 />
               </figure>
-              <b-icon v-else size="is-medium" icon="account-circle" />
+              <o-icon v-else size="is-medium" icon="account-circle" />
             </div>
 
             <div class="media-content">
@@ -137,31 +137,31 @@
           </span>
 
           <hr class="navbar-divider" role="presentation" />
-        </b-navbar-item>
+        </o-navbar-item>
 
-        <b-navbar-item
+        <o-navbar-item
           tag="router-link"
           :to="{ name: RouteName.UPDATE_IDENTITY }"
-          >{{ $t("My account") }}</b-navbar-item
+          >{{ $t("My account") }}</o-navbar-item
         >
-        <b-navbar-item
+        <o-navbar-item
           v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
           tag="router-link"
           :to="{ name: RouteName.ADMIN_DASHBOARD }"
-          >{{ $t("Administration") }}</b-navbar-item
+          >{{ $t("Administration") }}</o-navbar-item
         >
 
-        <b-navbar-item
+        <o-navbar-item
           tag="span"
           tabindex="0"
           @click="logout"
           @keyup.enter="logout"
         >
           <span>{{ $t("Log out") }}</span>
-        </b-navbar-item>
+        </o-navbar-item>
-      </b-navbar-dropdown>
+      </o-navbar-dropdown>
 
-      <b-navbar-item v-else tag="div">
+      <o-navbar-item v-else tag="div">
         <div class="buttons">
           <router-link
             class="button is-primary"
@@ -177,17 +177,15 @@
             >{{ $t("Log in") }}</router-link
           >
         </div>
-      </b-navbar-item>
+      </o-navbar-item>
     </template>
-  </b-navbar>
+  </o-navbar>
 </template>
 
 <script lang="ts">
-import { Component, Ref, Vue, Watch } from "vue-property-decorator";
 import Logo from "@/components/Logo.vue";
 import { GraphQLError } from "graphql";
 import { loadLanguageAsync } from "@/utils/i18n";
-import { ICurrentUserRole } from "@/types/enums";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import { changeIdentity, logout } from "../utils/auth";
 import {
@@ -195,143 +193,137 @@ import {
   IDENTITIES,
   UPDATE_DEFAULT_ACTOR,
 } from "../graphql/actor";
-import { displayName, IPerson, Person } from "../types/actor";
+import { IPerson, Person } from "../types/actor";
 import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
 import { ICurrentUser, IUser } from "../types/current-user.model";
 import SearchField from "./SearchField.vue";
 import RouteName from "../router/name";
+import { defineComponent } from "vue-demi";
+import { useQuery, useResult } from "@vue/apollo-composable";
+import { ref } from "vue";
 
-@Component({
+export default defineComponent({
-  apollo: {
+  name: "NavBar",
-    currentUser: CURRENT_USER_CLIENT,
+  setup() {
-    currentActor: CURRENT_ACTOR_CLIENT,
+    const { result: resultCurrentUser } = useQuery(CURRENT_USER_CLIENT);
-    identities: {
+    const currentUser =
-      query: IDENTITIES,
+      useResult<{ currentUser: ICurrentUser }>(resultCurrentUser);
-      update: ({ identities }) =>
+
-        identities
+    const { result: resultCurrentActor } = useQuery(CURRENT_ACTOR_CLIENT);
-          ? identities.map((identity: IPerson) => new Person(identity))
+    const currentActor =
-          : [],
+      useResult<{ currentUser: IPerson }>(resultCurrentActor);
-      skip() {
+
-        return this.currentUser.isLoggedIn === false;
+    const { result: configResult } = useQuery(CONFIG);
-      },
+    const config = useResult<{ config: IConfig }>(configResult);
-      error({ graphQLErrors }) {
+
-        this.handleErrors(graphQLErrors);
+    const { result: loggedUserResult } = useQuery(USER_SETTINGS);
-      },
+    const loggedUser = useResult<{ config: IUser }>(loggedUserResult);
-    },
+
-    config: CONFIG,
+    const { result: identitiesResult } = useQuery(IDENTITIES);
-    loggedUser: {
+    const identities = useResult<{ identities: IPerson[] }, [], Person[]>(
-      query: USER_SETTINGS,
+      identitiesResult,
-      skip() {
+      [],
-        return !this.currentUser || this.currentUser.isLoggedIn === false;
+      (data) => data.identities.map((identity: IPerson) => new Person(identity))
-      },
+    );
-    },
+
+    const mobileNavbarActive = false;
+
+    const userDropDown = ref(null) as any;
+
+    return {
+      currentUser,
+      currentActor,
+      config,
+      loggedUser,
+      identities,
+      mobileNavbarActive,
+      userDropDown,
+    };
   },
   components: {
     Logo,
     SearchField,
   },
-})
+  methods: {
-export default class NavBar extends Vue {
+    toggleMenu(): void {
-  currentActor!: IPerson;
+      console.debug("called toggleMenu");
+      if (this.userDropDown) {
+        this.userDropDown.showMenu();
+      }
+    },
+    async handleErrors(errors: GraphQLError[]): Promise<void> {
+      if (
+        errors.length > 0 &&
+        errors[0].message ===
+          "You need to be logged-in to view your list of identities"
+      ) {
+        await this.logout();
+      }
+    },
+    async logout(): Promise<void> {
+      await logout(this.$apollo.provider.defaultClient);
+      this.$oruga.notification.open({
+        message: this.$t("You have been disconnected") as string,
+        type: "is-success",
+        position: "is-bottom-right",
+        duration: 5000,
+      });
 
-  config!: IConfig;
+      if (this.$route.name === RouteName.HOME) return;
+      await this.$router.push({ name: RouteName.HOME });
+    },
+    async setIdentity(identity: IPerson): Promise<void> {
+      await this.$apollo.mutate({
+        mutation: UPDATE_DEFAULT_ACTOR,
+        variables: {
+          preferredUsername: identity.preferredUsername,
+        },
+      });
+      return changeIdentity(this.$apollo.provider.defaultClient, identity);
+    },
+  },
+  watch: {
+    async currentActor(): Promise<void> {
+      if (!this.currentUser?.isLoggedIn) return;
+      const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
+        query: IDENTITIES,
+      });
+      if (data) {
+        this.identities = data.identities.map(
+          (identity: IPerson) => new Person(identity)
+        );
 
-  currentUser!: ICurrentUser;
+        // 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
-  loggedUser!: IUser;
+        if (this.identities.length === 0) {
-
+          try {
-  ICurrentUserRole = ICurrentUserRole;
+            await this.$router.push({
-
+              name: RouteName.REGISTER_PROFILE,
-  identities: IPerson[] = [];
+              params: {
-
+                email: this.currentUser.email,
-  RouteName = RouteName;
+                userAlreadyActivated: "true",
-
+              },
-  mobileNavbarActive = false;
+            });
-
+          } catch (err) {
-  displayName = displayName;
+            return undefined;
-
+          }
-  @Ref("user-dropdown") userDropDown!: any;
-
-  toggleMenu(): void {
-    console.debug("called toggleMenu");
-    this.userDropDown.showMenu();
-  }
-
-  @Watch("currentActor")
-  async initializeListOfIdentities(): Promise<void> {
-    if (!this.currentUser.isLoggedIn) return;
-    const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
-      query: IDENTITIES,
-    });
-    if (data) {
-      this.identities = data.identities.map(
-        (identity: IPerson) => new Person(identity)
-      );
-
-      // 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 (this.identities.length === 0) {
-        try {
-          await this.$router.push({
-            name: RouteName.REGISTER_PROFILE,
-            params: {
-              email: this.currentUser.email,
-              userAlreadyActivated: "true",
-            },
-          });
-        } catch (err) {
-          return undefined;
         }
       }
-    }
+    },
-  }
+    loggedUser(): void {
-
+      if (this.loggedUser?.locale) {
-  @Watch("loggedUser")
+        console.debug("Setting locale from navbar");
-  setSavedLanguage(): void {
+        loadLanguageAsync(this.loggedUser.locale);
-    if (this.loggedUser?.locale) {
+      }
-      console.debug("Setting locale from navbar");
+    },
-      loadLanguageAsync(this.loggedUser.locale);
+  },
-    }
+  computed: {
-  }
+    hideCreateEventsButton(): boolean {
-
+      return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
-  async handleErrors(errors: GraphQLError[]): Promise<void> {
+    },
-    if (
+  },
-      errors.length > 0 &&
+});
-      errors[0].message ===
-        "You need to be logged-in to view your list of identities"
-    ) {
-      await this.logout();
-    }
-  }
-
-  async logout(): Promise<void> {
-    await logout(this.$apollo.provider.defaultClient);
-    this.$buefy.notification.open({
-      message: this.$t("You have been disconnected") as string,
-      type: "is-success",
-      position: "is-bottom-right",
-      duration: 5000,
-    });
-
-    if (this.$route.name === RouteName.HOME) return;
-    await this.$router.push({ name: RouteName.HOME });
-  }
-
-  async setIdentity(identity: IPerson): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: UPDATE_DEFAULT_ACTOR,
-      variables: {
-        preferredUsername: identity.preferredUsername,
-      },
-    });
-    return changeIdentity(this.$apollo.provider.defaultClient, identity);
-  }
-
-  get hideCreateEventsButton(): boolean {
-    return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
-  }
-}
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;

js/src/components/Participation/ConfirmParticipation.vue

@@ -5,7 +5,7 @@
     </h1>
     <div v-else>
       <div v-if="failed && participation === undefined">
-        <b-message
+        <o-message
           :title="$t('Error while validating participation request')"
           type="is-danger"
         >
@@ -14,7 +14,7 @@
               "Either the participation request has already been validated, either the validation token is incorrect."
             )
           }}
-        </b-message>
+        </o-message>
       </div>
       <div v-else>
         <h1 class="title">
@@ -29,7 +29,7 @@
           }}
         </p>
         <div v-if="failed">
-          <b-message
+          <o-message
             :title="
               $t(
                 'Error while updating participation status inside this browser'
@@ -42,7 +42,7 @@
                 "We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue."
               )
             }}
-          </b-message>
+          </o-message>
         </div>
         <div class="columns has-text-centered">
           <div class="column">

js/src/components/Participation/ParticipationSection.vue

@@ -16,22 +16,22 @@
         "
         @confirm-leave="$emit('confirm-leave')"
       />
-      <b-button
+      <o-button
         type="is-text"
         v-if="!actorIsParticipant && anonymousParticipation !== null"
         @click="$emit('cancel-anonymous-participation')"
-        >{{ $t("Cancel anonymous participation") }}</b-button
+        >{{ $t("Cancel anonymous participation") }}</o-button
       >
       <small v-if="!actorIsParticipant && anonymousParticipation">
         {{ $t("You are participating in this event anonymously") }}
-        <b-tooltip :label="$t('Click for more information')">
+        <o-tooltip :label="$t('Click for more information')">
           <span
             class="is-clickable"
             @click="isAnonymousParticipationModalOpen = true"
           >
-            <b-icon size="is-small" icon="information-outline" />
+            <o-icon size="is-small" icon="information-outline" />
           </span>
-        </b-tooltip>
+        </o-tooltip>
       </small>
       <small
         v-else-if="!actorIsParticipant && anonymousParticipation === false"
@@ -41,7 +41,7 @@
             "You are participating in this event anonymously but didn't confirm participation"
           )
         }}
-        <b-tooltip
+        <o-tooltip
           :label="
             $t(
               'This information is saved only on your computer. Click for details'
@@ -49,9 +49,9 @@
           "
         >
           <router-link :to="{ name: RouteName.TERMS }">
-            <b-icon size="is-small" icon="help-circle-outline" />
+            <o-icon size="is-small" icon="help-circle-outline" />
           </router-link>
-        </b-tooltip>
+        </o-tooltip>
       </small>
     </div>
     <div v-else>
@@ -59,10 +59,10 @@
         <template>
           <span>{{ $t("Event already passed") }}</span>
         </template>
-        <b-icon icon="menu-down" />
+        <o-icon icon="menu-down" />
       </button>
     </div>
-    <b-modal
+    <o-modal
       :active.sync="isAnonymousParticipationModalOpen"
       has-modal-card
       :close-button-aria-label="$t('Close')"
@@ -76,7 +76,7 @@
         </header>
 
         <section class="modal-card-body">
-          <b-notification
+          <o-notification
             type="is-primary"
             :closable="false"
             v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
@@ -86,7 +86,7 @@
                 "As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
               )
             }}
-          </b-notification>
+          </o-notification>
           <p>
             {{
               $t(
@@ -102,19 +102,19 @@
             }}
           </p>
           <div class="buttons" v-if="isSecureContext">
-            <b-button
+            <o-button
               type="is-danger is-outlined"
               @click="clearEventParticipationData"
             >
               {{ $t("Clear participation data for this event") }}
-            </b-button>
+            </o-button>
-            <b-button type="is-danger" @click="clearAllParticipationData">
+            <o-button type="is-danger" @click="clearAllParticipationData">
               {{ $t("Clear participation data for all events") }}
-            </b-button>
+            </o-button>
           </div>
         </section>
       </div>
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -10,22 +10,22 @@
               )
             }}
           </p>
-          <b-message type="is-info">
+          <o-message type="is-info">
             {{
               $t(
                 "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
               )
             }}
-          </b-message>
+          </o-message>
-          <b-message type="is-danger" v-if="error">{{ error }}</b-message>
+          <o-message type="is-danger" v-if="error">{{ error }}</o-message>
-          <b-field :label="$t('Email address')">
+          <o-field :label="$t('Email address')">
-            <b-input
+            <o-input
               type="email"
               v-model="anonymousParticipation.email"
               :placeholder="$t('Your email')"
               required
-            ></b-input>
+            ></o-input>
-          </b-field>
+          </o-field>
           <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
             {{
               $t(
@@ -40,16 +40,16 @@
               )
             }}
           </p>
-          <b-field :label="$t('Message')">
+          <o-field :label="$t('Message')">
-            <b-input
+            <o-input
               type="textarea"
               v-model="anonymousParticipation.message"
               minlength="10"
               :required="event.joinOptions === EventJoinOptions.RESTRICTED"
-            ></b-input>
+            ></o-input>
-          </b-field>
+          </o-field>
-          <b-field>
+          <o-field>
-            <b-checkbox v-model="anonymousParticipation.saveParticipation">
+            <o-checkbox v-model="anonymousParticipation.saveParticipation">
               <b>{{ $t("Remember my participation in this browser") }}</b>
               <p>
                 {{
@@ -58,21 +58,21 @@
                   )
                 }}
               </p>
-            </b-checkbox>
+            </o-checkbox>
-          </b-field>
+          </o-field>
-          <b-button
+          <o-button
             :disabled="sendingForm"
             type="is-primary"
             native-type="submit"
-            >{{ $t("Send email") }}</b-button
+            >{{ $t("Send email") }}</o-button
           >
           <div class="has-text-centered">
-            <b-button
+            <o-button
               native-type="button"
               tag="a"
               type="is-text"
               @click="$router.go(-1)"
-              >{{ $t("Back to previous page") }}</b-button
+              >{{ $t("Back to previous page") }}</o-button
             >
           </div>
         </form>
@@ -99,7 +99,7 @@
               )
             }}</span>
           </p>
-          <b-message type="is-warning" v-if="error">{{ error }}</b-message>
+          <o-message type="is-warning" v-if="error">{{ error }}</o-message>
           <p class="content">
             <i18n path="You may now close this window, or {return_to_event}.">
               <router-link
@@ -112,7 +112,7 @@
         </div>
       </div>
     </div>
-    <b-message type="is-danger" v-else-if="!$apollo.loading"
+    <o-message type="is-danger" v-else-if="!$apollo.loading"
       >{{
         $t(
           "Unable to load event for participation. The error details are provided below:"
@@ -121,7 +121,7 @@
       <details>
         <pre>{{ error }}</pre>
       </details>
-    </b-message>
+    </o-message>
   </section>
 </template>
 <script lang="ts">

js/src/components/Participation/UnloggedParticipation.vue

@@ -17,9 +17,9 @@
                   alt="Profile illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <p>
               <small>
@@ -32,7 +32,7 @@
                   )
                 }}
               </small>
-              <b-tooltip
+              <o-tooltip
                 type="is-dark"
                 :label="
                   $t(
@@ -40,8 +40,8 @@
                   )
                 "
               >
-                <b-icon size="is-small" icon="help-circle-outline" />
+                <o-icon size="is-small" icon="help-circle-outline" />
-              </b-tooltip>
+              </o-tooltip>
             </p>
           </div>
           <vertical-divider
@@ -65,9 +65,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </router-link>
             <a :href="`${event.url}/participate/without-account`" v-else>
               <figure class="image is-128x128">
@@ -76,9 +76,9 @@
                   alt="Privacy illustration"
                 />
               </figure>
-              <b-button type="is-primary">{{
+              <o-button type="is-primary">{{
                 $t("I don't have a Mobilizon account")
-              }}</b-button>
+              }}</o-button>
             </a>
             <p>
               <small>{{ $t("Participate using your email address") }}</small>
@@ -90,9 +90,9 @@
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" type="is-text" @click="$router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>

js/src/components/PictureUpload.vue

@@ -30,22 +30,22 @@
           )
         }}
       </p>
-      <b-field class="file is-primary">
+      <o-field class="file is-primary">
-        <b-upload @input="onFileChanged" :accept="accept" class="file-label">
+        <o-upload @input="onFileChanged" :accept="accept" class="file-label">
           <span class="file-cta">
-            <b-icon class="file-icon" icon="upload" />
+            <o-icon class="file-icon" icon="upload" />
             <span>{{ $t("Click to upload") }}</span>
           </span>
-        </b-upload>
+        </o-upload>
-      </b-field>
+      </o-field>
-      <b-button
+      <o-button
         type="is-text"
         v-if="imageSrc"
         @click="removeOrClearPicture"
         @keyup.enter="removeOrClearPicture"
       >
         {{ $t("Clear") }}
-      </b-button>
+      </o-button>
     </div>
   </div>
 </template>

js/src/components/Post/PostListItem.vue

@@ -14,7 +14,7 @@
         {{ post.title }}
       </h3>
       <p class="post-publication-date">
-        <b-icon icon="clock" />
+        <o-icon icon="clock" />
         <span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
           publishedAt | formatDateTimeString(undefined, false, "short")
         }}</span>
@@ -25,12 +25,12 @@
           })
         }}</span>
       </p>
-      <b-taglist v-if="post.tags.length > 0" style="display: inline">
+      <o-taglist v-if="post.tags.length > 0" style="display: inline">
-        <b-icon icon="tag" />
+        <o-icon icon="tag" />
-        <b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
+        <o-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</o-tag>
-      </b-taglist>
+      </o-taglist>
       <p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
-        <b-icon icon="account-edit" />
+        <o-icon icon="account-edit" />
         <i18n path="Published by {name}">
           <b class="has-text-weight-medium" slot="name">{{
             displayName(post.author)

js/src/components/Post/SharePostModal.vue

@@ -6,7 +6,7 @@
 
     <section class="modal-card-body is-flex" v-if="post">
       <div class="container has-text-centered">
-        <b-notification
+        <o-notification
           type="is-warning"
           v-if="post.visibility !== PostVisibility.PUBLIC"
           :closable="false"
@@ -16,23 +16,23 @@
               "This post is accessible only through it's link. Be careful where you post this link."
             )
           }}
-        </b-notification>
+        </o-notification>
-        <b-field :label="$t('Post URL')" label-for="post-url-text">
+        <o-field :label="$t('Post URL')" label-for="post-url-text">
-          <b-input
+          <o-input
             id="post-url-text"
             ref="postURLInput"
             :value="postURL"
             expanded
           />
           <p class="control">
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 type="is-primary"
                 icon-right="content-paste"
                 native-type="button"
@@ -40,16 +40,16 @@
                 @keyup.enter="copyURL"
                 :title="$t('Copy URL to clipboard')"
               />
-            </b-tooltip>
+            </o-tooltip>
           </p>
-        </b-field>
+        </o-field>
         <div>
           <a
             :href="twitterShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="Twitter"
-            ><b-icon icon="twitter" size="is-large" type="is-primary"
+            ><o-icon icon="twitter" size="is-large" type="is-primary"
           /></a>
           <a
             :href="mastodonShareUrl"
@@ -65,14 +65,14 @@
             target="_blank"
             rel="nofollow noopener"
             title="Facebook"
-            ><b-icon icon="facebook" size="is-large" type="is-primary"
+            ><o-icon icon="facebook" size="is-large" type="is-primary"
           /></a>
           <a
             :href="whatsAppShareUrl"
             target="_blank"
             rel="nofollow noopener"
             title="WhatsApp"
-            ><b-icon icon="whatsapp" size="is-large" type="is-primary"
+            ><o-icon icon="whatsapp" size="is-large" type="is-primary"
           /></a>
           <a
             :href="telegramShareUrl"
@@ -88,7 +88,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="LinkedIn"
-            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+            ><o-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
           <a
             :href="diasporaShareUrl"
@@ -104,7 +104,7 @@
             target="_blank"
             rel="nofollow noopener"
             title="Email"
-            ><b-icon icon="email" size="is-large" type="is-primary"
+            ><o-icon icon="email" size="is-large" type="is-primary"
           /></a>
         </div>
       </div>

js/src/components/Report/ReportCard.vue

@@ -11,7 +11,7 @@
           <figure class="image is-48x48" v-if="report.reported.avatar">
             <img alt="" :src="report.reported.avatar.url" />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content">
           <p class="title is-4">{{ report.reported.name }}</p>

js/src/components/Report/ReportModal.vue

@@ -10,7 +10,7 @@
     >
       <div class="media">
         <div class="media-left">
-          <b-icon icon="alert" type="is-warning" size="is-large" />
+          <o-icon icon="alert" type="is-warning" size="is-large" />
         </div>
         <div class="media-content">
           <div class="box" v-if="comment">
@@ -19,7 +19,7 @@
                 <figure class="image is-48x48" v-if="comment.actor.avatar">
                   <img :src="comment.actor.avatar.url" alt="" />
                 </figure>
-                <b-icon
+                <o-icon
                   class="media-left"
                   v-else
                   size="is-large"
@@ -45,16 +45,16 @@
           </p>
 
           <div class="control">
-            <b-field
+            <o-field
               :label="$t('Additional comments')"
               label-for="additonal-comments"
             >
-              <b-input
+              <o-input
                 v-model="content"
                 type="textarea"
                 id="additonal-comments"
               />
-            </b-field>
+            </o-field>
           </div>
 
           <div class="control" v-if="outsideDomain">
@@ -65,9 +65,9 @@
                 )
               }}
             </p>
-            <b-switch v-model="forward">{{
+            <o-switch v-model="forward">{{
               $t("Transfer to {outsideDomain}", { outsideDomain })
-            }}</b-switch>
+            }}</o-switch>
           </div>
         </div>
       </div>

js/src/components/Resource/FolderItem.vue

@@ -10,7 +10,7 @@
       }"
     >
       <div class="preview">
-        <b-icon icon="folder" size="is-large" />
+        <o-icon icon="folder" size="is-large" />
       </div>
       <div class="body">
         <h3>{{ resource.title }}</h3>

js/src/components/Resource/ResourceDropdown.vue

@@ -1,20 +1,20 @@
 <template>
-  <b-dropdown aria-role="list" position="is-bottom-left">
+  <o-dropdown aria-role="list" position="is-bottom-left">
-    <b-icon icon="dots-horizontal" slot="trigger" />
+    <o-icon icon="dots-horizontal" slot="trigger" />
 
-    <b-dropdown-item aria-role="listitem" @click="$emit('rename')">
+    <o-dropdown-item aria-role="listitem" @click="$emit('rename')">
-      <b-icon icon="pencil" />
+      <o-icon icon="pencil" />
       {{ $t("Rename") }}
-    </b-dropdown-item>
+    </o-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('move')">
+    <o-dropdown-item aria-role="listitem" @click="$emit('move')">
-      <b-icon icon="folder-move" />
+      <o-icon icon="folder-move" />
       {{ $t("Move") }}
-    </b-dropdown-item>
+    </o-dropdown-item>
-    <b-dropdown-item aria-role="listitem" @click="$emit('delete')">
+    <o-dropdown-item aria-role="listitem" @click="$emit('delete')">
-      <b-icon icon="delete" />
+      <o-icon icon="delete" />
       {{ $t("Delete") }}
-    </b-dropdown-item>
+    </o-dropdown-item>
-  </b-dropdown>
+  </o-dropdown>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";

js/src/components/Resource/ResourceItem.vue

@@ -8,7 +8,7 @@
             Object.keys(mapServiceTypeToIcon).includes(resource.type)
           "
         >
-          <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
+          <o-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
         </div>
         <div
           class="preview-image"
@@ -16,7 +16,7 @@
           :style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
         />
         <div class="preview-type" v-else>
-          <b-icon icon="link" size="is-large" />
+          <o-icon icon="link" size="is-large" />
         </div>
       </div>
       <div class="body">

js/src/components/Resource/ResourceSelector.vue

@@ -12,7 +12,7 @@
         v-if="resource.parent"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <o-icon icon="chevron-up" size="is-small" />
         </span>
         {{ $t("Parent folder") }}
       </a>
@@ -22,7 +22,7 @@
         v-else-if="resource.path.length > 1"
       >
         <span class="panel-icon">
-          <b-icon icon="chevron-up" size="is-small" />
+          <o-icon icon="chevron-up" size="is-small" />
         </span>
         {{ $t("Parent folder") }}
       </a>
@@ -38,12 +38,12 @@
           @click="goDown(element)"
         >
           <span class="panel-icon">
-            <b-icon
+            <o-icon
               icon="folder"
               size="is-small"
               v-if="element.type === 'folder'"
             />
-            <b-icon icon="link" size="is-small" v-else />
+            <o-icon icon="link" size="is-small" v-else />
           </span>
           {{ element.title }}
           <span v-if="element.id === initialResource.id">
@@ -58,7 +58,7 @@
       >
         {{ $t("No resources in this folder") }}
       </p>
-      <b-pagination
+      <o-pagination
         v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
         :total="resource.children.total"
         v-model="page"
@@ -71,10 +71,10 @@
       />
     </article>
     <div class="buttons">
-      <b-button type="is-text" @click="$emit('close-move-modal')">{{
+      <o-button type="is-text" @click="$emit('close-move-modal')">{{
         $t("Cancel")
-      }}</b-button>
+      }}</o-button>
-      <b-button
+      <o-button
         type="is-primary"
         @click="updateResource"
         :disabled="moveDisabled"
@@ -83,7 +83,7 @@
         </template>
         <template v-else
           >{{ $t("Move resource to {folder}", { folder: resource.title }) }}
-        </template></b-button
+        </template></o-button
       >
     </div>
   </div>

js/src/components/SearchField.vue

@@ -1,7 +1,7 @@
 <template>
   <label for="navSearchField">
     <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
-    <b-input
+    <o-input
       custom-class="searchField"
       id="navSearchField"
       icon="magnify"

js/src/components/Settings/NotificationsOnboarding.vue

@@ -15,7 +15,7 @@
         </p>
       </div>
       <div class="field">
-        <b-checkbox
+        <o-checkbox
           v-model="notificationOnDay"
           @input="updateSetting({ notificationOnDay })"
         >
@@ -27,7 +27,7 @@
               )
             }}
           </p>
-        </b-checkbox>
+        </o-checkbox>
       </div>
       <p>
         {{

js/src/components/Settings/SettingsOnboarding.vue

@@ -14,7 +14,7 @@
           }}
         </p>
         <div class="has-text-centered">
-          <b-select
+          <o-select
             :loading="!config || !loggedUser"
             v-model="locale"
             :placeholder="$t('Select a language')"
@@ -22,7 +22,7 @@
             <option v-for="(language, lang) in langs" :value="lang" :key="lang">
               {{ language }}
             </option>
-          </b-select>
+          </o-select>
         </div>
       </div>
 
@@ -39,12 +39,12 @@
               timezone,
             })
           }}
-          <b-message
+          <o-message
             type="is-danger"
             v-if="!$apollo.loading && !supportedTimezone"
           >
             {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
-          </b-message>
+          </o-message>
         </p>
       </div>
     </section>

js/src/components/Todo/CompactTodo.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-checkbox v-model="status" />
+      <o-checkbox v-model="status" />
       <router-link
         :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
         >{{ todo.title }}</router-link
       >
       <span class="details has-text-grey">
         <span v-if="todo.dueDate" class="due_date">
-          <b-icon icon="calendar" />
+          <o-icon icon="calendar" />
           {{ todo.dueDate | formatDateString }}
         </span>
         <span v-if="todo.assignedTo" class="assigned_to">
-          <b-icon icon="account" />
+          <o-icon icon="account" />
           {{ `@${todo.assignedTo.preferredUsername}` }}
           <span v-if="todo.assignedTo.domain">{{
             `@${todo.assignedTo.domain}`

js/src/components/Todo/FullTodo.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="card" v-if="todo">
     <div class="card-content">
-      <b-field :label="$t('Status')">
+      <o-field :label="$t('Status')">
-        <b-checkbox size="is-large" v-model="status" />
+        <o-checkbox size="is-large" v-model="status" />
-      </b-field>
+      </o-field>
-      <b-field :label="$t('Title')">
+      <o-field :label="$t('Title')">
-        <b-input v-model="title" />
+        <o-input v-model="title" />
-      </b-field>
+      </o-field>
-      <b-field :label="$t('Assigned to')">
+      <o-field :label="$t('Assigned to')">
         <actor-auto-complete v-model="assignedTo" />
-      </b-field>
+      </o-field>
-      <b-field :label="$t('Due on')">
+      <o-field :label="$t('Due on')">
-        <b-datepicker v-model="dueDate" />
+        <o-datepicker v-model="dueDate" />
-      </b-field>
+      </o-field>
     </div>
   </div>
 </template>

js/src/components/User/AuthProvider.vue

@@ -4,7 +4,7 @@
     v-if="isProviderSelected && oauthProvider.label === null"
     :href="`/auth/${oauthProvider.id}`"
   >
-    <b-icon :icon="oauthProvider.id" />
+    <o-icon :icon="oauthProvider.id" />
     <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
   >
   <a
@@ -12,7 +12,7 @@
     :href="`/auth/${oauthProvider.id}`"
     v-else-if="isProviderSelected"
   >
-    <b-icon icon="lock" />
+    <o-icon icon="lock" />
     <span>{{ oauthProvider.label }}</span>
   </a>
 </template>

js/src/components/Utils/EmptyContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="empty-content" :class="{ inline }" role="note">
-    <b-icon :icon="icon" size="is-large" />
+    <o-icon :icon="icon" size="is-large" />
     <h2 class="empty-content__title">
       <!-- @slot Mandatory title -->
       <slot />

js/src/components/Utils/RedirectWithAccount.vue

@@ -4,7 +4,7 @@
       <div class="container">
         <div class="columns is-vcentered">
           <div class="column has-text-centered">
-            <b-button
+            <o-button
               type="is-primary"
               size="is-medium"
               tag="router-link"
@@ -15,7 +15,7 @@
                   redirect: pathAfterLogin,
                 },
               }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</b-button
+              >{{ $t("Login on {instance}", { instance: host }) }}</o-button
             >
           </div>
           <vertical-divider :content="$t('Or')" />
@@ -26,29 +26,29 @@
             <p>{{ $t("Other software may also support this.") }}</p>
             <p>{{ sentence }}</p>
             <form @submit.prevent="redirectToInstance">
-              <b-field :label="$t('Your federated identity')">
+              <o-field :label="$t('Your federated identity')">
-                <b-field>
+                <o-field>
-                  <b-input
+                  <o-input
                     expanded
                     autocapitalize="none"
                     autocorrect="off"
                     v-model="remoteActorAddress"
                     :placeholder="$t('profile@instance')"
-                  ></b-input>
+                  ></o-input>
                   <p class="control">
                     <button class="button is-primary" type="submit">
                       {{ $t("Go") }}
                     </button>
                   </p>
-                </b-field>
+                </o-field>
-              </b-field>
+              </o-field>
             </form>
           </div>
         </div>
         <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+          <o-button tag="a" type="is-text" @click="$router.go(-1)">{{
             $t("Back to previous page")
-          }}</b-button>
+          }}</o-button>
         </div>
       </div>
     </div>

js/src/main.ts

@@ -1,9 +1,7 @@
-import Vue from "vue";
+import Vue, { createApp, provide } from "vue";
-import Buefy from "buefy";
-import Component from "vue-class-component";
 import VueScrollTo from "vue-scrollto";
-import VueMeta from "vue-meta";
+import { createMetaManager, plugin as metaPlugin } from "vue-meta";
-import VTooltip from "v-tooltip";
+import VTooltipPlugin from "v-tooltip";
 import VueAnnouncer from "@vue-a11y/announcer";
 import VueSkipTo from "@vue-a11y/skip-to";
 import App from "./App.vue";
@@ -11,34 +9,36 @@ import router from "./router";
 import { NotifierPlugin } from "./plugins/notifier";
 import filters from "./filters";
 import { i18n } from "./utils/i18n";
-import apolloProvider from "./vue-apollo";
+import apolloProvider, { apolloClient } from "./vue-apollo";
+import Oruga from "@oruga-ui/oruga-next";
 import "./registerServiceWorker";
+import { bulmaConfig } from "@oruga-ui/theme-bulma";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import VueI18n from "vue-i18n";
 
-Vue.config.productionTip = false;
-
-Vue.use(Buefy);
-Vue.use(NotifierPlugin);
 Vue.use(filters);
-Vue.use(VueMeta);
+const metaManager = createMetaManager();
-Vue.use(VueScrollTo);
-Vue.use(VTooltip);
-Vue.use(VueAnnouncer);
-Vue.use(VueSkipTo);
 
-// Register the router hooks with their names
+const app = createApp({
-Component.registerHooks([
+  setup() {
-  "beforeRouteEnter",
+    const { t } = VueI18n.useI18n();
-  "beforeRouteLeave",
+    provide(DefaultApolloClient, apolloClient);
-  "beforeRouteUpdate", // for vue-router 2.2+
+    return { $t: t };
-]);
+  },
-
+  ...App,
-/* eslint-disable no-new */
-new Vue({
-  router,
-  apolloProvider,
-  el: "#app",
-  template: "<App/>",
-  components: { App },
-  render: (h) => h(App),
-  i18n,
 });
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+router.app = app;
+app
+  .use(router)
+  .use(apolloProvider)
+  .use(Oruga, bulmaConfig)
+  .use(i18n)
+  .use(NotifierPlugin)
+  .use(VueAnnouncer)
+  .use(VueSkipTo)
+  .use(VTooltipPlugin)
+  .use(VueScrollTo)
+  .use(metaPlugin)
+  .mount("#app");

js/src/plugins/notifier.ts

@@ -1,39 +1,22 @@
 /* eslint-disable no-shadow */
 import VueInstance from "vue";
 import { ColorModifiers } from "buefy/types/helpers.d";
-import { Route, RawLocation } from "vue-router";
+import { App } from "vue";
 
-declare module "vue/types/vue" {
+declare module "vue" {
   interface Vue {
     $notifier: {
       success: (message: string) => void;
       error: (message: string) => void;
       info: (message: string) => void;
     };
-    beforeRouteEnter?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteLeave?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
-
-    beforeRouteUpdate?(
-      to: Route,
-      from: Route,
-      next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
-    ): void;
   }
 }
 
 export class Notifier {
   private readonly vue: typeof VueInstance;
 
-  constructor(vue: typeof VueInstance) {
+  constructor(vue: App) {
     this.vue = vue;
   }
 
@@ -50,7 +33,7 @@ export class Notifier {
   }
 
   private notification(message: string, type: ColorModifiers) {
-    this.vue.prototype.$buefy.notification.open({
+    this.vue.config.globalProperties.$buefy.notification.open({
       message,
       duration: 5000,
       position: "is-bottom-right",
@@ -61,6 +44,8 @@ export class Notifier {
 }
 
 /* eslint-disable */
-export function NotifierPlugin(vue: typeof VueInstance): void {
+export const NotifierPlugin = {
-  vue.prototype.$notifier = new Notifier(vue);
+  install(app: App) {
-}
+    app.config.globalProperties.$notifier = new Notifier(app);
+  },
+};

js/src/router/index.ts

@@ -1,5 +1,9 @@
-import Vue from "vue";
+import {
-import Router, { Route } from "vue-router";
+  createRouter,
+  createWebHistory,
+  RouteLocationNormalized,
+  RouteLocationNormalizedLoaded,
+} from "vue-router";
 import VueScrollTo from "vue-scrollto";
 import { PositionResult } from "vue-router/types/router.d";
 import { ImportedComponent } from "vue/types/options";
@@ -15,25 +19,23 @@ import { userRoutes } from "./user";
 import RouteName from "./name";
 import { AVAILABLE_LANGUAGES, i18n } from "@/utils/i18n";
 
-Vue.use(Router);
-
 function scrollBehavior(
-  to: Route,
+  to: RouteLocationNormalized,
-  from: Route,
+  from: RouteLocationNormalizedLoaded,
   savedPosition: any
-): PositionResult | undefined | null {
+): any {
   if (to.hash) {
     VueScrollTo.scrollTo(to.hash, 700);
     return {
       selector: to.hash,
-      offset: { x: 0, y: 10 },
+      offset: { left: 0, top: 10 },
     };
   }
   if (savedPosition) {
     return savedPosition;
   }
 
-  return { x: 0, y: 0 };
+  return { left: 0, top: 0 };
 }
 
 export const routes = [
@@ -200,10 +202,9 @@ routes.push({
   redirect: { name: RouteName.PAGE_NOT_FOUND },
 });
 
-const router = new Router({
+const router = createRouter({
   scrollBehavior,
-  mode: "history",
+  history: createWebHistory("/"),
-  base: "/",
   routes,
 });
 

js/src/shims-vue.d.ts

@@ -1,3 +1,5 @@
+import Oruga from "@oruga-ui/oruga-next";
+
 declare module "vue" {
   import { CompatVue } from "@vue/runtime-dom";
   const Vue: CompatVue;
@@ -5,9 +7,24 @@ declare module "vue" {
   export * from "@vue/runtime-dom";
 }
 
+// declare module "*.vue" {
+//   import type { DefineComponent } from "vue";
+//   const component: DefineComponent<{}, {}, any>;
+//   export default component;
+// }
+
+declare module "@vue/runtime-core" {
+  export interface ComponentCustomProperties {
+    $oruga: typeof Oruga;
+    $notifier;
+  }
+}
+
 declare module "*.svg" {
   import Vue, { VueConstructor } from "vue";
 
   const content: VueConstructor<Vue>;
   export default content;
 }
+
+declare module "@oruga-ui/theme-bulma";

js/src/utils/i18n.ts

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import VueI18n from "vue-i18n";
+import { createI18n } from "vue-i18n";
 import { DateFnsPlugin } from "@/plugins/dateFns";
 import en from "../i18n/en_US.json";
 import langs from "../i18n/langs.json";
@@ -39,9 +39,7 @@ export const locale =
 
 console.debug("chosen locale", locale);
 
-Vue.use(VueI18n);
+export const i18n = createI18n({
-
-export const i18n = new VueI18n({
   locale: DEFAULT_LOCALE, // set locale
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -49,6 +47,7 @@ export const i18n = new VueI18n({
   fallbackLocale: DEFAULT_LOCALE,
   formatFallbackMessages: true,
   pluralizationRules,
+  legacy: false,
 });
 
 console.debug("set VueI18n with default locale", DEFAULT_LOCALE);

js/src/variables.scss

@@ -1,6 +1,4 @@
-@import "~bulma/sass/utilities/functions.sass";
+@import "~bulma/sass/utilities/_all";
-@import "~bulma/sass/utilities/initial-variables.sass";
-@import "~bulma/sass/utilities/derived-variables.sass";
 
 $bleuvert: #1e7d97;
 $jaune: #ffd599;
@@ -139,3 +137,6 @@ $subtitle-sup-size: 15px;
 $breadcrumb-item-color: $primary;
 $checkbox-background-color: #fff;
 $title-color: $violet-3;
+
+@import "~bulma/bulma";
+@import "~@oruga-ui/theme-bulma/dist/scss/bulma";

js/src/views/About.vue

@@ -52,13 +52,13 @@
               )
             }}
           </p>
-          <b-button
+          <o-button
             icon-left="open-in-new"
             size="is-large"
             type="is-primary"
             tag="a"
             href="https://joinmobilizon.org"
-            >{{ $t("Learn more") }}</b-button
+            >{{ $t("Learn more") }}</o-button
           >
         </div>
       </div>
@@ -72,22 +72,22 @@
           <div class="columns">
             <div class="column" v-if="config && config.registrationsOpen">
               <h2 class="title">{{ $t("Register on this instance") }}</h2>
-              <b-button
+              <o-button
                 type="is-secondary"
                 size="is-large"
                 tag="router-link"
                 :to="{ name: RouteName.REGISTER }"
-                >{{ $t("Create an account") }}</b-button
+                >{{ $t("Create an account") }}</o-button
               >
             </div>
             <div class="column">
               <h2 class="title">{{ $t("Find another instance") }}</h2>
-              <b-button
+              <o-button
                 type="is-secondary"
                 size="is-large"
                 tag="a"
                 href="https://mobilizon.org"
-                >{{ $t("Pick an instance") }}</b-button
+                >{{ $t("Pick an instance") }}</o-button
               >
             </div>
           </div>

js/src/views/About/AboutInstance.vue

@@ -79,22 +79,22 @@
         <tr class="instance-feeds">
           <td>{{ $t("Instance feeds") }}</td>
           <td v-if="config.instanceFeeds.enabled" class="buttons">
-            <b-button
+            <o-button
               tag="a"
               size="is-small"
               icon-left="rss"
               href="/feed/instance/atom"
               target="_blank"
-              >{{ $t("RSS/Atom Feed") }}</b-button
+              >{{ $t("RSS/Atom Feed") }}</o-button
             >
 
-            <b-button
+            <o-button
               tag="a"
               size="is-small"
               icon-left="calendar-sync"
               href="/feed/instance/ics"
               target="_blank"
-              >{{ $t("ICS/WebCal Feed") }}</b-button
+              >{{ $t("ICS/WebCal Feed") }}</o-button
             >
           </td>
           <td v-else>{{ $t("Disabled") }}</td>

js/src/views/Account/IdentityPicker.vue

@@ -21,7 +21,7 @@
               :src="identity.avatar.url"
               alt=""
             />
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"

js/src/views/Account/IdentityPickerWrapper.vue

@@ -18,7 +18,7 @@
               alt=""
             />
           </figure>
-          <b-icon v-else size="is-large" icon="account-circle" />
+          <o-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="currentIdentity.name">
           <p class="is-4">{{ currentIdentity.name }}</p>
@@ -30,28 +30,28 @@
         <div class="media-content" v-else>
           {{ `@${currentIdentity.preferredUsername}` }}
         </div>
-        <b-button
+        <o-button
           type="is-text"
           v-if="identities.length > 1"
           @click="activateModal"
         >
           {{ $t("Change") }}
-        </b-button>
+        </o-button>
       </div>
     </div>
     <span v-else-if="currentIdentity" class="block" @click="activateModal">
       <figure class="image is-48x48" v-if="currentIdentity.avatar">
         <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
       </figure>
-      <b-icon v-else size="is-large" icon="account-circle" />
+      <o-icon v-else size="is-large" icon="account-circle" />
     </span>
-    <b-modal
+    <o-modal
       v-model="isComponentModalActive"
       has-modal-card
       :close-button-aria-label="$t('Close')"
     >
       <identity-picker v-model="currentIdentity" />
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 <script lang="ts">

js/src/views/Account/Profile.vue

@@ -22,25 +22,25 @@
           <vue-simple-markdown :source="person.summary"></vue-simple-markdown>
         </div>
 
-        <b-dropdown hoverable has-link aria-role="list">
+        <o-dropdown hoverable has-link aria-role="list">
           <button class="button is-primary" slot="trigger">
             {{ $t("Public feeds") }}
-            <b-icon icon="menu-down"></b-icon>
+            <o-icon icon="menu-down"></o-icon>
           </button>
 
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('atom', true)">
               {{ $t("Public RSS/Atom Feed") }}
             </a>
-          </b-dropdown-item>
+          </o-dropdown-item>
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('ics', true)">
               {{ $t("Public iCal Feed") }}
             </a>
-          </b-dropdown-item>
+          </o-dropdown-item>
-        </b-dropdown>
+        </o-dropdown>
 
-        <b-dropdown
+        <o-dropdown
           hoverable
           has-link
           aria-role="list"
@@ -48,20 +48,20 @@
         >
           <button class="button is-info" slot="trigger">
             {{ $t("Private feeds") }}
-            <b-icon icon="menu-down"></b-icon>
+            <o-icon icon="menu-down"></o-icon>
           </button>
 
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('atom', false)">
               {{ $t("RSS/Atom Feed") }}
             </a>
-          </b-dropdown-item>
+          </o-dropdown-item>
-          <b-dropdown-item aria-role="listitem">
+          <o-dropdown-item aria-role="listitem">
             <a :href="feedUrls('ics', false)">
               {{ $t("iCal Feed") }}
             </a>
-          </b-dropdown-item>
+          </o-dropdown-item>
-        </b-dropdown>
+        </o-dropdown>
         <a
           class="button"
           v-if="currentActor.id === person.id"

js/src/views/Account/Register.vue

@@ -16,28 +16,28 @@
           {{ $t("Now, create your first profile:") }}
         </p>
         <form v-if="!validationSent" @submit.prevent="submit">
-          <b-field :label="$t('Displayed nickname')">
+          <o-field :label="$t('Displayed nickname')">
-            <b-input
+            <o-input
               aria-required="true"
               required
               v-model="identity.name"
               @input="autoUpdateUsername($event)"
             />
-          </b-field>
+          </o-field>
 
-          <b-field
+          <o-field
             :label="$t('Username')"
             :type="errors.preferred_username ? 'is-danger' : null"
             :message="errors.preferred_username"
           >
-            <b-field
+            <o-field
               :message="
                 $t(
                   'Only alphanumeric lowercased characters and underscores are supported.'
                 )
               "
             >
-              <b-input
+              <o-input
                 aria-required="true"
                 required
                 expanded
@@ -53,8 +53,8 @@
               <p class="control">
                 <span class="button is-static">@{{ host }}</span>
               </p>
-            </b-field>
+            </o-field>
-          </b-field>
+          </o-field>
           <p class="description">
             {{
               $t(
@@ -63,14 +63,14 @@
             }}
           </p>
 
-          <b-field :label="$t('Short bio')">
+          <o-field :label="$t('Short bio')">
-            <b-input
+            <o-input
               type="textarea"
               maxlength="100"
               rows="2"
               v-model="identity.summary"
             />
-          </b-field>
+          </o-field>
 
           <p class="content">
             {{
@@ -81,18 +81,18 @@
           </p>
 
           <p class="control has-text-centered">
-            <b-button
+            <o-button
               type="is-primary"
               size="is-large"
               native-type="submit"
               :disabled="sendingValidation"
-              >{{ $t("Create my profile") }}</b-button
+              >{{ $t("Create my profile") }}</o-button
             >
           </p>
         </form>
 
         <div v-if="validationSent && !userAlreadyActivated">
-          <b-message type="is-success" :closable="false">
+          <o-message type="is-success" :closable="false">
             <h2 class="title">
               {{
                 $t("Your account is nearly ready, {username}", {
@@ -110,7 +110,7 @@
                 )
               }}
             </p>
-          </b-message>
+          </o-message>
         </div>
       </div>
     </div>
@@ -231,7 +231,7 @@ export default class Register extends mixins(identityEditionMixin) {
   transition: opacity 1s ease;
 }
 
-.avatar-enter,
+.avatar-enter-from,
 .avatar-leave-to {
   opacity: 0;
 }

js/src/views/Account/children/EditIdentity.vue

@@ -36,12 +36,12 @@
         class="picture-upload"
       />
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Display name')"
         label-for="identity-display-name"
       >
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="identity.name"
@@ -49,9 +49,9 @@
           id="identity-display-name"
           dir="auto"
         />
-      </b-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         custom-class="username-field"
         expanded
@@ -59,8 +59,8 @@
         label-for="identity-username"
         :message="message"
       >
-        <b-field expanded>
+        <o-field expanded>
-          <b-input
+          <o-input
             aria-required="true"
             required
             v-model="identity.preferredUsername"
@@ -74,50 +74,50 @@
           <p class="control">
             <span class="button is-static">@{{ getInstanceHost }}</span>
           </p>
-        </b-field>
+        </o-field>
-      </b-field>
+      </o-field>
 
-      <b-field
+      <o-field
         horizontal
         :label="$t('Description')"
         label-for="identity-summary"
       >
-        <b-input
+        <o-input
           type="textarea"
           dir="auto"
           aria-required="false"
           v-model="identity.summary"
           id="identity-summary"
         />
-      </b-field>
+      </o-field>
 
-      <b-notification
+      <o-notification
         type="is-danger"
         has-icon
         aria-close-label="Close notification"
         role="alert"
         :key="error"
         v-for="error in errors"
-        >{{ error }}</b-notification
+        >{{ error }}</o-notification
       >
 
-      <b-field class="submit">
+      <o-field class="submit">
         <div class="control">
           <button type="button" class="button is-primary" @click="submit()">
             {{ $t("Save") }}
           </button>
         </div>
-      </b-field>
+      </o-field>
 
-      <b-field class="delete-identity">
+      <o-field class="delete-identity">
-        <b-button
+        <o-button
           v-if="isUpdate"
           @click="openDeleteIdentityConfirmation()"
           type="is-text"
         >
           {{ $t("Delete this identity") }}
-        </b-button>
+        </o-button>
-      </b-field>
+      </o-field>
 
       <section v-if="isUpdate">
         <div class="setting-title">
@@ -136,14 +136,14 @@
             v-for="feedToken in identity.feedTokens"
             :key="feedToken.token"
           >
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.atom"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 icon-left="rss"
                 @click="
@@ -151,17 +151,17 @@
                 "
                 :href="tokenToURL(feedToken.token, 'atom')"
                 target="_blank"
-                >{{ $t("RSS/Atom Feed") }}</b-button
+                >{{ $t("RSS/Atom Feed") }}</o-button
               >
-            </b-tooltip>
+            </o-tooltip>
-            <b-tooltip
+            <o-tooltip
               :label="$t('URL copied to clipboard')"
               :active="showCopiedTooltip.ics"
               always
               type="is-success"
               position="is-left"
             >
-              <b-button
+              <o-button
                 tag="a"
                 @click="
                   (e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
@@ -169,23 +169,23 @@
                 icon-left="calendar-sync"
                 :href="tokenToURL(feedToken.token, 'ics')"
                 target="_blank"
-                >{{ $t("ICS/WebCal Feed") }}</b-button
+                >{{ $t("ICS/WebCal Feed") }}</o-button
               >
-            </b-tooltip>
+            </o-tooltip>
-            <b-button
+            <o-button
               icon-left="refresh"
               type="is-text"
               @click="openRegenerateFeedTokensConfirmation"
-              >{{ $t("Regenerate new links") }}</b-button
+              >{{ $t("Regenerate new links") }}</o-button
             >
           </div>
         </div>
         <div v-else>
-          <b-button
+          <o-button
             icon-left="refresh"
             type="is-text"
             @click="generateFeedTokens"
-            >{{ $t("Create new links") }}</b-button
+            >{{ $t("Create new links") }}</o-button
           >
         </div>
       </section>

js/src/views/Admin/AdminGroupProfile.vue

@@ -64,24 +64,24 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="confirmSuspendProfile"
         v-if="!group.suspended"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="unsuspendProfile"
         v-if="group.suspended"
         type="is-primary"
-        >{{ $t("Unsuspend") }}</b-button
+        >{{ $t("Unsuspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="refreshProfile"
         v-if="group.domain"
         type="is-primary"
         outlined
-        >{{ $t("Refresh profile") }}</b-button
+        >{{ $t("Refresh profile") }}</o-button
       >
     </div>
     <section>
@@ -92,7 +92,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.members.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -106,7 +106,7 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembersPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Member')"
           v-slot="props"
@@ -122,7 +122,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -143,55 +143,55 @@
               </div>
             </div>
           </article>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
+          </o-tag>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No members found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -201,7 +201,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.organizedEvents.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -215,29 +215,29 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
+            <o-tag type="is-info" v-if="props.row.draft">{{
               $t("Draft")
-            }}</b-tag>
+            }}</o-tag>
           </router-link>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No organized events found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -247,7 +247,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="group.posts.elements"
         :loading="$apollo.queries.group.loading"
         paginated
@@ -261,29 +261,29 @@
         :per-page="POSTS_PER_PAGE"
         @page-change="onPostsPageChange"
       >
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
           >
             {{ props.row.title }}
-            <b-tag type="is-info" v-if="props.row.draft">{{
+            <o-tag type="is-info" v-if="props.row.draft">{{
               $t("Draft")
-            }}</b-tag>
+            }}</o-tag>
           </router-link>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column
+        <o-table-column
           field="publishAt"
           :label="$t('Publication date')"
           v-slot="props"
         >
           {{ props.row.publishAt | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="bullhorn" :inline="true">
             {{ $t("No posts found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
 </template>

js/src/views/Admin/AdminProfile.vue

@@ -48,17 +48,17 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="suspendProfile"
         v-if="person.domain && !person.suspended"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
-      <b-button
+      <o-button
         @click="unsuspendProfile"
         v-if="person.domain && person.suspended"
         type="is-primary"
-        >{{ $t("Unsuspend") }}</b-button
+        >{{ $t("Unsuspend") }}</o-button
       >
     </div>
     <section>
@@ -69,7 +69,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="person.organizedEvents.elements"
         :loading="$apollo.queries.person.loading"
         paginated
@@ -83,26 +83,26 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No organized events listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -112,7 +112,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="
           person.participations.elements.map(
             (participation) => participation.event
@@ -130,26 +130,26 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onParticipationsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="beginsOn"
           :label="$t('Begins on')"
           v-slot="props"
         >
           {{ props.row.beginsOn | formatDateTimeString }}
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="title" :label="$t('Title')" v-slot="props">
+        <o-table-column field="title" :label="$t('Title')" v-slot="props">
           <router-link
             :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
           >
             {{ props.row.title }}
           </router-link>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No participations listed") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
     <section>
       <h2 class="subtitle">
@@ -159,7 +159,7 @@
           })
         }}
       </h2>
-      <b-table
+      <o-table
         :data="person.memberships.elements"
         :loading="$apollo.loading"
         paginated
@@ -173,7 +173,7 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembershipsPageChange"
       >
-        <b-table-column
+        <o-table-column
           field="parent.preferredUsername"
           :label="$t('Group')"
           v-slot="props"
@@ -189,7 +189,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -207,55 +207,55 @@
               </div>
             </div>
           </article>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
+          </o-tag>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No memberships found") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
   </div>
 </template>

js/src/views/Admin/AdminUserProfile.vue

@@ -61,11 +61,11 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button
+      <o-button
         @click="deleteAccount"
         v-if="!user.disabled"
         type="is-primary"
-        >{{ $t("Suspend") }}</b-button
+        >{{ $t("Suspend") }}</o-button
       >
     </div>
   </div>

js/src/views/Admin/Follows.vue

@@ -34,10 +34,10 @@
             :to="{ name: RouteName.RELAY_FOLLOWINGS }"
           >
             <a>
-              <b-icon icon="inbox-arrow-down"></b-icon>
+              <o-icon icon="inbox-arrow-down"></o-icon>
               <span>
                 {{ $t("Followings") }}
-                <b-tag rounded>{{ relayFollowings.total }}</b-tag>
+                <o-tag rounded>{{ relayFollowings.total }}</o-tag>
               </span>
             </a>
           </router-link>
@@ -47,10 +47,10 @@
             :to="{ name: RouteName.RELAY_FOLLOWERS }"
           >
             <a>
-              <b-icon icon="inbox-arrow-up"></b-icon>
+              <o-icon icon="inbox-arrow-up"></o-icon>
               <span>
                 {{ $t("Followers") }}
-                <b-tag rounded>{{ relayFollowers.total }}</b-tag>
+                <o-tag rounded>{{ relayFollowers.total }}</o-tag>
               </span>
             </a>
           </router-link>

js/src/views/Admin/GroupProfiles.vue

@@ -22,9 +22,9 @@
       >
     </div>
     <div v-if="groups">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
+      <o-switch v-model="local">{{ $t("Local") }}</o-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
+      <o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
-      <b-table
+      <o-table
         :data="groups.elements"
         :loading="$apollo.queries.groups.loading"
         paginated
@@ -41,13 +41,13 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column
+        <o-table-column
           field="preferredUsername"
           :label="$t('Username')"
           searchable
         >
           <template #searchable="props">
-            <b-input
+            <o-input
               :aria-label="$t('Filter')"
               v-model="props.filters.preferredUsername"
               :placeholder="$t('Filter')"
@@ -81,11 +81,11 @@
               </article>
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
 
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
+        <o-table-column field="domain" :label="$t('Domain')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               :aria-label="$t('Filter')"
               v-model="props.filters.domain"
               :placeholder="$t('Filter')"
@@ -95,13 +95,13 @@
           <template v-slot:default="props">
             {{ props.row.domain }}
           </template>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account-group" :inline="true">
             {{ $t("No group matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>

js/src/views/Admin/Profiles.vue

@@ -15,9 +15,9 @@
       </ul>
     </nav>
     <div v-if="persons">
-      <b-switch v-model="local">{{ $t("Local") }}</b-switch>
+      <o-switch v-model="local">{{ $t("Local") }}</o-switch>
-      <b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
+      <o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
-      <b-table
+      <o-table
         :data="persons.elements"
         :loading="$apollo.queries.persons.loading"
         paginated
@@ -34,13 +34,13 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column
+        <o-table-column
           field="preferredUsername"
           :label="$t('Username')"
           searchable
         >
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.preferredUsername"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -74,11 +74,11 @@
               </article>
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
 
-        <b-table-column field="domain" :label="$t('Domain')" searchable>
+        <o-table-column field="domain" :label="$t('Domain')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.domain"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -88,13 +88,13 @@
           <template v-slot:default="props">
             {{ props.row.domain }}
           </template>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" :inline="true">
             {{ $t("No profile matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>

js/src/views/Admin/Settings.vue

@@ -16,9 +16,9 @@
     </nav>
     <section v-if="settingsToWrite">
       <form @submit.prevent="updateSettings">
-        <b-field :label="$t('Instance Name')" label-for="instance-name">
+        <o-field :label="$t('Instance Name')" label-for="instance-name">
-          <b-input v-model="settingsToWrite.instanceName" id="instance-name" />
+          <o-input v-model="settingsToWrite.instanceName" id="instance-name" />
-        </b-field>
+        </o-field>
         <div class="field">
           <label class="label has-help" for="instance-description">{{
             $t("Instance Short Description")
@@ -30,7 +30,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceDescription"
             rows="2"
@@ -48,7 +48,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             v-model="settingsToWrite.instanceSlogan"
             :placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
             id="instance-slogan"
@@ -61,16 +61,16 @@
           <small>
             {{ $t("Can be an email or a link, or just plain text.") }}
           </small>
-          <b-input v-model="settingsToWrite.contact" id="instance-contact" />
+          <o-input v-model="settingsToWrite.contact" id="instance-contact" />
         </div>
-        <b-field :label="$t('Allow registrations')">
+        <o-field :label="$t('Allow registrations')">
-          <b-switch v-model="settingsToWrite.registrationsOpen">
+          <o-switch v-model="settingsToWrite.registrationsOpen">
             <p class="content" v-if="settingsToWrite.registrationsOpen">
               {{ $t("Registration is allowed, anyone can register.") }}
             </p>
             <p class="content" v-else>{{ $t("Registration is closed.") }}</p>
-          </b-switch>
+          </o-switch>
-        </b-field>
+        </o-field>
         <div class="field">
           <label class="label has-help" for="instance-languages">{{
             $t("Instance languages")
@@ -78,7 +78,7 @@
           <small>
             {{ $t("Main languages you/your moderators speak") }}
           </small>
-          <b-taginput
+          <o-taginput
             v-model="instanceLanguages"
             :data="filteredLanguages"
             autocomplete
@@ -90,7 +90,7 @@
             id="instance-languages"
           >
             <template slot="empty">{{ $t("No languages found") }}</template>
-          </b-taginput>
+          </o-taginput>
         </div>
         <div class="field">
           <label class="label has-help" for="instance-long-description">{{
@@ -103,7 +103,7 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceLongDescription"
             rows="4"
@@ -121,43 +121,43 @@
               )
             }}
           </small>
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceRules"
             id="instance-rules"
           />
         </div>
-        <b-field :label="$t('Instance Terms Source')">
+        <o-field :label="$t('Instance Terms Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
               <fieldset>
                 <legend>
                   {{ $t("Choose the source of the instance's Terms") }}
                 </legend>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.DEFAULT"
-                    >{{ $t("Default Mobilizon terms") }}</b-radio
+                    >{{ $t("Default Mobilizon terms") }}</o-radio
                   >
-                </b-field>
+                </o-field>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
+                    >{{ $t("Custom URL") }}</o-radio
                   >
-                </b-field>
+                </o-field>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instanceTermsType"
                     name="instanceTermsType"
                     :native-value="InstanceTermsType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
+                    >{{ $t("Custom text") }}</o-radio
                   >
-                </b-field>
+                </o-field>
               </fieldset>
             </div>
             <div class="column">
@@ -223,60 +223,60 @@
               </div>
             </div>
           </div>
-        </b-field>
+        </o-field>
-        <b-field
+        <o-field
           :label="$t('Instance Terms URL')"
           label-for="instanceTermsUrl"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
         >
-          <b-input
+          <o-input
             type="URL"
             v-model="settingsToWrite.instanceTermsUrl"
             id="instanceTermsUrl"
           />
-        </b-field>
+        </o-field>
-        <b-field
+        <o-field
           :label="$t('Instance Terms')"
           label-for="instanceTerms"
           v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
         >
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instanceTerms"
             id="instanceTerms"
           />
-        </b-field>
+        </o-field>
-        <b-field :label="$t('Instance Privacy Policy Source')">
+        <o-field :label="$t('Instance Privacy Policy Source')">
           <div class="columns">
             <div class="column is-one-third-desktop">
               <fieldset>
                 <legend>
                   {{ $t("Choose the source of the instance's Privacy Policy") }}
                 </legend>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.DEFAULT"
-                    >{{ $t("Default Mobilizon privacy policy") }}</b-radio
+                    >{{ $t("Default Mobilizon privacy policy") }}</o-radio
                   >
-                </b-field>
+                </o-field>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.URL"
-                    >{{ $t("Custom URL") }}</b-radio
+                    >{{ $t("Custom URL") }}</o-radio
                   >
-                </b-field>
+                </o-field>
-                <b-field>
+                <o-field>
-                  <b-radio
+                  <o-radio
                     v-model="settingsToWrite.instancePrivacyPolicyType"
                     name="instancePrivacyType"
                     :native-value="InstancePrivacyType.CUSTOM"
-                    >{{ $t("Custom text") }}</b-radio
+                    >{{ $t("Custom text") }}</o-radio
                   >
-                </b-field>
+                </o-field>
               </fieldset>
             </div>
             <div class="column">
@@ -339,8 +339,8 @@
               </div>
             </div>
           </div>
-        </b-field>
+        </o-field>
-        <b-field
+        <o-field
           :label="$t('Instance Privacy Policy URL')"
           label-for="instancePrivacyPolicyUrl"
           v-if="
@@ -348,13 +348,13 @@
             InstancePrivacyType.URL
           "
         >
-          <b-input
+          <o-input
             type="URL"
             v-model="settingsToWrite.instancePrivacyPolicyUrl"
             id="instancePrivacyPolicyUrl"
           />
-        </b-field>
+        </o-field>
-        <b-field
+        <o-field
           :label="$t('Instance Privacy Policy')"
           label-for="instancePrivacyPolicy"
           v-if="
@@ -362,15 +362,15 @@
             InstancePrivacyType.CUSTOM
           "
         >
-          <b-input
+          <o-input
             type="textarea"
             v-model="settingsToWrite.instancePrivacyPolicy"
             id="instancePrivacyPolicy"
           />
-        </b-field>
+        </o-field>
-        <b-button native-type="submit" type="is-primary">{{
+        <o-button native-type="submit" type="is-primary">{{
           $t("Save")
-        }}</b-button>
+        }}</o-button>
       </form>
     </section>
   </div>

js/src/views/Admin/Users.vue

@@ -15,7 +15,7 @@
       </ul>
     </nav>
     <div v-if="users">
-      <b-table
+      <o-table
         :data="users.elements"
         :loading="$apollo.queries.users.loading"
         paginated
@@ -34,12 +34,12 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column field="id" width="40" numeric v-slot="props">
+        <o-table-column field="id" width="40" numeric v-slot="props">
           {{ props.row.id }}
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="email" :label="$t('Email')" searchable>
+        <o-table-column field="email" :label="$t('Email')" searchable>
           <template #searchable="props">
-            <b-input
+            <o-input
               v-model="props.filters.email"
               :aria-label="$t('Filter')"
               :placeholder="$t('Filter')"
@@ -58,8 +58,8 @@
               {{ props.row.email }}
             </router-link>
           </template>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column
+        <o-table-column
           field="confirmedAt"
           :label="$t('Confirmed at')"
           :centered="true"
@@ -71,15 +71,15 @@
           <template v-else>
             {{ $t("Not confirmed") }}
           </template>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column
+        <o-table-column
           field="locale"
           :label="$t('Language')"
           :centered="true"
           v-slot="props"
         >
           {{ getLanguageNameForCode(props.row.locale) }}
-        </b-table-column>
+        </o-table-column>
 
         <template #detail="props">
           <router-link
@@ -93,7 +93,7 @@
                 <p class="image is-32x32" v-if="actor.avatar">
                   <img :src="actor.avatar.url" />
                 </p>
-                <b-icon v-else size="is-medium" icon="account-circle" />
+                <o-icon v-else size="is-medium" icon="account-circle" />
               </figure>
               <div class="media-content">
                 <div class="content">
@@ -105,7 +105,7 @@
             </article>
           </router-link>
         </template>
-      </b-table>
+      </o-table>
     </div>
   </div>
 </template>

js/src/views/Discussions/Create.vue

@@ -35,28 +35,28 @@
           >
         </li>
       </ul>
-      <b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
+      <o-skeleton v-else-if="$apollo.loading" :animated="animated"></o-skeleton>
     </nav>
     <h1 class="title">{{ $t("Create a discussion") }}</h1>
 
     <form @submit.prevent="createDiscussion">
-      <b-field
+      <o-field
         :label="$t('Title')"
         label-for="discussion-title"
         :message="errors.title"
         :type="errors.title ? 'is-danger' : undefined"
       >
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="discussion.title"
           id="discussion-title"
         />
-      </b-field>
+      </o-field>
 
-      <b-field :label="$t('Text')">
+      <o-field :label="$t('Text')">
         <editor v-model="discussion.text" :aria-label="$t('Comment body')" />
-      </b-field>
+      </o-field>
 
       <button class="button is-primary" type="submit">
         {{ $t("Create the discussion") }}

js/src/views/Discussions/Discussion.vue

@@ -18,7 +18,7 @@
             }"
             >{{ discussion.actor.name }}</router-link
           >
-          <b-skeleton v-else-if="$apollo.loading" animated />
+          <o-skeleton v-else-if="$apollo.loading" animated />
         </li>
         <li>
           <router-link
@@ -31,7 +31,7 @@
             }"
             >{{ $t("Discussions") }}</router-link
           >
-          <b-skeleton animated v-else-if="$apollo.loading" />
+          <o-skeleton animated v-else-if="$apollo.loading" />
         </li>
         <li class="is-active">
           <router-link
@@ -41,15 +41,15 @@
         </li>
       </ul>
     </nav>
-    <b-message v-if="error" type="is-danger">
+    <o-message v-if="error" type="is-danger">
       {{ error }}
-    </b-message>
+    </o-message>
     <section>
       <div class="discussion-title" dir="auto">
         <h1 class="title" v-if="discussion.title && !editTitleMode">
           {{ discussion.title }}
         </h1>
-        <b-button
+        <o-button
           icon-right="pencil"
           size="is-small"
           :title="$t('Update discussion title')"
@@ -66,8 +66,8 @@
             }
           "
         >
-        </b-button>
+        </o-button>
-        <b-skeleton
+        <o-skeleton
           v-else-if="!editTitleMode && $apollo.loading"
           height="50px"
           animated
@@ -77,21 +77,21 @@
           @submit.prevent="updateDiscussion"
           class="title-edit"
         >
-          <b-field :label="$t('Title')" label-for="discussion-title">
+          <o-field :label="$t('Title')" label-for="discussion-title">
-            <b-input
+            <o-input
               :value="discussion.title"
               v-model="newTitle"
               id="discussion-title"
             />
-          </b-field>
+          </o-field>
           <div class="buttons">
-            <b-button
+            <o-button
               type="is-primary"
               native-type="submit"
               icon-right="check"
               :title="$t('Update discussion title')"
             />
-            <b-button
+            <o-button
               @click="
                 () => {
                   editTitleMode = false;
@@ -101,12 +101,12 @@
               icon-right="close"
               :title="$t('Cancel discussion title edition')"
             />
-            <b-button
+            <o-button
               @click="openDeleteDiscussionConfirmation"
               type="is-danger"
               native-type="button"
               icon-left="delete"
-              >{{ $t("Delete conversation") }}</b-button
+              >{{ $t("Delete conversation") }}</o-button
             >
           </div>
         </form>
@@ -118,20 +118,20 @@
         @update-comment="updateComment"
         @delete-comment="deleteComment"
       />
-      <b-button
+      <o-button
         v-if="discussion.comments.elements.length < discussion.comments.total"
         @click="loadMoreComments"
-        >{{ $t("Fetch more") }}</b-button
+        >{{ $t("Fetch more") }}</o-button
       >
       <form @submit.prevent="reply" v-if="!error">
-        <b-field :label="$t('Text')">
+        <o-field :label="$t('Text')">
           <editor v-model="newComment" :aria-label="$t('Comment body')" />
-        </b-field>
+        </o-field>
-        <b-button
+        <o-button
           native-type="submit"
           :disabled="['<p></p>', ''].includes(newComment)"
           type="is-primary"
-          >{{ $t("Reply") }}</b-button
+          >{{ $t("Reply") }}</o-button
         >
       </form>
     </section>

js/src/views/Discussions/DiscussionsList.vue

@@ -35,13 +35,13 @@
           )
         }}
       </p>
-      <b-button
+      <o-button
         tag="router-link"
         :to="{
           name: RouteName.CREATE_DISCUSSION,
           params: { preferredUsername },
         }"
-        >{{ $t("New discussion") }}</b-button
+        >{{ $t("New discussion") }}</o-button
       >
       <div v-if="group.discussions.elements.length > 0">
         <discussion-list-item
@@ -49,7 +49,7 @@
           v-for="discussion in group.discussions.elements"
           :key="discussion.id"
         />
-        <b-pagination
+        <o-pagination
           class="discussion-pagination"
           :total="group.discussions.total"
           v-model="page"
@@ -59,7 +59,7 @@
           :aria-page-label="$t('Page')"
           :aria-current-label="$t('Current page')"
         >
-        </b-pagination>
+        </o-pagination>
       </div>
       <empty-content v-else icon="chat">
         {{ $t("There's no discussions yet") }}

js/src/views/Event/Edit.vue

@@ -16,13 +16,13 @@
           :defaultImage="event.picture"
         />
 
-        <b-field
+        <o-field
           :label="$t('Title')"
           label-for="title"
           :type="checkTitleLength[0]"
           :message="checkTitleLength[1]"
         >
-          <b-input
+          <o-input
             size="is-large"
             aria-required="true"
             required
@@ -30,17 +30,17 @@
             id="title"
             dir="auto"
           />
-        </b-field>
+        </o-field>
 
         <tag-input v-model="event.tags" />
 
-        <b-field
+        <o-field
           horizontal
           :label="$t('Starts on…')"
           class="begins-on-field"
           label-for="begins-on-field"
         >
-          <b-datetimepicker
+          <o-datetimepicker
             class="datepicker starts-on"
             :placeholder="$t('Type or select a date…')"
             icon="calendar-today"
@@ -55,11 +55,11 @@
               'aria-previous-label': $t('Previous month'),
             }"
           >
-          </b-datetimepicker>
+          </o-datetimepicker>
-        </b-field>
+        </o-field>
 
-        <b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
+        <o-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
-          <b-datetimepicker
+          <o-datetimepicker
             class="datepicker ends-on"
             :placeholder="$t('Type or select a date…')"
             icon="calendar-today"
@@ -75,12 +75,12 @@
               'aria-previous-label': $t('Previous month'),
             }"
           >
-          </b-datetimepicker>
+          </o-datetimepicker>
-        </b-field>
+        </o-field>
 
-        <b-button type="is-text" @click="dateSettingsIsOpen = true">
+        <o-button type="is-text" @click="dateSettingsIsOpen = true">
           {{ $t("Date parameters") }}
-        </b-button>
+        </o-button>
 
         <div class="address">
           <full-address-auto-complete
@@ -88,9 +88,9 @@
             :user-timezone="userActualTimezone"
             :disabled="isOnline"
           />
-          <b-switch class="is-online" v-model="isOnline">{{
+          <o-switch class="is-online" v-model="isOnline">{{
             $t("The event is fully online")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="field">
@@ -101,25 +101,25 @@
           />
         </div>
 
-        <b-field :label="$t('Website / URL')" label-for="website-url">
+        <o-field :label="$t('Website / URL')" label-for="website-url">
-          <b-input
+          <o-input
             icon="link"
             type="url"
             v-model="event.onlineAddress"
             placeholder="URL"
             id="website-url"
           />
-        </b-field>
+        </o-field>
 
         <subtitle>{{ $t("Organizers") }}</subtitle>
 
         <div v-if="config && config.features.groups && organizerActor.id">
-          <b-field>
+          <o-field>
             <organizer-picker-wrapper
               v-model="organizerActor"
               :contacts.sync="event.contacts"
             />
-          </b-field>
+          </o-field>
           <p v-if="!attributedToAGroup && organizerActorEqualToCurrentActor">
             {{
               $t("The event will show as attributed to your personal profile.")
@@ -173,28 +173,28 @@
             }}
           </legend>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="event.visibility"
               name="eventVisibility"
               :native-value="EventVisibility.PUBLIC"
-              >{{ $t("Visible everywhere on the web (public)") }}</b-radio
+              >{{ $t("Visible everywhere on the web (public)") }}</o-radio
             >
           </div>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="event.visibility"
               name="eventVisibility"
               :native-value="EventVisibility.UNLISTED"
-              >{{ $t("Only accessible through link (private)") }}</b-radio
+              >{{ $t("Only accessible through link (private)") }}</o-radio
             >
           </div>
         </fieldset>
         <!-- <div class="field">
-          <b-radio v-model="event.visibility"
+          <o-radio v-model="event.visibility"
                    name="eventVisibility"
                    :native-value="EventVisibility.PRIVATE">
              {{ $t('Page limited to my group (asks for auth)') }}
-          </b-radio>
+          </o-radio>
         </div>-->
 
         <div
@@ -202,7 +202,7 @@
           v-if="config && config.anonymous.participation.allowed"
         >
           <label class="label">{{ $t("Anonymous participations") }}</label>
-          <b-switch v-model="eventOptions.anonymousParticipation">
+          <o-switch v-model="eventOptions.anonymousParticipation">
             {{
               $t("I want to allow people to participate without an account.")
             }}
@@ -219,26 +219,26 @@
                 )
               }}
             </small>
-          </b-switch>
+          </o-switch>
         </div>
 
         <div class="field">
           <label class="label">{{ $t("Participation approval") }}</label>
-          <b-switch v-model="needsApproval">{{
+          <o-switch v-model="needsApproval">{{
             $t("I want to approve every participation request")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="field">
           <label class="label">{{ $t("Number of places") }}</label>
-          <b-switch v-model="limitedPlaces">{{
+          <o-switch v-model="limitedPlaces">{{
             $t("Limited number of places")
-          }}</b-switch>
+          }}</o-switch>
         </div>
 
         <div class="box" v-if="limitedPlaces">
-          <b-field :label="$t('Number of places')" label-for="number-of-places">
+          <o-field :label="$t('Number of places')" label-for="number-of-places">
-            <b-numberinput
+            <o-numberinput
               controls-position="compact"
               :aria-minus-label="$t('Decrease')"
               :aria-plus-label="$t('Increase')"
@@ -246,19 +246,19 @@
               v-model="eventOptions.maximumAttendeeCapacity"
               id="number-of-places"
             />
-          </b-field>
+          </o-field>
           <!--
-          <b-field>
+          <o-field>
-            <b-switch v-model="eventOptions.showRemainingAttendeeCapacity">
+            <o-switch v-model="eventOptions.showRemainingAttendeeCapacity">
               {{ $t('Show remaining number of places') }}
-            </b-switch>
+            </o-switch>
-          </b-field>
+          </o-field>
 
-          <b-field>
+          <o-field>
-            <b-switch v-model="eventOptions.showParticipationPrice">
+            <o-switch v-model="eventOptions.showParticipationPrice">
               {{ $t('Display participation price') }}
-            </b-switch>
+            </o-switch>
-          </b-field>-->
+          </o-field>-->
         </div>
 
         <subtitle>{{ $t("Public comment moderation") }}</subtitle>
@@ -266,28 +266,28 @@
         <fieldset>
           <legend>{{ $t("Who can post a comment?") }}</legend>
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="eventOptions.commentModeration"
               name="commentModeration"
               :native-value="CommentModeration.ALLOW_ALL"
-              >{{ $t("Allow all comments from users with accounts") }}</b-radio
+              >{{ $t("Allow all comments from users with accounts") }}</o-radio
             >
           </div>
 
           <!--          <div class="field">-->
-          <!--            <b-radio v-model="eventOptions.commentModeration"-->
+          <!--            <o-radio v-model="eventOptions.commentModeration"-->
           <!--                     name="commentModeration"-->
           <!--                     :native-value="CommentModeration.MODERATED">-->
           <!--              {{ $t('Moderated comments (shown after approval)') }}-->
-          <!--            </b-radio>-->
+          <!--            </o-radio>-->
           <!--          </div>-->
 
           <div class="field">
-            <b-radio
+            <o-radio
               v-model="eventOptions.commentModeration"
               name="commentModeration"
               :native-value="CommentModeration.CLOSED"
-              >{{ $t("Close comments for all (except for admins)") }}</b-radio
+              >{{ $t("Close comments for all (except for admins)") }}</o-radio
             >
           </div>
         </fieldset>
@@ -302,44 +302,44 @@
               )
             }}
           </legend>
-          <b-field class="event__status__field">
+          <o-field class="event__status__field">
-            <b-radio-button
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-warning"
               :native-value="EventStatus.TENTATIVE"
             >
-              <b-icon icon="calendar-question" />
+              <o-icon icon="calendar-question" />
               {{ $t("Tentative: Will be confirmed later") }}
-            </b-radio-button>
+            </o-radio-button>
-            <b-radio-button
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-success"
               :native-value="EventStatus.CONFIRMED"
             >
-              <b-icon icon="calendar-check" />
+              <o-icon icon="calendar-check" />
               {{ $t("Confirmed: Will happen") }}
-            </b-radio-button>
+            </o-radio-button>
-            <b-radio-button
+            <o-radio-button
               v-model="event.status"
               name="status"
               type="is-danger"
               :native-value="EventStatus.CANCELLED"
             >
-              <b-icon icon="calendar-remove" />
+              <o-icon icon="calendar-remove" />
               {{ $t("Cancelled: Won't happen") }}
-            </b-radio-button>
+            </o-radio-button>
-          </b-field>
+          </o-field>
         </fieldset>
       </form>
     </div>
     <div class="container section" v-else>
-      <b-message type="is-danger">
+      <o-message type="is-danger">
         {{ $t("Only group moderators can create, edit and delete events.") }}
-      </b-message>
+      </o-message>
     </div>
-    <b-modal
+    <o-modal
       v-model="dateSettingsIsOpen"
       has-modal-card
       trap-focus
@@ -358,8 +358,8 @@
                 )
               }}
             </p>
-            <b-field :label="$t('Timezone')" label-for="timezone" expanded>
+            <o-field :label="$t('Timezone')" label-for="timezone" expanded>
-              <b-select
+              <o-select
                 :placeholder="$t('Select a timezone')"
                 :loading="!config"
                 v-model="timezone"
@@ -378,25 +378,25 @@
                     {{ sanitizeTimezone(timezone) }}
                   </option>
                 </optgroup>
-              </b-select>
+              </o-select>
-              <b-button
+              <o-button
                 :disabled="!timezone"
                 @click="timezone = null"
                 class="reset-area"
                 icon-left="close"
                 :title="$t('Clear timezone field')"
               />
-            </b-field>
+            </o-field>
-            <b-field :label="$t('Event page settings')">
+            <o-field :label="$t('Event page settings')">
-              <b-switch v-model="eventOptions.showStartTime">{{
+              <o-switch v-model="eventOptions.showStartTime">{{
                 $t("Show the time when the event begins")
-              }}</b-switch>
+              }}</o-switch>
-            </b-field>
+            </o-field>
-            <b-field>
+            <o-field>
-              <b-switch v-model="eventOptions.showEndTime">{{
+              <o-switch v-model="eventOptions.showEndTime">{{
                 $t("Show the time when the event ends")
-              }}</b-switch>
+              }}</o-switch>
-            </b-field>
+            </o-field>
           </section>
           <footer class="modal-card-foot">
             <button
@@ -409,7 +409,7 @@
           </footer>
         </div>
       </form>
-    </b-modal>
+    </o-modal>
     <span ref="bottomObserver" />
     <nav
       role="navigation"
@@ -427,22 +427,22 @@
           </div>
           <div class="navbar-end">
             <span class="navbar-item">
-              <b-button type="is-text" @click="confirmGoBack">{{
+              <o-button type="is-text" @click="confirmGoBack">{{
                 $t("Cancel")
-              }}</b-button>
+              }}</o-button>
             </span>
             <!-- If an event has been published we can't make it draft anymore -->
             <span class="navbar-item" v-if="event.draft === true">
-              <b-button
+              <o-button
                 type="is-primary"
                 outlined
                 @click="createOrUpdateDraft"
                 :disabled="saving"
-                >{{ $t("Save draft") }}</b-button
+                >{{ $t("Save draft") }}</o-button
               >
             </span>
             <span class="navbar-item">
-              <b-button
+              <o-button
                 type="is-primary"
                 :disabled="saving"
                 @click="createOrUpdatePublish"
@@ -455,7 +455,7 @@
                   $t("Publish")
                 }}</span>
                 <span v-else>{{ $t("Update my event") }}</span>
-              </b-button>
+              </o-button>
             </span>
           </div>
         </div>

js/src/views/Event/Event.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <b-loading :active.sync="$apollo.queries.event.loading" />
+    <o-loading :active.sync="$apollo.queries.event.loading" />
     <div class="wrapper">
       <event-banner :picture="event.picture" />
       <div class="intro-wrapper">
@@ -57,22 +57,22 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
-              <b-tag type="is-warning" size="is-medium" v-if="event.draft"
+              <o-tag type="is-warning" size="is-medium" v-if="event.draft"
                 >{{ $t("Draft") }}
-              </b-tag>
+              </o-tag>
               <span
                 class="event-status"
                 v-if="event.status !== EventStatus.CONFIRMED"
               >
-                <b-tag
+                <o-tag
                   type="is-warning"
                   v-if="event.status === EventStatus.TENTATIVE"
-                  >{{ $t("Event to be confirmed") }}</b-tag
+                  >{{ $t("Event to be confirmed") }}</o-tag
                 >
-                <b-tag
+                <o-tag
                   type="is-danger"
                   v-if="event.status === EventStatus.CANCELLED"
-                  >{{ $t("Event cancelled") }}</b-tag
+                  >{{ $t("Event cancelled") }}</o-tag
                 >
               </span>
             </div>
@@ -91,11 +91,11 @@
                 <template v-if="!event.draft">
                   <p v-if="event.visibility === EventVisibility.PUBLIC">
                     {{ $t("Public event") }}
-                    <b-icon icon="earth" />
+                    <o-icon icon="earth" />
                   </p>
                   <p v-if="event.visibility === EventVisibility.UNLISTED">
                     {{ $t("Private event") }}
-                    <b-icon icon="link" />
+                    <o-icon icon="link" />
                   </p>
                 </template>
                 <template v-if="!event.local && organizer.domain">
@@ -168,7 +168,7 @@
                       }}
                     </span>
                   </span>
-                  <b-tooltip
+                  <o-tooltip
                     type="is-dark"
                     v-if="!event.local"
                     :label="
@@ -177,19 +177,19 @@
                       )
                     "
                   >
-                    <b-icon size="is-small" icon="help-circle-outline" />
+                    <o-icon size="is-small" icon="help-circle-outline" />
-                  </b-tooltip>
+                  </o-tooltip>
-                  <b-icon icon="ticket-confirmation-outline" />
+                  <o-icon icon="ticket-confirmation-outline" />
                 </p>
-                <b-dropdown position="is-bottom-left" aria-role="list">
+                <o-dropdown position="is-bottom-left" aria-role="list">
-                  <b-button
+                  <o-button
                     slot="trigger"
                     role="button"
                     icon-right="dots-horizontal"
                   >
                     {{ $t("Actions") }}
-                  </b-button>
+                  </o-button>
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     has-link
                     v-if="canManageEvent || event.draft"
@@ -201,10 +201,10 @@
                       }"
                     >
                       {{ $t("Edit") }}
-                      <b-icon icon="pencil" />
+                      <o-icon icon="pencil" />
                     </router-link>
-                  </b-dropdown-item>
+                  </o-dropdown-item>
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     has-link
                     v-if="canManageEvent || event.draft"
@@ -216,18 +216,18 @@
                       }"
                     >
                       {{ $t("Duplicate") }}
-                      <b-icon icon="content-duplicate" />
+                      <o-icon icon="content-duplicate" />
                     </router-link>
-                  </b-dropdown-item>
+                  </o-dropdown-item>
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="canManageEvent || event.draft"
                     @click="openDeleteEventModalWrapper"
                     @keyup.enter="openDeleteEventModalWrapper"
                   >
                     {{ $t("Delete") }}
-                    <b-icon icon="delete" />
+                    <o-icon icon="delete" />
-                  </b-dropdown-item>
+                  </o-dropdown-item>
 
                   <hr
                     role="presentation"
@@ -235,7 +235,7 @@
                     aria-role="menuitem"
                     v-if="canManageEvent || event.draft"
                   />
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="!event.draft"
                     @click="triggerShare()"
@@ -243,10 +243,10 @@
                   >
                     <span>
                       {{ $t("Share this event") }}
-                      <b-icon icon="share" />
+                      <o-icon icon="share" />
                     </span>
-                  </b-dropdown-item>
+                  </o-dropdown-item>
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     @click="downloadIcsEvent()"
                     @keyup.enter="downloadIcsEvent()"
@@ -254,10 +254,10 @@
                   >
                     <span>
                       {{ $t("Add to my calendar") }}
-                      <b-icon icon="calendar-plus" />
+                      <o-icon icon="calendar-plus" />
                     </span>
-                  </b-dropdown-item>
+                  </o-dropdown-item>
-                  <b-dropdown-item
+                  <o-dropdown-item
                     aria-role="listitem"
                     v-if="ableToReport"
                     @click="isReportModalActive = true"
@@ -265,10 +265,10 @@
                   >
                     <span>
                       {{ $t("Report") }}
-                      <b-icon icon="flag" />
+                      <o-icon icon="flag" />
                     </span>
-                  </b-dropdown-item>
+                  </o-dropdown-item>
-                </b-dropdown>
+                </o-dropdown>
               </div>
             </div>
           </div>
@@ -327,7 +327,7 @@
         </h3>
         <multi-card :events="event.relatedEvents" />
       </section>
-      <b-modal
+      <o-modal
         :active.sync="isReportModalActive"
         has-modal-card
         ref="reportModal"
@@ -339,16 +339,16 @@
           :outside-domain="organizerDomain"
           @close="$refs.reportModal.close()"
         />
-      </b-modal>
+      </o-modal>
-      <b-modal
+      <o-modal
         :close-button-aria-label="$t('Close')"
         :active.sync="isShareModalActive"
         has-modal-card
         ref="shareModal"
       >
         <share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
-      </b-modal>
+      </o-modal>
-      <b-modal
+      <o-modal
         :active.sync="isJoinModalActive"
         has-modal-card
         ref="participationModal"
@@ -384,8 +384,8 @@
             </footer>
           </template>
         </identity-picker>
-      </b-modal>
+      </o-modal>
-      <b-modal
+      <o-modal
         :active.sync="isJoinConfirmationModalActive"
         has-modal-card
         ref="joinConfirmationModal"
@@ -411,32 +411,32 @@
                 joinEvent(actorForConfirmation, messageForConfirmation)
               "
             >
-              <b-field :label="$t('Message')">
+              <o-field :label="$t('Message')">
-                <b-input
+                <o-input
                   type="textarea"
                   size="is-medium"
                   v-model="messageForConfirmation"
                   minlength="10"
-                ></b-input>
+                ></o-input>
-              </b-field>
+              </o-field>
               <div class="buttons">
-                <b-button
+                <o-button
                   native-type="button"
                   class="button"
                   ref="cancelButton"
                   @click="isJoinConfirmationModalActive = false"
                   @keyup.enter="isJoinConfirmationModalActive = false"
                   >{{ $t("Cancel") }}
-                </b-button>
+                </o-button>
-                <b-button type="is-primary" native-type="submit">
+                <o-button type="is-primary" native-type="submit">
                   {{ $t("Confirm my participation") }}
-                </b-button>
+                </o-button>
               </div>
             </form>
           </section>
         </div>
-      </b-modal>
+      </o-modal>
-      <b-modal
+      <o-modal
         :close-button-aria-label="$t('Close')"
         class="map-modal"
         v-if="event.physicalAddress && event.physicalAddress.geom"
@@ -452,7 +452,7 @@
             @close="props.close"
           />
         </template>
-      </b-modal>
+      </o-modal>
     </div>
   </div>
 </template>
@@ -1146,7 +1146,7 @@ export default class Event extends EventMixin {
   transition: opacity 0.5s;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }

js/src/views/Event/EventList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="container">
     <h1>{{ $t("Event list") }}</h1>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <o-loading :active.sync="$apollo.loading"></o-loading>
     <div v-if="events.length > 0" class="columns is-multiline">
       <EventCard
         v-for="event in events"
@@ -10,10 +10,10 @@
         class="column is-one-quarter-desktop is-half-mobile"
       />
     </div>
-    <b-message
+    <o-message
       v-if-else="events.length === 0 && $apollo.loading === false"
       type="is-danger"
-      >{{ $t("No events found") }}</b-message
+      >{{ $t("No events found") }}</o-message
     >
   </section>
 </template>

js/src/views/Event/GroupEvents.vue

@@ -46,17 +46,17 @@
         class="button is-primary"
         >{{ $t("+ Create an event") }}</router-link
       >
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading :active.sync="$apollo.loading"></o-loading>
       <section v-if="group">
         <subtitle>
           {{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
         </subtitle>
-        <b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
+        <o-switch v-model="showPassedEvents">{{ $t("Past events") }}</o-switch>
         <grouped-multi-event-minimalist-card
           :events="group.organizedEvents.elements"
           :isCurrentActorMember="isCurrentActorMember"
         />
-        <b-message
+        <o-message
           v-if="
             group.organizedEvents.elements.length === 0 &&
             $apollo.loading === false
@@ -64,8 +64,8 @@
           type="is-danger"
         >
           {{ $t("No events found") }}
-        </b-message>
+        </o-message>
-        <b-pagination
+        <o-pagination
           :total="group.organizedEvents.total"
           v-model="eventsPage"
           :per-page="EVENTS_PAGE_LIMIT"
@@ -74,7 +74,7 @@
           :aria-page-label="$t('Page')"
           :aria-current-label="$t('Current page')"
         >
-        </b-pagination>
+        </o-pagination>
       </section>
     </section>
   </div>

js/src/views/Event/MyEvents.vue

@@ -17,28 +17,28 @@
         >{{ $t("Create event") }}</router-link
       >
     </div>
-    <b-loading :active.sync="$apollo.loading"></b-loading>
+    <o-loading :active.sync="$apollo.loading"></o-loading>
     <div class="wrapper">
       <div class="event-filter">
-        <b-field grouped group-multiline>
+        <o-field grouped group-multiline>
-          <b-field>
+          <o-field>
-            <b-switch v-model="showUpcoming">{{
+            <o-switch v-model="showUpcoming">{{
               showUpcoming ? $t("Upcoming events") : $t("Past events")
-            }}</b-switch>
+            }}</o-switch>
-          </b-field>
+          </o-field>
-          <b-field v-if="showUpcoming">
+          <o-field v-if="showUpcoming">
-            <b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
+            <o-checkbox v-model="showDrafts">{{ $t("Drafts") }}</o-checkbox>
-          </b-field>
+          </o-field>
-          <b-field v-if="showUpcoming">
+          <o-field v-if="showUpcoming">
-            <b-checkbox v-model="showAttending">{{
+            <o-checkbox v-model="showAttending">{{
               $t("Attending")
-            }}</b-checkbox>
+            }}</o-checkbox>
-          </b-field>
+          </o-field>
-          <b-field v-if="showUpcoming">
+          <o-field v-if="showUpcoming">
-            <b-checkbox v-model="showMyGroups">{{
+            <o-checkbox v-model="showMyGroups">{{
               $t("From my groups")
-            }}</b-checkbox>
+            }}</o-checkbox>
-          </b-field>
+          </o-field>
           <p v-if="!showUpcoming">
             {{
               $tc(
@@ -50,7 +50,7 @@
               )
             }}
           </p>
-          <b-field
+          <o-field
             class="date-filter"
             expanded
             :label="
@@ -59,15 +59,15 @@
                 : $t('Showing events before')
             "
           >
-            <b-datepicker v-model="dateFilter" />
+            <o-datepicker v-model="dateFilter" />
-            <b-button
+            <o-button
               @click="dateFilter = new Date()"
               class="reset-area"
               icon-left="close"
               :title="$t('Clear date filter field')"
             />
-          </b-field>
+          </o-field>
-        </b-field>
+        </o-field>
       </div>
       <div class="my-events">
         <section
@@ -108,7 +108,7 @@
             </div>
           </transition-group>
           <div class="columns is-centered">
-            <b-button
+            <o-button
               class="column is-narrow"
               v-if="
                 hasMoreFutureParticipations &&
@@ -118,7 +118,7 @@
               @click="loadMoreFutureParticipations"
               size="is-large"
               type="is-primary"
-              >{{ $t("Load more") }}</b-button
+              >{{ $t("Load more") }}</o-button
             >
           </div>
         </section>
@@ -172,7 +172,7 @@
             </div>
           </transition-group>
           <div class="columns is-centered">
-            <b-button
+            <o-button
               class="column is-narrow"
               v-if="
                 hasMorePastParticipations &&
@@ -181,7 +181,7 @@
               @click="loadMorePastParticipations"
               size="is-large"
               type="is-primary"
-              >{{ $t("Load more") }}</b-button
+              >{{ $t("Load more") }}</o-button
             >
           </div>
         </section>

js/src/views/Event/Participants.vue

@@ -31,8 +31,8 @@
     <div class="level">
       <div class="level-left">
         <div class="level-item">
-          <b-field :label="$t('Status')" horizontal label-for="role-select">
+          <o-field :label="$t('Status')" horizontal label-for="role-select">
-            <b-select v-model="role" id="role-select">
+            <o-select v-model="role" id="role-select">
               <option :value="null">
                 {{ $t("Everything") }}
               </option>
@@ -48,20 +48,20 @@
               <option :value="ParticipantRole.REJECTED">
                 {{ $t("Rejected") }}
               </option>
-            </b-select>
+            </o-select>
-          </b-field>
+          </o-field>
         </div>
         <div class="level-item" v-if="exportFormats.length > 0">
-          <b-dropdown aria-role="list">
+          <o-dropdown aria-role="list">
             <template #trigger="{ active }">
-              <b-button
+              <o-button
                 :label="$t('Export')"
                 type="is-primary"
                 :icon-right="active ? 'menu-up' : 'menu-down'"
               />
             </template>
 
-            <b-dropdown-item
+            <o-dropdown-item
               has-link
               v-for="format in exportFormats"
               :key="format"
@@ -70,15 +70,15 @@
               @keyup.enter="exportParticipants(format)"
             >
               <button class="dropdown-button">
-                <b-icon :icon="formatToIcon(format)"></b-icon>
+                <o-icon :icon="formatToIcon(format)"></o-icon>
                 {{ format }}
               </button>
-            </b-dropdown-item>
+            </o-dropdown-item>
-          </b-dropdown>
+          </o-dropdown>
         </div>
       </div>
     </div>
-    <b-table
+    <o-table
       :data="event.participants.elements"
       ref="queueTable"
       detailed
@@ -104,7 +104,7 @@
       @page-change="(newPage) => (page = newPage)"
       @sort="(field, order) => $emit('sort', field, order)"
     >
-      <b-table-column
+      <o-table-column
         field="actor.preferredUsername"
         :label="$t('Participant')"
         v-slot="props"
@@ -116,13 +116,13 @@
           >
             <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
           </figure>
-          <b-icon
+          <o-icon
             class="media-left"
             v-else-if="props.row.actor.preferredUsername === 'anonymous'"
             size="is-large"
             icon="incognito"
           />
-          <b-icon
+          <o-icon
             class="media-left"
             v-else
             size="is-large"
@@ -145,34 +145,34 @@
             </div>
           </div>
         </article>
-      </b-table-column>
+      </o-table-column>
-      <b-table-column field="role" :label="$t('Role')" v-slot="props">
+      <o-table-column field="role" :label="$t('Role')" v-slot="props">
-        <b-tag
+        <o-tag
           type="is-primary"
           v-if="props.row.role === ParticipantRole.CREATOR"
         >
           {{ $t("Organizer") }}
-        </b-tag>
+        </o-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+        <o-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
           {{ $t("Participant") }}
-        </b-tag>
+        </o-tag>
-        <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
+        <o-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
           {{ $t("Not confirmed") }}
-        </b-tag>
+        </o-tag>
-        <b-tag
+        <o-tag
           type="is-warning"
           v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
         >
           {{ $t("Not approved") }}
-        </b-tag>
+        </o-tag>
-        <b-tag
+        <o-tag
           type="is-danger"
           v-else-if="props.row.role === ParticipantRole.REJECTED"
         >
           {{ $t("Rejected") }}
-        </b-tag>
+        </o-tag>
-      </b-table-column>
+      </o-table-column>
-      <b-table-column
+      <o-table-column
         field="metadata.message"
         class="column-message"
         :label="$t('Message')"
@@ -206,14 +206,14 @@
         <p v-else class="has-text-grey-dark">
           {{ $t("No message") }}
         </p>
-      </b-table-column>
+      </o-table-column>
-      <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+      <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
         <span class="has-text-centered">
           {{ props.row.insertedAt | formatDateString }}<br />{{
             props.row.insertedAt | formatTimeString
           }}
         </span>
-      </b-table-column>
+      </o-table-column>
       <template #detail="props">
         <article v-html="nl2br(props.row.metadata.message)" />
       </template>
@@ -226,7 +226,7 @@
       </template>
       <template slot="bottom-left">
         <div class="buttons">
-          <b-button
+          <o-button
             @click="acceptParticipants(checkedRows)"
             type="is-success"
             :disabled="!canAcceptParticipants"
@@ -238,8 +238,8 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
-          <b-button
+          <o-button
             @click="refuseParticipants(checkedRows)"
             type="is-danger"
             :disabled="!canRefuseParticipants"
@@ -251,10 +251,10 @@
                 { number: checkedRows.length }
               )
             }}
-          </b-button>
+          </o-button>
         </div>
       </template>
-    </b-table>
+    </o-table>
   </section>
 </template>
 

js/src/views/Group/Create.vue

@@ -2,33 +2,33 @@
   <section class="section container">
     <h1 class="title">{{ $t("Create a new group") }}</h1>
 
-    <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
+    <o-message type="is-danger" v-for="(value, index) in errors" :key="index">
       {{ value }}
-    </b-message>
+    </o-message>
 
     <form @submit.prevent="createGroup">
-      <b-field :label="$t('Group display name')" label-for="group-display-name">
+      <o-field :label="$t('Group display name')" label-for="group-display-name">
-        <b-input
+        <o-input
           aria-required="true"
           required
           v-model="group.name"
           id="group-display-name"
         />
-      </b-field>
+      </o-field>
 
       <div class="field">
         <label class="label" for="group-preferred-username">{{
           $t("Federated Group Name")
         }}</label>
         <div class="field-body">
-          <b-field
+          <o-field
             :message="
               $t(
                 'Only alphanumeric lowercased characters and underscores are supported.'
               )
             "
           >
-            <b-input
+            <o-input
               ref="preferredUsernameInput"
               aria-required="true"
               required
@@ -48,7 +48,7 @@
             <p class="control">
               <span class="button is-static">@{{ host }}</span>
             </p>
-          </b-field>
+          </o-field>
         </div>
         <p
           v-html="
@@ -60,9 +60,9 @@
         />
       </div>
 
-      <b-field :label="$t('Description')" label-for="group-summary">
+      <o-field :label="$t('Description')" label-for="group-summary">
-        <b-input v-model="group.summary" type="textarea" id="group-summary" />
+        <o-input v-model="group.summary" type="textarea" id="group-summary" />
-      </b-field>
+      </o-field>
 
       <div>
         <b>{{ $t("Avatar") }}</b>

js/src/views/Group/Group.vue

@@ -18,11 +18,11 @@
               }"
               >{{ group.name }}</router-link
             >
-            <b-skeleton v-else :animated="true"></b-skeleton>
+            <o-skeleton v-else :animated="true"></o-skeleton>
           </li>
         </ul>
       </nav>
-      <b-loading :active.sync="$apollo.loading"></b-loading>
+      <o-loading :active.sync="$apollo.loading"></o-loading>
       <header class="block-container presentation" v-if="group">
         <div class="banner-container">
           <lazy-image-wrapper :picture="group.banner" />
@@ -32,18 +32,18 @@
             <figure class="image is-128x128" v-if="group.avatar">
               <img class="is-rounded" :src="group.avatar.url" alt="" />
             </figure>
-            <b-icon v-else size="is-large" icon="account-group" />
+            <o-icon v-else size="is-large" icon="account-group" />
           </div>
           <div class="title-container">
             <h1 v-if="group.name">{{ group.name }}</h1>
-            <b-skeleton v-else :animated="true" />
+            <o-skeleton v-else :animated="true" />
             <small
               dir="ltr"
               class="has-text-grey-dark"
               v-if="group.preferredUsername"
               >@{{ usernameWithDomain(group) }}</small
             >
-            <b-skeleton v-else :animated="true" />
+            <o-skeleton v-else :animated="true" />
             <br />
           </div>
           <div class="group-metadata">
@@ -69,7 +69,7 @@
                     v-if="member.actor.avatar"
                     alt
                   />
-                  <b-icon v-else size="is-medium" icon="account-circle" />
+                  <o-icon v-else size="is-medium" icon="account-circle" />
                 </figure>
               </div>
               <p>
@@ -89,7 +89,7 @@
               </p>
             </div>
             <div class="buttons">
-              <b-button
+              <o-button
                 outlined
                 icon-left="timeline-text"
                 v-if="isCurrentActorAGroupMember && !previewPublic"
@@ -98,9 +98,9 @@
                   name: RouteName.TIMELINE,
                   params: { preferredUsername: usernameWithDomain(group) },
                 }"
-                >{{ $t("Activity") }}</b-button
+                >{{ $t("Activity") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 icon-left="cog"
                 v-if="isCurrentActorAGroupAdmin && !previewPublic"
@@ -109,9 +109,9 @@
                   name: RouteName.GROUP_PUBLIC_SETTINGS,
                   params: { preferredUsername: usernameWithDomain(group) },
                 }"
-                >{{ $t("Group settings") }}</b-button
+                >{{ $t("Group settings") }}</o-button
               >
-              <b-tooltip
+              <o-tooltip
                 v-if="
                   (!isCurrentActorAGroupMember || previewPublic) &&
                   group.openness === Openness.INVITE_ONLY
@@ -119,11 +119,11 @@
                 :label="$t('This group is invite-only')"
                 position="is-bottom"
               >
-                <b-button disabled type="is-primary">{{
+                <o-button disabled type="is-primary">{{
                   $t("Join group")
-                }}</b-button></b-tooltip
+                }}</o-button></o-tooltip
               >
-              <b-button
+              <o-button
                 v-else-if="
                   ((!isCurrentActorAGroupMember &&
                     !isCurrentActorAPendingGroupMember) ||
@@ -134,17 +134,17 @@
                 @keyup.enter="joinGroup"
                 type="is-primary"
                 :disabled="previewPublic"
-                >{{ $t("Join group") }}</b-button
+                >{{ $t("Join group") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 v-else-if="isCurrentActorAPendingGroupMember"
                 @click="leaveGroup"
                 @keyup.enter="leaveGroup"
                 type="is-primary"
-                >{{ $t("Cancel membership request") }}</b-button
+                >{{ $t("Cancel membership request") }}</o-button
               >
-              <b-button
+              <o-button
                 tag="router-link"
                 :to="{
                   name: RouteName.GROUP_JOIN,
@@ -153,9 +153,9 @@
                 v-else-if="!isCurrentActorAGroupMember || previewPublic"
                 :disabled="previewPublic"
                 type="is-primary"
-                >{{ $t("Join group") }}</b-button
+                >{{ $t("Join group") }}</o-button
               >
-              <b-button
+              <o-button
                 v-if="
                   ((!isCurrentActorFollowing && !isCurrentActorAGroupMember) ||
                     previewPublic) &&
@@ -166,9 +166,9 @@
                 @keyup.enter="followGroup"
                 type="is-primary"
                 :disabled="isCurrentActorPendingFollow"
-                >{{ $t("Follow") }}</b-button
+                >{{ $t("Follow") }}</o-button
               >
-              <b-button
+              <o-button
                 tag="router-link"
                 :to="{
                   name: RouteName.GROUP_FOLLOW,
@@ -181,24 +181,24 @@
                 "
                 :disabled="previewPublic"
                 type="is-primary"
-                >{{ $t("Follow") }}</b-button
+                >{{ $t("Follow") }}</o-button
               >
-              <b-button
+              <o-button
                 outlined
                 v-if="isCurrentActorPendingFollow && currentActor.id"
                 @click="unFollowGroup"
                 @keyup.enter="unFollowGroup"
                 type="is-primary"
-                >{{ $t("Cancel follow request") }}</b-button
+                >{{ $t("Cancel follow request") }}</o-button
-              ><b-button
+              ><o-button
                 v-if="
                   isCurrentActorFollowing && !previewPublic && currentActor.id
                 "
                 type="is-primary"
                 @click="unFollowGroup"
-                >{{ $t("Unfollow") }}</b-button
+                >{{ $t("Unfollow") }}</o-button
               >
-              <b-button
+              <o-button
                 v-if="isCurrentActorFollowing"
                 @click="toggleFollowNotify"
                 @keyup.enter="toggleFollowNotify"
@@ -207,8 +207,8 @@
                     ? 'bell-outline'
                     : 'bell-off-outline'
                 "
-              ></b-button>
+              ></o-button>
-              <b-button
+              <o-button
                 outlined
                 icon-left="share"
                 @click="triggerShare()"
@@ -216,95 +216,95 @@
                 v-if="!isCurrentActorAGroupMember || previewPublic"
               >
                 {{ $t("Share") }}
-              </b-button>
+              </o-button>
-              <b-dropdown
+              <o-dropdown
                 class="menu-dropdown"
                 position="is-bottom-left"
                 aria-role="menu"
               >
-                <b-button
+                <o-button
                   slot="trigger"
                   outlined
                   role="button"
                   icon-left="dots-horizontal"
                   :aria-label="$t('Other actions')"
                 />
-                <b-dropdown-item
+                <o-dropdown-item
                   aria-role="menuitem"
                   v-if="isCurrentActorAGroupMember || previewPublic"
                 >
-                  <b-switch v-model="previewPublic">{{
+                  <o-switch v-model="previewPublic">{{
                     $t("Public preview")
-                  }}</b-switch>
+                  }}</o-switch>
-                </b-dropdown-item>
+                </o-dropdown-item>
-                <b-dropdown-item
+                <o-dropdown-item
                   v-if="!previewPublic && isCurrentActorAGroupMember"
                   aria-role="menuitem"
                   @click="triggerShare()"
                   @keyup.enter="triggerShare()"
                 >
                   <span>
-                    <b-icon icon="share" />
+                    <o-icon icon="share" />
                     {{ $t("Share") }}
                   </span>
-                </b-dropdown-item>
+                </o-dropdown-item>
                 <hr
                   role="presentation"
                   class="dropdown-divider"
                   v-if="isCurrentActorAGroupMember"
                 />
-                <b-dropdown-item has-link aria-role="menuitem">
+                <o-dropdown-item has-link aria-role="menuitem">
                   <a
                     :href="`@${preferredUsername}/feed/atom`"
                     :title="$t('Atom feed for events and posts')"
                   >
-                    <b-icon icon="rss" />
+                    <o-icon icon="rss" />
                     {{ $t("RSS/Atom Feed") }}
                   </a>
-                </b-dropdown-item>
+                </o-dropdown-item>
-                <b-dropdown-item has-link aria-role="menuitem">
+                <o-dropdown-item has-link aria-role="menuitem">
                   <a
                     :href="`@${preferredUsername}/feed/ics`"
                     :title="$t('ICS feed for events')"
                   >
-                    <b-icon icon="calendar-sync" />
+                    <o-icon icon="calendar-sync" />
                     {{ $t("ICS/WebCal Feed") }}
                   </a>
-                </b-dropdown-item>
+                </o-dropdown-item>
                 <hr role="presentation" class="dropdown-divider" />
-                <b-dropdown-item
+                <o-dropdown-item
                   v-if="ableToReport"
                   aria-role="menuitem"
                   @click="isReportModalActive = true"
                   @keyup.enter="isReportModalActive = true"
                 >
                   <span>
-                    <b-icon icon="flag" />
+                    <o-icon icon="flag" />
                     {{ $t("Report") }}
                   </span>
-                </b-dropdown-item>
+                </o-dropdown-item>
-                <b-dropdown-item
+                <o-dropdown-item
                   aria-role="menuitem"
                   v-if="isCurrentActorAGroupMember && !previewPublic"
                   @click="openLeaveGroupModal"
                   @keyup.enter="openLeaveGroupModal"
                 >
                   <span>
-                    <b-icon icon="exit-to-app" />
+                    <o-icon icon="exit-to-app" />
                     {{ $t("Leave") }}
                   </span>
-                </b-dropdown-item>
+                </o-dropdown-item>
-              </b-dropdown>
+              </o-dropdown>
             </div>
           </div>
           <invitations
             v-if="isCurrentActorAnInvitedGroupMember"
             :invitations="[groupMember]"
           />
-          <b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
+          <o-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
             {{ $t("You have been removed from this group's members.") }}
-          </b-message>
+          </o-message>
-          <b-message
+          <o-message
             v-if="
               isCurrentActorAGroupMember &&
               isCurrentActorARecentMember &&
@@ -317,8 +317,8 @@
                 "Since you are a new member, private content can take a few minutes to appear."
               )
             }}
-          </b-message>
+          </o-message>
-          <b-message
+          <o-message
             v-if="
               !isCurrentActorAGroupMember &&
               !isCurrentActorAPendingGroupMember &&
@@ -339,7 +339,7 @@
                 $t("access to the group's private content as well")
               }}</b>
             </i18n>
-          </b-message>
+          </o-message>
         </div>
       </header>
     </div>
@@ -452,7 +452,7 @@
             <empty-content v-else-if="group" icon="calendar" :inline="true">
               {{ $t("No public upcoming events") }}
             </empty-content>
-            <b-skeleton animated v-else></b-skeleton>
+            <o-skeleton animated v-else></o-skeleton>
           </template>
           <template v-slot:create>
             <router-link
@@ -500,13 +500,13 @@
         </group-section>
       </div>
     </div>
-    <b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
+    <o-message v-else-if="!group && $apollo.loading === false" type="is-danger">
       {{ $t("No group found") }}
-    </b-message>
+    </o-message>
     <div v-else-if="group" class="public-container">
       <aside class="group-metadata">
         <div class="sticky">
-          <b-message v-if="group.domain && !isCurrentActorAGroupMember">
+          <o-message v-if="group.domain && !isCurrentActorAGroupMember">
             {{
               $t(
                 "This profile is from another instance, the informations shown here may be incomplete."
@@ -515,7 +515,7 @@
             <a :href="group.url" rel="noopener noreferrer external">{{
               $t("View full profile")
             }}</a>
-          </b-message>
+          </o-message>
           <event-metadata-block :title="$t('Members')" icon="account-group">
             {{
               $tc("{count} members", group.members.total, {
@@ -548,7 +548,7 @@
                     </p>
                   </address>
                 </div>
-                <b-button
+                <o-button
                   class="map-show-button"
                   type="is-text"
                   @click="showMap = !showMap"
@@ -556,7 +556,7 @@
                   v-if="physicalAddress.geom"
                 >
                   {{ $t("Show map") }}
-                </b-button>
+                </o-button>
               </div>
             </div>
           </event-metadata-block>
@@ -602,7 +602,7 @@
               </i18n>
             </template>
           </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+          <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
           <router-link
             v-if="organizedEvents.total > 0"
             :to="{
@@ -633,7 +633,7 @@
           <empty-content v-else-if="group" icon="bullhorn" :inline="true">
             {{ $t("No posts yet") }}
           </empty-content>
-          <b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
+          <o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
           <router-link
             v-if="posts.total > 0"
             :to="{
@@ -644,7 +644,7 @@
           >
         </section>
       </div>
-      <b-modal
+      <o-modal
         v-if="physicalAddress && physicalAddress.geom"
         :active.sync="showMap"
         :close-button-aria-label="$t('Close')"
@@ -658,9 +658,9 @@
             }"
           />
         </div>
-      </b-modal>
+      </o-modal>
     </div>
-    <b-modal
+    <o-modal
       :close-button-aria-label="$t('Close')"
       :active.sync="isReportModalActive"
       has-modal-card
@@ -673,8 +673,8 @@
         :outside-domain="group.domain"
         @close="$refs.reportModal.close()"
       />
-    </b-modal>
+    </o-modal>
-    <b-modal
+    <o-modal
       :close-button-aria-label="$t('Close')"
       v-if="group"
       :active.sync="isShareModalActive"
@@ -682,7 +682,7 @@
       ref="shareModal"
     >
       <share-group-modal :group="group" />
-    </b-modal>
+    </o-modal>
   </div>
 </template>
 

js/src/views/Group/GroupFollowers.vue

@@ -31,16 +31,16 @@
         </li>
       </ul>
     </nav>
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="$apollo.loading" />
     <section
       class="container section"
       v-if="group && isCurrentActorAGroupAdmin && followers"
     >
       <h1>{{ $t("Group Followers") }} ({{ followers.total }})</h1>
-      <b-field :label="$t('Status')" horizontal>
+      <o-field :label="$t('Status')" horizontal>
-        <b-switch v-model="pending">{{ $t("Pending") }}</b-switch>
+        <o-switch v-model="pending">{{ $t("Pending") }}</o-switch>
-      </b-field>
+      </o-field>
-      <b-table
+      <o-table
         :data="followers.elements"
         ref="queueTable"
         :loading="this.$apollo.loading"
@@ -60,7 +60,7 @@
         @page-change="triggerLoadMoreFollowersPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Follower')"
           v-slot="props"
@@ -76,7 +76,7 @@
                 alt=""
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -94,41 +94,41 @@
               </div>
             </div>
           </article>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
+        <o-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons">
-            <b-button
+            <o-button
               v-if="!props.row.approved"
               @click="updateFollower(props.row, true)"
               icon-left="check"
               type="is-success"
-              >{{ $t("Accept") }}</b-button
+              >{{ $t("Accept") }}</o-button
             >
-            <b-button
+            <o-button
               @click="updateFollower(props.row, false)"
               icon-left="close"
               type="is-danger"
-              >{{ $t("Reject") }}</b-button
+              >{{ $t("Reject") }}</o-button
             >
           </div>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" inline>
             {{ $t("No follower matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
+    <o-message v-else-if="!$apollo.loading && group">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-message>
   </div>
 </template>
 

js/src/views/Group/GroupMembers.vue

@@ -31,19 +31,19 @@
         </li>
       </ul>
     </nav>
-    <b-loading :active="$apollo.loading" />
+    <o-loading :active="$apollo.loading" />
     <section
       class="container section"
       v-if="group && isCurrentActorAGroupAdmin"
     >
       <form @submit.prevent="inviteMember">
-        <b-field
+        <o-field
           :label="$t('Invite a new member')"
           custom-class="add-relay"
           label-for="new-member-field"
           horizontal
         >
-          <b-field
+          <o-field
             grouped
             expanded
             size="is-large"
@@ -51,27 +51,27 @@
             :message="inviteError"
           >
             <p class="control">
-              <b-input
+              <o-input
                 id="new-member-field"
                 v-model="newMemberUsername"
                 :placeholder="$t('Ex: someone@mobilizon.org')"
               />
             </p>
             <p class="control">
-              <b-button type="is-primary" native-type="submit">{{
+              <o-button type="is-primary" native-type="submit">{{
                 $t("Invite member")
-              }}</b-button>
+              }}</o-button>
             </p>
-          </b-field>
+          </o-field>
-        </b-field>
+        </o-field>
       </form>
       <h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
-      <b-field
+      <o-field
         :label="$t('Status')"
         horizontal
         label-for="group-members-status-filter"
       >
-        <b-select v-model="roles" id="group-members-status-filter">
+        <o-select v-model="roles" id="group-members-status-filter">
           <option value="">
             {{ $t("Everything") }}
           </option>
@@ -93,9 +93,9 @@
           <option :value="MemberRole.REJECTED">
             {{ $t("Rejected") }}
           </option>
-        </b-select>
+        </o-select>
-      </b-field>
+      </o-field>
-      <b-table
+      <o-table
         v-if="members"
         :data="members.elements"
         ref="queueTable"
@@ -116,7 +116,7 @@
         @page-change="triggerLoadMoreMemberPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column
+        <o-table-column
           field="actor.preferredUsername"
           :label="$t('Member')"
           v-slot="props"
@@ -132,7 +132,7 @@
                 :alt="props.row.actor.avatar.alt || ''"
               />
             </figure>
-            <b-icon
+            <o-icon
               class="media-left"
               v-else
               size="is-large"
@@ -150,66 +150,66 @@
               </div>
             </div>
           </article>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="role" :label="$t('Role')" v-slot="props">
+        <o-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag
+          <o-tag
             type="is-primary"
             v-if="props.row.role === MemberRole.ADMINISTRATOR"
           >
             {{ $t("Administrator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-primary"
             v-else-if="props.row.role === MemberRole.MODERATOR"
           >
             {{ $t("Moderator") }}
-          </b-tag>
+          </o-tag>
-          <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
+          <o-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.NOT_APPROVED"
           >
             {{ $t("Not approved") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-danger"
             v-else-if="props.row.role === MemberRole.REJECTED"
           >
             {{ $t("Rejected") }}
-          </b-tag>
+          </o-tag>
-          <b-tag
+          <o-tag
             type="is-warning"
             v-else-if="props.row.role === MemberRole.INVITED"
           >
             {{ $t("Invited") }}
-          </b-tag>
+          </o-tag>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
+        <o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
           <span class="has-text-centered">
             {{ props.row.insertedAt | formatDateString }}<br />{{
               props.row.insertedAt | formatTimeString
             }}
           </span>
-        </b-table-column>
+        </o-table-column>
-        <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
+        <o-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons" v-if="props.row.actor.id !== currentActor.id">
-            <b-button
+            <o-button
               type="is-success"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
               @click="approveMember(props.row)"
               icon-left="check"
-              >{{ $t("Approve member") }}</b-button
+              >{{ $t("Approve member") }}</o-button
             >
-            <b-button
+            <o-button
               type="is-danger"
               v-if="props.row.role === MemberRole.NOT_APPROVED"
               @click="rejectMember(props.row)"
               icon-left="exit-to-app"
-              >{{ $t("Reject member") }}</b-button
+              >{{ $t("Reject member") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.MEMBER, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -217,9 +217,9 @@
               "
               @click="promoteMember(props.row)"
               icon-left="chevron-double-up"
-              >{{ $t("Promote") }}</b-button
+              >{{ $t("Promote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="
                 [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
                   props.row.role
@@ -227,27 +227,27 @@
               "
               @click="demoteMember(props.row)"
               icon-left="chevron-double-down"
-              >{{ $t("Demote") }}</b-button
+              >{{ $t("Demote") }}</o-button
             >
-            <b-button
+            <o-button
               v-if="props.row.role === MemberRole.MEMBER"
               @click="removeMember(props.row)"
               type="is-danger"
               icon-left="exit-to-app"
-              >{{ $t("Remove") }}</b-button
+              >{{ $t("Remove") }}</o-button
             >
           </div>
-        </b-table-column>
+        </o-table-column>
         <template slot="empty">
           <empty-content icon="account" inline>
             {{ $t("No member matches the filters") }}
           </empty-content>
         </template>
-      </b-table>
+      </o-table>
     </section>
-    <b-message v-else-if="!$apollo.loading && group">
+    <o-message v-else-if="!$apollo.loading && group">
       {{ $t("You are not an administrator for this group.") }}
-    </b-message>
+    </o-message>
   </div>
 </template>