zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix(ui): improve notifications alignment and icons consistenty

Browse source
This commit is contained in:
Anthony Fu 2023-09-08 18:14:19 +02:00
parent 06ef226440
commit 319f9c4ece
3 changed files with 14 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/notification/NotificationCard.vue
View file

@ -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"