From 6141be6e447c909cba0a4e1830e2764b734c0aa6 Mon Sep 17 00:00:00 2001
From: Stefan O'Connell <stefan.oconnell@hrsdc-rhdcc.gc.ca>
Date: Thu, 19 Dec 2024 15:58:05 -0400
Subject: [PATCH] Fix app name header, align email fields with status fields.

---
 public/locales/en/email.json          |  4 ++--
 public/locales/fr/email.json          |  4 ++--
 src/components/ApplicationNameBar.tsx | 14 ++++++++------
 src/pages/email.tsx                   |  5 +----
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/public/locales/en/email.json b/public/locales/en/email.json
index 80a1708cc..138a17377 100644
--- a/public/locales/en/email.json
+++ b/public/locales/en/email.json
@@ -43,7 +43,7 @@
     "error": {
       "required": "The given name(s) is required."
     },
-    "help-message": "Enter first name(s) <strong>and any middle name(s)</strong> of the person who the passport is for.",
+    "help-message": "Enter first name(s) <strong>and any middle name(s)</strong> of the person who the passport is for. <strong>Make sure the information you enter matches your passport application.</strong>",
     "label": "Given name(s)"
   },
   "header": "Get your reference number",
@@ -57,7 +57,7 @@
     "error": {
       "required": "The surname is required."
     },
-    "help-message": "Enter last name of the person who the passport is for.",
+    "help-message": "Enter last name of the person who the passport is for. <strong>Make sure the information you enter matches your passport application.</strong>",
     "label": "Surname"
   }
 }
diff --git a/public/locales/fr/email.json b/public/locales/fr/email.json
index 2ae760d07..b1bf30733 100644
--- a/public/locales/fr/email.json
+++ b/public/locales/fr/email.json
@@ -43,7 +43,7 @@
     "error": {
       "required": "Le(s) prénom(s) est(sont) obligatoire(s)."
     },
-    "help-message": "Indiquez le(s) prénom(s) <strong>et le(s) deuxième(s) prénom(s)</strong> de la personne à qui le passeport est destiné.",
+    "help-message": "Indiquez le(s) prénom(s) <strong>et le(s) deuxième(s) prénom(s)</strong> de la personne à qui le passeport est destiné. <strong>Assurez-vous que les informations que vous indiquez correspondent à votre demande de passeport.</strong>",
     "label": "Prénom(s) sur la demande"
   },
   "header": "Obtenir votre numéro de référence",
@@ -57,7 +57,7 @@
     "error": {
       "required": "Le nom de famille est obligatoire."
     },
-    "help-message": "Indiquez le nom de famille de la personne à qui le passeport est destiné.",
+    "help-message": "Indiquez le nom de famille de la personne à qui le passeport est destiné. <strong>Assurez-vous que les informations que vous indiquez correspondent à votre demande de passeport.</strong>",
     "label": "Nom de famille"
   }
 }
diff --git a/src/components/ApplicationNameBar.tsx b/src/components/ApplicationNameBar.tsx
index 0ae732cec..7b7964334 100644
--- a/src/components/ApplicationNameBar.tsx
+++ b/src/components/ApplicationNameBar.tsx
@@ -9,12 +9,14 @@ const ApplicationNameBar = ({ text, href }: ApplicationNameBarProps) => {
   return (
     <div id="app-bar" className="bg-blue-dark">
       <section className="container mx-auto p-4">
-        <Link
-          href={href}
-          className="font-body text-lg font-bold text-white underline md:text-[28px]"
-        >
-          {text}
-        </Link>
+        <h2>
+          <Link
+            href={href}
+            className="font-body font-bold text-white underline md:text-[30px]"
+          >
+            {text}
+          </Link>
+        </h2>
       </section>
     </div>
   )
diff --git a/src/pages/email.tsx b/src/pages/email.tsx
index c904dff72..5b118e8ab 100644
--- a/src/pages/email.tsx
+++ b/src/pages/email.tsx
@@ -216,9 +216,6 @@ const Email = () => {
             {t('header')}
           </h1>
           <form onSubmit={handleFormikSubmit} id="form-email-esrf" noValidate>
-            <p className="max-w-prose">
-              <Trans i18nKey="header-messages.matches" ns="email" />
-            </p>
             <p>
               <Trans i18nKey="header-messages.required" ns="email" />
             </p>
@@ -285,7 +282,7 @@ const Email = () => {
               }
               textRequired={t('common:required')}
               required
-              helpMessage={t('surname.help-message')}
+              helpMessage={<Trans i18nKey="surname.help-message" ns="email" />}
             />
             <DateSelectField
               id="dateOfBirth"