Fix display of invitations

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

js/src/components/Group/GroupMemberCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
     <div
-      class="bg-yellow-2 text-black flex items-center gap-1 p-2 rounded-t-lg"
+      class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg"
       dir="auto"
     >
       <figure class="" v-if="member.actor.avatar">

js/src/components/Group/InvitationCard.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="">
-    <div class="">
-      <div class="">
+  <div class="border rounded p-2 bg-mbz-yellow-alt-50 dark:bg-zinc-700">
     <div class="prose dark:prose-invert">
       <i18n-t
         tag="p"
@@ -12,11 +10,12 @@
         </template>
       </i18n-t>
     </div>
-        <div class="">
+    <div class="flex justify-between gap-2">
+      <div class="flex gap-2">
         <div class="">
           <figure v-if="member.parent.avatar">
             <img
-                class="rounded"
+              class="rounded-full"
               :src="member.parent.avatar.url"
               alt=""
               height="48"
@@ -25,10 +24,7 @@
           </figure>
           <AccountGroup :size="48" v-else />
         </div>
-          <div class="media-content">
-            <div class="level">
-              <div class="level-left">
-                <div class="level-item mr-3">
+        <div class="mr-3">
           <router-link
             :to="{
               name: RouteName.GROUP,
@@ -37,44 +33,27 @@
               },
             }"
           >
-                    <h3 class="">{{ member.parent.name }}</h3>
-                    <p class="">
-                      <span v-if="member.parent.domain">
-                        {{
-                          `@${member.parent.preferredUsername}@${member.parent.domain}`
-                        }}
-                      </span>
-                      <span v-else>{{
-                        `@${member.parent.preferredUsername}`
-                      }}</span>
-                    </p>
+            <p class="">{{ member.parent.name }}</p>
+            <p class="text-sm">@{{ usernameWithDomain(member.parent) }}</p>
           </router-link>
         </div>
       </div>
+      <div>
+        <div class="flex gap-2">
           <div class="">
-                <div class="">
-                  <o-button
-                    variant="success"
-                    @click="$emit('accept', member.id)"
-                  >
-                    {{ $t("Accept") }}
+            <o-button variant="success" @click="$emit('accept', member.id)">
+              {{ t("Accept") }}
             </o-button>
           </div>
           <div class="">
-                  <o-button
-                    variant="danger"
-                    @click="$emit('reject', member.id)"
-                  >
-                    {{ $t("Decline") }}
+            <o-button variant="danger" @click="$emit('reject', member.id)">
+              {{ t("Decline") }}
             </o-button>
           </div>
         </div>
       </div>
     </div>
   </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -82,6 +61,9 @@ import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import RouteName from "../../router/name";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 defineProps<{
   member: IMember;

js/src/components/Group/InvitationsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="card my-3" v-if="invitations && invitations.length > 0">
+  <section class="my-3" v-if="invitations && invitations.length > 0">
     <InvitationCard
       v-for="member in invitations"
       :key="member.id"