From 14c85f760cb085b7de91496972a104880a1ef181 Mon Sep 17 00:00:00 2001
From: xcexec <hattori.hansa@protonmail.com>
Date: Tue, 22 Oct 2024 12:40:44 +0200
Subject: [PATCH] all avatars stay round regardless of img; EventCard online
 span colored; EditView footer bar colored

---
 src/components/Account/ActorInline.vue           |  4 +---
 src/components/Comment/EventComment.vue          | 16 +++++++---------
 src/components/Discussion/DiscussionComment.vue  |  4 +---
 src/components/Discussion/DiscussionListItem.vue |  4 +---
 src/components/Event/EventCard.vue               |  6 ++----
 src/components/Event/EventParticipationCard.vue  |  8 ++------
 src/components/Event/OrganizerPickerWrapper.vue  |  8 ++------
 src/components/Event/ParticipationButton.vue     |  4 +---
 src/components/Group/GroupMemberCard.vue         | 10 ++++------
 src/views/Admin/AdminGroupProfile.vue            |  4 +---
 src/views/Event/EditView.vue                     |  2 +-
 src/views/Group/GroupFollowers.vue               |  4 +---
 12 files changed, 24 insertions(+), 50 deletions(-)

diff --git a/src/components/Account/ActorInline.vue b/src/components/Account/ActorInline.vue
index 54e518b87..853a346dd 100644
--- a/src/components/Account/ActorInline.vue
+++ b/src/components/Account/ActorInline.vue
@@ -5,11 +5,9 @@
     <div class="flex-none">
       <figure v-if="actor.avatar">
         <img
-          class="rounded-xl"
+          class="w-8 h-8 rounded-full object-cover"
           :src="actor.avatar.url"
           alt=""
-          width="36"
-          height="36"
           loading="lazy"
         />
       </figure>
diff --git a/src/components/Comment/EventComment.vue b/src/components/Comment/EventComment.vue
index 44a249c35..ab68429c5 100644
--- a/src/components/Comment/EventComment.vue
+++ b/src/components/Comment/EventComment.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="bg-white dark:bg-slate-800 rounded p-2"
+    class="bg-white dark:bg-zinc-800 rounded p-2"
     :class="{
       reply: comment.inReplyToComment,
       'bg-mbz-purple-50 dark:bg-mbz-purple-500': comment.isAnnouncement,
@@ -19,11 +19,9 @@
             >
               <figure>
                 <img
-                  class="rounded-xl"
+                  class="w-6 h-6 rounded-full object-cover"
                   :src="actorComment.avatar.url"
                   alt=""
-                  width="24"
-                  height="24"
                 />
               </figure>
             </popover-actor-card>
@@ -59,7 +57,7 @@
         <div v-else>{{ t("[This comment has been deleted]") }}</div>
         <nav class="flex gap-1 mt-1" v-if="!comment.deletedAt">
           <button
-            class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
+            class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
             v-if="
               currentActor?.id &&
               !readOnly &&
@@ -74,7 +72,7 @@
           <o-dropdown aria-role="list" v-show="!readOnly">
             <template #trigger>
               <button
-                class="cursor-pointer flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
+                class="cursor-pointer flex hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
               >
                 <DotsHorizontal />
                 <span class="sr-only">{{ t("More options") }}</span>
@@ -104,7 +102,7 @@
           <button
             v-if="!showReplies"
             @click="showReplies = true"
