Fix app name header, align email fields with status fields.

DTS-STN · Dec 19, 2024 · 6141be6 · 6141be6
1 parent a88c9cb
commit 6141be6
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"