From a1d18eebc4f66922b21febf73734a5f65059a804 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Tue, 31 Dec 2024 13:42:35 +0200
Subject: [PATCH] VKT(Frontend): Improve ClerkEnrollmentContactRequestPage
 layout [deploy]

---
 .../vkt/public/i18n/fi-FI/examiner.json       |  6 +-
 .../ClerkEnrollmentContactRequestPage.tsx     | 92 ++++++++++---------
 .../pages/_examiner-contact-request-page.scss | 15 +++
 frontend/packages/vkt/src/styles/styles.scss  |  3 +-
 4 files changed, 68 insertions(+), 48 deletions(-)
 create mode 100644 frontend/packages/vkt/src/styles/pages/_examiner-contact-request-page.scss

diff --git a/frontend/packages/vkt/public/i18n/fi-FI/examiner.json b/frontend/packages/vkt/public/i18n/fi-FI/examiner.json
index 6b8f09ffb..90027fad2 100644
--- a/frontend/packages/vkt/public/i18n/fi-FI/examiner.json
+++ b/frontend/packages/vkt/public/i18n/fi-FI/examiner.json
@@ -23,12 +23,12 @@
         "email": "Sähköpostiosoite",
         "examination": "Tutkinto",
         "phoneNumber": "Puhelinnumero",
-        "partialExams": "Osakokeet, jotka haluan suorittaa",
-        "previousExams": "Osallistunut aiempiin tutkintoihin?",
+        "partialExams": "Osakokeet, jotka haluaa suorittaa",
+        "previousExams": "Osallistunut aiempiin tutkintoihin",
         "createEnrollment": "Luo ilmoittautuminen",
         "contactDetails": "Yhteydenoton tiedot",
         "message": "Viesti",
-        "wantFullExam": "Haluan suorittaa koko tutkinnon?",
+        "wantFullExam": "Haluaa suorittaa koko tutkinnon",
         "deleteAreYouSure": "Haluatko varmasti poistaa yhteydenoton?",
         "deleteDescription": "Toimintoa ei voi peruuttaa!",
         "deleteContactRequest": "Poista yhteydenotto",
