From 138ef8e23c5131bb543553c6362e6374bd69f0ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 27 Nov 2024 10:27:36 +0100
Subject: [PATCH] pkp/pkp-lib#10618 Styling of email listing and individual
 notifications

---
 src/composables/useDate.js                    |  6 ++++-
 .../primary/WorkflowListingEmails.vue         | 27 +++++++++++++------
 .../primary/WorkflowNotificationDisplay.vue   | 11 +++++---
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/composables/useDate.js b/src/composables/useDate.js
index a9b6975ff..b1442136f 100644
--- a/src/composables/useDate.js
+++ b/src/composables/useDate.js
@@ -15,5 +15,9 @@ export function useDate() {
 		return moment(dateString).format('DD-MM-YYYY');
 	}
 
-	return {calculateDaysBetweenDates, formatShortDate};
+	function formatDateAndTime(dateString) {
+		return moment(dateString).format('YYYY-MM-DD hh:mm A');
+	}
+
+	return {calculateDaysBetweenDates, formatShortDate, formatDateAndTime};
 }
diff --git a/src/pages/workflow/components/primary/WorkflowListingEmails.vue b/src/pages/workflow/components/primary/WorkflowListingEmails.vue
index 906bff743..27e202ed9 100644
--- a/src/pages/workflow/components/primary/WorkflowListingEmails.vue
+++ b/src/pages/workflow/components/primary/WorkflowListingEmails.vue
@@ -1,13 +1,25 @@
 <template>
-	<div v-if="emails?.length" class="border border-light p-4">
+	<div v-if="emails?.length" class="border border-light">
+		<h3 class="lg-bold m-3 text-heading">
+			{{ t('notification.notifications') }}
+		</h3>
 		<ul>
-			<li v-for="email in emails" :key="email.id">
-				<span>
-					<PkpButton is-link @click="openEmail(email.id)">
+			<li
+				v-for="email in emails"
+				:key="email.id"
+				class="flex items-center border-t border-light px-3 py-1"
+			>
+				<span class="flex-1 truncate">
+					<a
+						class="text cursor-pointer text-base-normal hover:underline"
+						@click.prevent="openEmail(email.id)"
+					>
 						{{ email.subject }}
-					</PkpButton>
+					</a>
+				</span>
+				<span class="ms-4 shrink-0 text-base-normal text-secondary">
+					{{ formatDateAndTime(email.dateSent) }}
 				</span>
-				<span>{{ formatShortDate(email.dateSent) }}</span>
 			</li>
 		</ul>
 	</div>
@@ -15,7 +27,6 @@
 
 <script setup>
 import {computed, watch} from 'vue';
-import PkpButton from '@/components/Button/Button.vue';
 
 import {useUrl} from '@/composables/useUrl';
 import {useFetch} from '@/composables/useFetch';
@@ -29,7 +40,7 @@ const props = defineProps({
 });
 
 const {t} = useLocalize();
-const {formatShortDate} = useDate();
+const {formatDateAndTime} = useDate();
 const {apiUrl} = useUrl('emails/authorEmails');
 
 const requestQuery = computed(() => {
diff --git a/src/pages/workflow/components/primary/WorkflowNotificationDisplay.vue b/src/pages/workflow/components/primary/WorkflowNotificationDisplay.vue
index 1a283c5f1..bf73a93ed 100644
--- a/src/pages/workflow/components/primary/WorkflowNotificationDisplay.vue
+++ b/src/pages/workflow/components/primary/WorkflowNotificationDisplay.vue
@@ -1,7 +1,12 @@
 <template>
-	<div v-if="notificationsToDisplay?.length">
-		<div v-for="(notification, i) in notificationsToDisplay" :key="i">
-			{{ notification.text }}
+	<div v-if="notificationsToDisplay?.length" class="flex flex-row space-y-3">
+		<div
+			v-for="(notification, i) in notificationsToDisplay"
+			:key="i"
+			class="w-full border border-light p-3"
+		>
+			<h3 class="lg-bold text-heading">{{ notification.title }}</h3>
+			<p class="pt-2 text-base-normal">{{ notification.text }}</p>
 		</div>
 	</div>
 </template>