fix(notifications): single-line mobile header and improve empty state (#2250)

* fix(notifications): single-line mobile header and improve empty state

* fix(style): improve the notification content for mobile view and dark theme

frontend/src/pages/Notifications.vue

@@ -1,9 +1,11 @@
 <template>
 	<header
-		class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
+		class="sticky top-0 z-10 flex flex-row items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
 	>
-		<Breadcrumbs :items="breadcrumbs" />
+		<div class="flex-1">
-		<div class="flex items-center space-x-2">
+			<Breadcrumbs :items="breadcrumbs" />
+		</div>
+		<div class="flex items-center space-x-2 shrink-0">
 			<Button
 				@click="markAllAsRead.submit"
 				:loading="markAllAsRead.loading"
@@ -18,12 +20,12 @@
 			/>
 		</div>
 	</header>
-	<div class="w-full md:w-3/4 mx-auto px-5 pt-6 divide-y">
+	<div class="w-full md:w-3/4 mx-auto px-3 sm:px-5 pt-4 sm:pt-6 divide-y">
 		<div
 			v-if="notifications?.length"
 			v-for="log in notifications"
 			:key="log.name"
-			class="flex space-x-2 px-2 py-4"
+			class="flex space-x-2 sm:space-x-3 px-1 sm:px-2 py-3 sm:py-4"
 			:class="{
 				'cursor-pointer': log.link,
 				'items-center': !showDetails(log) && !isMentionOrComment(log),
@@ -35,15 +37,18 @@
 				size="xl"
 				:label="log.from_user_details.full_name"
 			/>
-			<div class="space-y-2 w-full">
+			<div class="space-y-1.5 sm:space-y-2 w-full">
-				<div class="flex items-center justify-between">
+				<div class="flex items-start sm:items-center justify-between gap-2">
-					<div class="flex items-center">
+					<div class="flex-1 flex flex-row justify-between">
-						<div class="text-ink-gray-9" v-html="log.subject"></div>
+						<div
-					</div>
+							class="text-ink-gray-9 text-sm sm:text-base"
-					<div class="flex items-center space-x-2">
+							v-html="log.subject"
-						<div class="text-sm text-ink-gray-5">
+						></div>
+						<div class="text-xs text-ink-gray-5 whitespace-nowrap">
 							{{ dayjs(log.creation).fromNow() }}
 						</div>
+					</div>
+					<div class="flex items-center space-x-2 shrink-0">
 						<Button
 							variant="ghost"
 							v-if="!log.read"
@@ -62,7 +67,7 @@
 				></div>
 				<div
 					v-else-if="showDetails(log)"
-					class="flex items-stretch border border-outline-gray-2 space-x-2 rounded-md"
+					class="flex flex-col sm:flex-row sm:items-stretch border border-outline-gray-2 sm:space-x-2 rounded-md"
 				>
 					<iframe
 						v-if="
@@ -70,7 +75,7 @@
 							log.document_details.video_link
 						"
 						:src="`https://www.youtube.com/embed/${log.document_details.video_link}`"
-						class="rounded-l-md w-72"
+						class="sm:rounded-l-md rounded-t-md w-full sm:w-72"
 					/>
 					<video
 						v-else-if="
@@ -78,7 +83,7 @@
 							log.document_details.video_link
 						"
 						:src="log.document_details.video_link"
-						class="rounded-l-md w-72"
+						class="sm:rounded-l-md rounded-t-md w-full sm:w-72"
 					/>
 					<div class="p-3">
 						<div
@@ -90,15 +95,15 @@
 									: __('New Batch')
 							}}
 						</div>
-						<div class="font-semibold mb-1">
+						<div class="font-semibold mb-1 text-ink-gray-9">
 							{{ __(log.document_details.title) }}
 						</div>
-						<div class="leading-5">
+						<div class="leading-5 text-ink-gray-7">
 							{{ __(log.document_details.short_introduction) }}
 						</div>
 						<div
 							v-if="log.document_details.start_date"
-							class="flex items-center space-x-2 text-sm mt-5"
+							class="flex items-center space-x-2 text-sm mt-5 text-ink-gray-7"
 						>
 							<Calendar class="size-3 stroke-1.5" />
 							<span>
@@ -109,7 +114,7 @@
 						</div>
 						<div
 							v-if="log.document_details.start_time"
-							class="flex items-center space-x-2 text-sm mt-2"
+							class="flex items-center space-x-2 text-sm mt-2 text-ink-gray-7"
 						>
 							<Clock class="size-3 stroke-1.5" />
 							<span>
@@ -130,7 +135,7 @@
 									:image="instructor.user_image"
 									:label="instructor.full_name"
 								/>
-								<span class="font-medium text-sm">
+								<span class="font-medium text-sm text-ink-gray-9">
 									{{ instructor.full_name }}
 								</span>
 							</div>
@@ -139,8 +144,22 @@
 				</div>
 			</div>
 		</div>
-		<div v-else class="text-ink-gray-5">
+		<div v-else class="flex flex-col items-center justify-center mt-60">
-			{{ __('Nothing to see here.') }}
+			<Bell class="size-10 mx-auto stroke-1 text-ink-gray-5" />
+			<p class="text-lg font-semibold text-ink-gray-7 mb-2.5">
+				{{
+					activeTab === 'Unread'
+						? __('No unread notifications')
+						: __('No read notifications')
+				}}
+			</p>
+			<p class="text-p-base w-full md:w-2/5 text-center text-ink-gray-7">
+				{{
+					activeTab === 'Unread'
+						? __("You're all caught up! Check back later for updates.")
+						: __('Notifications you have read will appear here.')
+				}}
+			</p>
 		</div>
 	</div>
 </template>
@@ -158,7 +177,7 @@ import {
 import { sessionStore } from '../stores/session'
 import { computed, inject, ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Calendar, Clock, X } from 'lucide-vue-next'
+import { Bell, Calendar, Clock, X } from 'lucide-vue-next'
 import { formatTime } from '@/utils/'
 
 const { brand } = sessionStore()