-            class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
+            class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
           >
             <ChevronDown />
             <span>{{
@@ -120,7 +118,7 @@
           <button
             v-else-if="comment.totalReplies && showReplies"
             @click="showReplies = false"
-            class="flex cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-1"
+            class="flex cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-600 rounded p-1"
           >
             <ChevronUp />
             <span>{{ t("Hide replies") }}</span>
@@ -402,6 +400,6 @@ const dateFnsLocale = inject<Locale>("dateFnsLocale");
 </script>
 <style>
 article.mbz-comment .mention.h-card {
-  @apply inline-block border border-slate-600 dark:border-slate-300 rounded py-0.5 px-1;
+  @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1;
 }
 </style>
diff --git a/src/components/Discussion/DiscussionComment.vue b/src/components/Discussion/DiscussionComment.vue
index 0813a9198..19ba3bf7f 100644
--- a/src/components/Discussion/DiscussionComment.vue
+++ b/src/components/Discussion/DiscussionComment.vue
@@ -5,11 +5,9 @@
     <div class="">
       <figure class="" v-if="comment.actor && comment.actor.avatar">
         <img
-          class="rounded-xl"
+          class="w-8 h-8 rounded-full object-cover"
           :src="comment.actor.avatar.url"
           alt=""
-          :width="48"
-          :height="48"
         />
       </figure>
       <AccountCircle :size="48" v-else />
diff --git a/src/components/Discussion/DiscussionListItem.vue b/src/components/Discussion/DiscussionListItem.vue
index cd3983b23..a55aaeffe 100644
--- a/src/components/Discussion/DiscussionListItem.vue
+++ b/src/components/Discussion/DiscussionListItem.vue
@@ -15,11 +15,9 @@
         "
       >
         <img
-          class="rounded-xl"
+          class="w-8 h-8 rounded-full object-cover"
           :src="discussion.lastComment.actor.avatar.url"
           alt=""
-          width="32"
-          height="32"
         />
       </figure>
       <account-circle :size="32" v-else />
diff --git a/src/components/Event/EventCard.vue b/src/components/Event/EventCard.vue
index ec08e93c7..cacade9f1 100644
--- a/src/components/Event/EventCard.vue
+++ b/src/components/Event/EventCard.vue
@@ -88,11 +88,9 @@
             >
               <figure class="" v-if="actorAvatarURL">
                 <img
-                  class="rounded-xl"
+                  class="w-5 h-5 rounded-full object-cover"
                   :src="actorAvatarURL"
                   alt=""
-                  width="24"
-                  height="24"
                   loading="lazy"
                 />
               </figure>
@@ -107,7 +105,7 @@
               :physical-address="event.physicalAddress"
             />
             <div
-              class="flex items-center text-sm"
+              class="bg-fomo-card-2 flex items-center text-black text-sm"
               dir="auto"
               v-else-if="event.options && event.options.isOnline"
             >
diff --git a/src/components/Event/EventParticipationCard.vue b/src/components/Event/EventParticipationCard.vue
index 7f41c8f48..dedf4c157 100644
--- a/src/components/Event/EventParticipationCard.vue
+++ b/src/components/Event/EventParticipationCard.vue
@@ -11,11 +11,9 @@
         v-if="participation.actor.avatar"
       >
         <img
-          class="rounded"
+          class="w-6 h-6 rounded-full object-cover"
           :src="participation.actor.avatar.url"
           alt=""
-          height="24"
-          width="24"
         />
       </figure>
       <AccountCircle class="ltr:pr-1 rtl:pl-1" v-else />
@@ -103,11 +101,9 @@
           <div class="flex gap-1">
             <figure class="" v-if="actorAvatarURL">
               <img
-                class="rounded"
+                class="w-6 h-6 rounded-full object-cover"
                 :src="actorAvatarURL"
                 alt=""
-                width="24"
-                height="24"
               />
             </figure>
             <AccountCircle v-else />
diff --git a/src/components/Event/OrganizerPickerWrapper.vue b/src/components/Event/OrganizerPickerWrapper.vue
index b898ae79e..5fb1e5d99 100644
--- a/src/components/Event/OrganizerPickerWrapper.vue
+++ b/src/components/Event/OrganizerPickerWrapper.vue
@@ -44,12 +44,10 @@
       @click="isComponentModalActive = true"
     >
       <img
-        class="rounded"
+        class="w-7 h-7 rounded-full object-cover"
         v-if="selectedActor.avatar"
         :src="selectedActor.avatar.url"
         :alt="selectedActor.avatar.alt"
-        width="48"
-        height="48"
       />
       <AccountCircle v-else :size="48" />
     </span>
@@ -99,11 +97,9 @@
                         <div class="">
                           <figure class="" v-if="actor.avatar">
                             <img
-                              class="rounded"
+                              class="w-7 h-7 rounded-full object-cover"
                               :src="actor.avatar.url"
                               :alt="actor.avatar.alt"
-                              width="48"
-                              height="48"
                             />
                           </figure>
                           <AccountCircle v-else :size="48" />
diff --git a/src/components/Event/ParticipationButton.vue b/src/components/Event/ParticipationButton.vue
index d5dcd84ac..4fe6c30c7 100644
--- a/src/components/Event/ParticipationButton.vue
+++ b/src/components/Event/ParticipationButton.vue
@@ -92,11 +92,9 @@
         <div class="flex gap-2 items-center">
           <figure class="" v-if="currentActor?.avatar">
             <img
-              class="rounded-xl"
+              class="w-6 h-6 rounded-full object-cover"
               :src="currentActor.avatar.url"
               alt=""
-              width="24"
-              height="24"
             />
           </figure>
           <AccountCircle v-else />
diff --git a/src/components/Group/GroupMemberCard.vue b/src/components/Group/GroupMemberCard.vue
index 057fd9f56..63a00b8d1 100644
--- a/src/components/Group/GroupMemberCard.vue
+++ b/src/components/Group/GroupMemberCard.vue
@@ -6,12 +6,10 @@
     >
       <figure class="" v-if="member.actor.avatar">
         <img
-          class="rounded-xl"
-          :src="member.actor.avatar.url"
-          alt=""
-          width="24"
-          height="24"
-        />
+        class="w-8 h-8 rounded-full object-cover"
+        :src="member.actor.avatar.url"
+        alt=""
+      />
       </figure>
       <AccountCircle v-else :size="24" />
       {{ displayNameAndUsername(member.actor) }}
diff --git a/src/views/Admin/AdminGroupProfile.vue b/src/views/Admin/AdminGroupProfile.vue
index 32795b074..aebcb9160 100644
--- a/src/views/Admin/AdminGroupProfile.vue
+++ b/src/views/Admin/AdminGroupProfile.vue
@@ -123,11 +123,9 @@
               >
                 <figure v-if="props.row.actor.avatar">
                   <img
-                    class="rounded"
+                    class="w-7 h-7 rounded-full object-cover"
                     :src="props.row.actor.avatar.url"
                     alt=""
-                    width="48"
-                    height="48"
                   />
                 </figure>
                 <AccountCircle :size="48" v-else />
diff --git a/src/views/Event/EditView.vue b/src/views/Event/EditView.vue
index 0f1d15eb2..ec22e3818 100644
--- a/src/views/Event/EditView.vue
+++ b/src/views/Event/EditView.vue
@@ -504,7 +504,7 @@
   <nav
     role="navigation"
     aria-label="main navigation"
-    class="bg-mbz-yellow-alt-200 p-3 mt-3 rounded"
+    class="bg-fomo-card-1 p-3 mt-3 rounded"
     :class="{ 'is-fixed-bottom': showFixedNavbar }"
     v-if="hasCurrentActorPermissionsToEdit"
   >
diff --git a/src/views/Group/GroupFollowers.vue b/src/views/Group/GroupFollowers.vue
index 7f3d1e3b6..58f80197c 100644
--- a/src/views/Group/GroupFollowers.vue
+++ b/src/views/Group/GroupFollowers.vue
@@ -57,11 +57,9 @@
           <article class="flex gap-1">
             <figure v-if="props.row.actor.avatar">
               <img
-                class="rounded"
+                class="w-7 h-7 rounded-full object-cover"
                 :src="props.row.actor.avatar.url"
                 alt=""
-                width="48"
-                height="48"
               />
             </figure>
             <AccountCircle v-else :size="48" />