fix: design harmonization on last features

web/src/components/ActivityFeedCard.vue

@@ -31,47 +31,36 @@ function metaLine(item: ActivityItem, own: boolean) {
 </script>
 
 <template>
-	<UCard
+	<section
 		data-testid="recent-activity-card"
 		:aria-busy="loading && showSkeleton ? 'true' : undefined"
-		:ui="{
-			root: 'min-w-0 rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
-			header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
-			body: 'flex flex-col px-4 pt-1 pb-1.5 sm:px-4 sm:pt-1 sm:pb-1.5',
-		}"
+		class="flex min-w-0 flex-col gap-2.5"
 	>
-		<template #header>
-			<h2 class="flex-1 text-base font-semibold text-highlighted">
+		<div class="flex items-baseline justify-between">
+			<h2 class="text-base/6 font-semibold text-highlighted">
 				{{ own ? t('Your recent activity') : t('Recent activity') }}
 			</h2>
-			<RouterLink
-				to="/activity"
-				class="flex items-center gap-1 font-medium text-highlighted underline underline-offset-3 max-lg:min-h-11 lg:min-h-5"
-			>
+			<RouterLink to="/activity" class="text-toned underline underline-offset-3">
 				{{ t('View all') }}
-				<UIcon name="i-lucide-arrow-right" class="size-3.5" />
 			</RouterLink>
-		</template>
+		</div>
 
 		<template v-if="loading">
-			<template v-if="showSkeleton">
+			<div v-if="showSkeleton" class="border border-default bg-default">
 				<div
 					v-for="n in SKELETON_ROWS"
 					:key="n"
 					data-testid="recent-activity-skeleton"
-					class="flex gap-2.5 py-2.5"
+					class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
 					:class="n > 1 ? 'border-t border-muted' : ''"
 				>
 					<USkeleton class="size-6 shrink-0 rounded-none bg-accented" />
-					<div class="flex flex-1 flex-col gap-1.5">
-						<USkeleton
-							class="h-3 rounded-none bg-accented"
-							:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
-						/>
-						<USkeleton class="h-2.5 w-7/20 rounded-none bg-accented" />
-					</div>
+					<USkeleton
+						class="h-3 rounded-none bg-accented"
+						:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
+					/>
 				</div>
-			</template>
+			</div>
 		</template>
 
 		<UAlert
@@ -83,13 +72,16 @@ function metaLine(item: ActivityItem, own: boolean) {
 			:close="false"
 			icon="i-lucide-circle-x"
 			:title="t('Couldn\'t load recent activity')"
+			:description="t('Check your connection and try again.')"
 			:ui="{ actions: 'mt-2' }"
 		>
 			<template #actions>
 				<UButton
 					color="neutral"
 					variant="outline"
+					icon="i-lucide-rotate-cw"
 					class="h-11 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 lg:h-7"
+					:ui="{ leadingIcon: 'size-3.5' }"
 					@click="$emit('retry')"
 				>
 					{{ t('Try again') }}
@@ -100,11 +92,11 @@ function metaLine(item: ActivityItem, own: boolean) {
 		<div
 			v-else-if="items.length === 0"
 			data-testid="recent-activity-empty"
-			class="flex flex-col items-center gap-1.5 py-6 text-center"
+			class="flex flex-col items-center gap-1.5 border border-default bg-default px-6 py-8 text-center"
 		>
 			<UIcon name="i-lucide-history" class="size-5 text-muted" />
 			<span class="font-semibold text-highlighted">{{ t('No activity yet') }}</span>
-			<span class="max-w-60 text-muted">
+			<span class="max-w-65 text-muted">
 				{{
 					own
 						? t('Your actions will appear here.')
@@ -113,26 +105,23 @@ function metaLine(item: ActivityItem, own: boolean) {
 			</span>
 		</div>
 
-		<ul v-else class="flex flex-col">
+		<ul v-else class="border border-default bg-default">
 			<li
 				v-for="(item, index) in items"
 				:key="item.id"
 				data-testid="recent-activity-row"
-				class="flex items-start gap-2.5 py-2.5"
+				class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
 				:class="index > 0 ? 'border-t border-muted' : ''"
 			>
 				<ActivityAvatar :actor="item.actor" />
-				<div class="flex min-w-0 flex-1 flex-col gap-0.5">
-					<span
-						class="line-clamp-2 text-default wrap-anywhere"
-						data-testid="recent-activity-sentence"
-					>
+				<div class="flex min-w-0 flex-1 flex-col">
+					<span class="truncate text-default" data-testid="recent-activity-sentence">
 						<ActivitySentence :item="item" />
 					</span>
 					<span
 						data-testid="recent-activity-meta"
 						:title="fullLocalTime(item.created_at)"
-						class="truncate text-xs/5 text-muted"
+						class="truncate text-xs text-muted"
 					>
 						{{ metaLine(item, own) }}
 					</span>
@@ -146,5 +135,5 @@ function metaLine(item: ActivityItem, own: boolean) {
 				/>
 			</li>
 		</ul>
-	</UCard>
+	</section>
 </template>