VKT(Frontend): Improve ClerkEnrollmentContactRequestPage layout [deploy]

Opetushallitus · Dec 31, 2024 · a1d18ee · a1d18ee
1 parent 61c2548
commit a1d18ee
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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';