From 319f9c4ece5e6b217bb4f99488208a0e3e6c233a Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 8 Sep 2023 18:14:19 +0200
Subject: [PATCH] fix(ui): improve notifications alignment and icons
 consistenty

---
 components/notification/NotificationCard.vue         | 11 ++++++-----
 .../notification/NotificationGroupedFollow.vue       |  4 ++--
 components/notification/NotificationGroupedLikes.vue | 12 ++++++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 6cc322e9..328287c5 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -17,21 +17,22 @@ const { notification } = defineProps<{
           py-3 bg-base top-0
           :lang="notification.status?.language ?? undefined"
         >
-          <div i-ri:user-follow-fill me-1 color-primary />
+          <div i-ri-user-3-line text-xl me-3 color-blue />
           <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
           <span ws-nowrap>
             {{ $t('notification.followed_you') }}
           </span>
         </div>
         <AccountBigCard
+          ms10
           :account="notification.account"
           :lang="notification.status?.language ?? undefined"
         />
       </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">
-      <div flex p3 items-center bg-shaded>
-        <div i-ri:user-add-fill me-1 color-purple />
+      <div flex p4 items-center bg-shaded>
+        <div i-ri:user-add-line text-xl me-2 color-purple />
         <AccountDisplayName
           :account="notification.account"
           text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
@@ -41,8 +42,8 @@ const { notification } = defineProps<{
     </template>
     <template v-else-if="notification.type === 'admin.report'">
       <NuxtLink :to="getReportRoute(notification.report?.id!)">
-        <div flex p3 items-center bg-shaded>
-          <div i-ri:flag-fill me-1 color-purple />
+        <div flex p4 items-center bg-shaded>
+          <div i-ri:flag-line text-xl me-2 color-purple />
           <i18n-t keypath="notification.reported">
             <AccountDisplayName
               :account="notification.account"
diff --git a/components/notification/NotificationGroupedFollow.vue b/components/notification/NotificationGroupedFollow.vue
index 8e1a27c8..c307f59e 100644
--- a/components/notification/NotificationGroupedFollow.vue
+++ b/components/notification/NotificationGroupedFollow.vue
@@ -15,7 +15,7 @@ const lang = $computed(() => {
 <template>
   <article flex flex-col relative :lang="lang ?? undefined">
     <div flex items-center top-0 left-2 pt-2 px-3>
-      <div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" />
+      <div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
       <template v-if="count > 1">
         <CommonLocalizedNumber
           keypath="notification.followed_you_count"
@@ -32,7 +32,7 @@ const lang = $computed(() => {
         </span>
       </template>
     </div>
-    <div pb-2>
+    <div pb-2 ps8>
       <div v-if="isExpanded">
         <AccountCard
           v-for="item in items.items"
diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index da8970a7..1f1a53bc 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -12,10 +12,10 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 
 <template>
   <article flex flex-col relative>
-    <StatusLink :status="group.status!" pb2 pt3>
-      <div flex flex-col gap-2>
+    <StatusLink :status="group.status!" pb4 pt5>
+      <div flex flex-col gap-3>
         <div v-if="reblogs.length" flex="~ gap-1">
-          <div i-ri:repeat-fill text-xl me-1 color-green />
+          <div i-ri:repeat-fill text-xl me-2 color-green />
           <template v-for="i, idx of reblogs" :key="idx">
             <AccountHoverWrapper :account="i.account">
               <NuxtLink :to="getAccountRoute(i.account)">
@@ -28,7 +28,7 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
           </div>
         </div>
         <div v-if="likes.length" flex="~ gap-1">
-          <div :class="useStarFavoriteIcon ? 'i-ri:star-fill color-yellow' : 'i-ri:heart-fill color-red'" text-xl me-1 />
+          <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
           <template v-for="i, idx of likes" :key="idx">
             <AccountHoverWrapper :account="i.account">
               <NuxtLink :to="getAccountRoute(i.account)">
@@ -36,12 +36,12 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
               </NuxtLink>
             </AccountHoverWrapper>
           </template>
-          <div ml1>
+          <div ms1>
             {{ $t('notification.favourited_post') }}
           </div>
         </div>
       </div>
-      <div pl8 mt-1>
+      <div ps9 mt-1>
         <StatusBody :status="group.status!" text-secondary />
         <!-- When no text content is presented, we show media instead -->
         <template v-if="!group.status!.content">