pkp/pkp-lib#9453 Refine styling&html structure.

pkp/pkp-lib#9453 move the logic to store, show only relevant dates for declined scenario

pkp/pkp-lib#9453  Add scenario for uncomplete review, handle it as declined

src/components/ListPanel/ListPanel.vue

@@ -152,9 +152,8 @@ export default {
 
 .listPanel {
 	position: relative;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 	border-radius: @radius;
-	border-top: @grid-border;
+	border: @grid-border;
 }
 
 .listPanel__header {

src/components/ListPanel/listingFiles/ListingFilesListPanel.vue

@@ -1,10 +1,10 @@
 <template>
 	<ListPanel :title="title" :description="description" :items="files">
 		<template #header>
-			<h2 class="pkpHeader__title">
-				<span class="text-dark-accent">{{ title }}</span>
+			<h2 class="text-lg-bold text-heading">
+				<span>{{ title }}</span>
 			</h2>
-			<div v-if="description">{{ description }}</div>
+			<div v-if="description" class="text-base-normal">{{ description }}</div>
 		</template>
 		<template #item="{item}">
 			<div class="flex items-center">

src/components/Modal/SideModalBody.vue

@@ -13,15 +13,19 @@
 							@click="closeModal"
 						>
 							<span class="sr-only">{{ t('common.close') }}</span>
-							<Icon class="h-8 w-8" icon="BackButton" :aria-hidden="true" />
+							<Icon
+								class="h-8 w-8 text-primary"
+								icon="BackButton"
+								:aria-hidden="true"
+							/>
 						</button>
 					</div>
 					<div class="ml-8 mr-8 flex-grow">
 						<div class="flex">
 							<div class="flex-grow">
 								<!-- @slot Small text above title, might be useful for example to display submission Id-->
 								<div class="text-xl-medium"><slot name="pre-title"></slot></div>
-								<DialogTitle as="h1" class="mt-1 text-4xl-bold">
+								<DialogTitle as="h1" class="mt-1 text-4xl-bold text-heading">
 									<!-- @slot Main title, also used for accessibility (aria-labelledby) -->
 									<slot name="title"></slot>
 								</DialogTitle>

src/components/Modal/SideModalLayout2Columns.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="border-ligh flex h-full w-full border-r border-t border-light">
-		<div class="w-3/5 border-r border-light p-4">
+	<div class="border-ligh flex w-full border-t border-light">
+		<div class="w-3/5 border-e border-light p-4">
 			<div class="bg-secondary p-5">
 				<slot name="left"></slot>
 			</div>

src/pages/reviewerSubmission/ReviewerSubmissionPage.stories.js

@@ -1,9 +1,12 @@
-import {within, userEvent} from '@storybook/testing-library';
+import {within, userEvent} from '@storybook/test';
 import {http, HttpResponse} from 'msw';
 
 import ReviewerSubmissionPage from './ReviewerSubmissionPage.vue';
-import Review1Mock from './mocks/review1';
-import Review2Mock from './mocks/review2';
+import Review1Completed from './mocks/review1_completed.js';
+import Review2Declined from './mocks/review2_declined.js';
+import Review3Unfinished from './mocks/review3_unfinished.js';
+
+import {allModes} from '../../../.storybook/modes.js';
 
 export default {
 	title: 'Pages/ReviewerSubmission',
@@ -30,22 +33,42 @@ export default {
 					reviewRoundNumber: 2,
 					submittedOn: '2024-02-08 12:51:12',
 				},
+				{
+					submissionId: 16,
+					reviewRoundId: 17,
+					reviewRoundNumber: 3,
+					submittedOn: '2024-02-08 12:51:12',
+				},
 			],
 		},
 	},
 	parameters: {
+		chromatic: {
+			modes: {
+				desktop: {disable: true},
+				'desktop rtl': {disable: true},
+				desktopLargeHeight: allModes['desktopLargeHeight'],
+				'desktopLargeHeight rtl': allModes['desktopLargeHeight rtl'],
+			},
+		},
 		msw: {
 			handlers: [
 				http.get(
 					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/15',
 					async (r) => {
-						return HttpResponse.json(Review1Mock);
+						return HttpResponse.json(Review1Completed);
 					},
 				),
 				http.get(
 					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/16',
 					async (r) => {
-						return HttpResponse.json(Review2Mock);
+						return HttpResponse.json(Review2Declined);
+					},
+				),
+				http.get(
+					'https://mock/index.php/publicknowledge/api/v1/reviews/history/16/17',
+					async (r) => {
+						return HttpResponse.json(Review3Unfinished);
 					},
 				),
 			],
@@ -65,7 +88,7 @@ export const OpenModalAccepted = {
 	},
 	decorators: [
 		() => ({
-			template: '<div style="height: 1200px"><story/></div>',
+			template: '<div style="height: 1600px"><story/></div>',
 		}),
 	],
 };
@@ -80,7 +103,22 @@ export const OpenModalDeclined = {
 	},
 	decorators: [
 		() => ({
-			template: '<div style="height: 1200px"><story/></div>',
+			template: '<div style="height: 1600px"><story/></div>',
+		}),
+	],
+};
+
+export const OpenModalUnfinished = {
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Read Round 3 Review'));
+	},
+	decorators: [
+		() => ({
+			template: '<div style="height: 1600px"><story/></div>',
 		}),
 	],
 };

src/pages/reviewerSubmission/ReviewerSubmissionPage.vue

@@ -1,22 +1,27 @@
 <template>
-	<div class="bg-lightest border border-light text-dark p-8 mb-4">
-		<h2 class="text-dark-accent">{{ t('reviewer.submission.reviewRound.info') }}</h2>
-		<p
-			v-for="review in store.reviewRoundHistories"
-			:key="review.reviewRoundId"
-		>
-			<span class="text-lg-normal">
-				{{ t(
-					'reviewer.submission.reviewRound.info.submittedOn',
-					{round: review.reviewRoundNumber, submittedOn: formatShortDate(review.submittedOn)}
-				) }}
+	<div class="mb-4 border border-light bg-secondary p-6 text-base-normal">
+		<h2 class="text-lg-bold text-heading">
+			{{ t('reviewer.submission.reviewRound.info') }}
+		</h2>
+		<p v-for="review in store.reviewRoundHistories" :key="review.reviewRoundId">
+			<span>
+				{{
+					t('reviewer.submission.reviewRound.info.submittedOn', {
+						round: review.reviewRoundNumber,
+						submittedOn: formatShortDate(review.submittedOn),
+					})
+				}}
 			</span>
 			<PkpButton
 				is-link="true"
 				class="ms-4"
 				@click="store.openRoundHistoryModal(review)"
 			>
-				{{ t('reviewer.submission.reviewRound.info.read', {round: review.reviewRoundNumber}) }}
+				{{
+					t('reviewer.submission.reviewRound.info.read', {
+						round: review.reviewRoundNumber,
+					})
+				}}
 			</PkpButton>
 		</p>
 	</div>