VIA-608 AJ Fix heading margins on all pages as per design discussion

Author: ankur-jain-nhs

src/app/_components/static/NoJsMessage.tsx

@@ -6,7 +6,7 @@ export function NoJsMessage() {
       <main className="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
         <div className="nhsuk-grid-row">
           <div className="nhsuk-grid-column-full">
-            <h1 className="app-dynamic-page-title__heading">Cannot show page</h1>
+            <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>Cannot show page</h1>
             <p>You need to turn on JavaScript to access NHS App services in your browser.</p>
             <p>
               <a

src/app/check-and-book-vaccinations/page.tsx

@@ -11,7 +11,7 @@ const VaccinationsHub = () => {
       <title>{`${SERVICE_HEADING} - ${NHS_TITLE_SUFFIX}`}</title>
       <BackToNHSAppLink />
       <MainContent>
-        <h1 className={"app-dynamic-page-title__heading"}>{SERVICE_HEADING}</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-3"}>{SERVICE_HEADING}</h1>
         <h2 className="nhsuk-heading-s">Vaccines if you&#39;re pregnant</h2>
         <p>Some vaccines are recommended during pregnancy to protect the health of you and your baby.</p>
         <ul className="nhsapp-cards nhsapp-cards--stacked" data-testid={"vaccine-cardlinks-adults"}>

src/app/not-found.tsx

@@ -11,7 +11,7 @@ const NotFound = () => {
 
       <BackLink />
       <MainContent>
-        <h1>Page not found</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>Page not found</h1>
         <p>We&#39;ll fix this link as soon as possible. Try again later or use a different service.</p>
         <p>
           For urgent medical advice, go to{" "}

src/app/our-policies/accessibility/page.tsx

@@ -12,7 +12,7 @@ const AccessibilityStatement = () => {
 
       <BackLink />
       <MainContent>
-        <h1>Accessibility statement for {SERVICE_HEADING}</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>Accessibility statement for {SERVICE_HEADING}</h1>
 
         <article>
           <section>

src/app/our-policies/cookies-policy/page.tsx

@@ -23,7 +23,7 @@ const CookiesPolicy = () => {
 
       <BackLink />
       <MainContent>
-        <h1>Cookies</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>Cookies</h1>
 
         <ContentsList>
           {[summary, necessaryCookies, changes].map((value: IdAndHeading, index: number): JSX.Element => {

src/app/service-failure/page.tsx

@@ -15,7 +15,7 @@ const ServiceFailure = () => {
 
       <BackToNHSAppLink />
       <MainContent>
-        <h1>There is a problem with the service</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>There is a problem with the service</h1>
         <p>This may be a temporary problem.</p>
         <p>
           {hasContextLoaded && (

src/app/session-logout/page.tsx

@@ -20,7 +20,7 @@ const SessionLogout = () => {
     <>
       <title>{`You have logged out - ${SERVICE_HEADING} - ${NHS_TITLE_SUFFIX}`}</title>
       <MainContent>
-        <h1>You have logged out</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>You have logged out</h1>
         <p>If you were entering information, it has not been saved and you will need to re-enter it.</p>
         <p>To continue, close the tab which has the service open and log in again.</p>
       </MainContent>

src/app/session-timeout/page.tsx

@@ -20,7 +20,7 @@ const SessionTimeout = () => {
     <>
       <title>{`You have been logged out - ${SERVICE_HEADING} - ${NHS_TITLE_SUFFIX}`}</title>
       <MainContent>
-        <h1>You have been logged out</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>You have been logged out</h1>
         <p>
           For security reasons, you&#39;re automatically logged out if you have not used the service for 10 minutes.
         </p>

src/app/sso-failure/page.tsx

@@ -15,7 +15,7 @@ const SSOFailure = () => {
 
       <BackToNHSAppLink />
       <MainContent>
-        <h1>There is a problem</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>There is a problem</h1>
         <p>There was an issue with NHS login. This may be a temporary problem.</p>
         <p>
           {hasContextLoaded && (

src/app/vaccines-during-pregnancy/page.tsx

@@ -11,7 +11,7 @@ const VaccinesDuringPregnancy = (): JSX.Element => {
       <title>{`${VACCINES_FOR_PREGNANT_PAGE} - ${NHS_TITLE_SUFFIX}`}</title>
       <BackLink />
       <MainContent>
-        <h1 className={"app-dynamic-page-title__heading"}>{VACCINES_FOR_PREGNANT_PAGE}</h1>
+        <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-5"}>{VACCINES_FOR_PREGNANT_PAGE}</h1>
         <ul className="nhsapp-cards nhsapp-cards--stacked">
           <CardLinkWithDescription
             title={"Whooping cough (Pertussis)"}