diff --git a/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx b/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
index 2db19f82a..e95b82978 100644
--- a/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
+++ b/frontend/packages/vkt/src/pages/ClerkEnrollmentContactRequestPage.tsx
@@ -198,12 +198,12 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
   };
 
   return (
-    <Box className="clerk-homepage">
+    <Box className="examiner-contact-request-page">
       <Grid
         container
         rowSpacing={4}
         direction="column"
-        className="clerk-homepage__grid-container"
+        className="examiner-contact-request-page__grid-container"
       >
         <div>
           <TopControls backTo={backTo} />
@@ -214,54 +214,58 @@ export const ClerkEnrollmentContactRequestPage: FC = () => {
         <Grid item>
           <Paper
             elevation={3}
-            className="clerk-homepage__exam-events clerk-homepage-create-exam-events"
+            className="examiner-contact-request-page__paper rows gapped-xxl"
           >
-            <H2>{t('contactFields')}</H2>
-            <div className="grid-columns gapped">
-              <div className="rows gapped">
-                <H3>{t('lastName')}</H3>
-                <Text>{enrollment.lastName}</Text>
-              </div>
-              <div className="rows gapped">
-                <H3>{t('firstName')}</H3>
-                <Text>{enrollment.firstName}</Text>
-              </div>
-              <div className="rows gapped">
-                <H3>{t('email')}</H3>
-                <Text>{enrollment.email}</Text>
-              </div>
-              <div className="rows gapped">
-                <H3>{t('phoneNumber')}</H3>
-                <Text>{enrollment.phoneNumber}</Text>
+            <div className="rows gapped">
+              <H2>{t('contactFields')}</H2>
+              <div className="grid-columns gapped">
+                <div className="rows gapped-xxs">
+                  <H3>{t('lastName')}:</H3>
+                  <Text>{enrollment.lastName}</Text>
+                </div>
+                <div className="rows gapped-xxs">
+                  <H3>{t('firstName')}:</H3>
+                  <Text>{enrollment.firstName}</Text>
+                </div>
+                <div className="rows gapped-xxs">
+                  <H3>{t('email')}:</H3>
+                  <Text>{enrollment.email}</Text>
+                </div>
+                <div className="rows gapped-xxs">
+                  <H3>{t('phoneNumber')}:</H3>
+                  <Text>{enrollment.phoneNumber}</Text>
+                </div>
               </div>
             </div>
             <Divider />
-            <H2>{t('contactDetails')}</H2>
             <div className="rows gapped">
-              <H3>{t('wantFullExam')}</H3>
-              <Text>
-                {enrollment.isFullExam
-                  ? translateCommon('yes')
-                  : translateCommon('no')}
-              </Text>
-            </div>
-            {!enrollment.isFullExam && (
-              <div className="rows gapped">
-                <H3>{t('partialExams')}</H3>
-                <Text>{enrollment.partialExamSelection}</Text>
+              <H2>{t('contactDetails')}</H2>
+              <div className="rows gapped-xxs">
+                <H3>{t('wantFullExam')}:</H3>
+                <Text>
+                  {enrollment.isFullExam
+                    ? translateCommon('yes')
+                    : translateCommon('no')}
+                </Text>
+              </div>
+              {!enrollment.isFullExam && (
+                <div className="rows gapped-xxs">
+                  <H3>{t('partialExams')}:</H3>
+                  <Text>{enrollment.partialExamSelection}</Text>
+                </div>
+              )}
+              <div className="rows gapped-xxs">
+                <H3>{t('previousExams')}:</H3>
+                <Text>
+                  {enrollment.hasPreviousEnrollment
+                    ? translateCommon('yes')
+                    : translateCommon('no')}
+                </Text>
+              </div>
+              <div className="rows gapped-xxs">
+                <H3>{t('message')}:</H3>
+                <Text>{enrollment.message}</Text>
               </div>
-            )}
-            <div className="rows gapped">
-              <H3>{t('previousExams')}</H3>
-              <Text>
-                {enrollment.hasPreviousEnrollment
-                  ? translateCommon('yes')
-                  : translateCommon('no')}
-              </Text>
-            </div>
-            <div className="rows gapped">
-              <H3>{t('message')}</H3>
-              <Text>{enrollment.message}</Text>
             </div>
             <Divider />
             <div className="rows gapped-sm flex-end">
diff --git a/frontend/packages/vkt/src/styles/pages/_examiner-contact-request-page.scss b/frontend/packages/vkt/src/styles/pages/_examiner-contact-request-page.scss
new file mode 100644
index 000000000..589e6ae1e
--- /dev/null
+++ b/frontend/packages/vkt/src/styles/pages/_examiner-contact-request-page.scss
@@ -0,0 +1,15 @@
+.examiner-contact-request-page {
+  flex: 1;
+
+  & &__grid-container {
+    display: block;
+
+    &__heading {
+      margin: 2rem 0 1rem 1rem;
+    }
+  }
+
+  & &__paper {
+    padding: 3rem;
+  }
+}
diff --git a/frontend/packages/vkt/src/styles/styles.scss b/frontend/packages/vkt/src/styles/styles.scss
index 513cc39af..ed1f10f52 100644
--- a/frontend/packages/vkt/src/styles/styles.scss
+++ b/frontend/packages/vkt/src/styles/styles.scss
@@ -25,8 +25,9 @@
 @import 'pages/clerk-enrollment-overview-page';
 @import 'pages/clerk-exam-event-overview-page';
 @import 'pages/clerk-homepage';
-@import 'pages/examiner-exam-event-page';
 @import 'pages/examiner-details-page';
+@import 'pages/examiner-contact-request-page';
+@import 'pages/examiner-exam-event-page';
 @import 'pages/examiner-homepage';
 @import 'pages/logout-success-page';
 @import 'pages/not-found-page';