Reduce duplication by using a shared wrapper for all page layouts #3325

src/read-side/html-pages/create-user-account-form-page/create-user-account-form-page-layout.ts

@@ -1,24 +1,18 @@
 import { pipe } from 'fp-ts/function';
+import { toHtmlFragment } from '../../../types/html-fragment';
 import { toContentWrappedInLayout } from '../content-wrapped-in-layout';
-import { mobileMenu } from '../mobile-menu/mobile-menu';
 import { PageLayout } from '../page-layout';
-import { siteFooter } from '../shared-components/site-footer';
-import { siteHeader } from '../shared-components/site-header';
+import { wrapWithHeaderAndFooter } from '../shared-components/wrap-with-header-and-footer';
 
 export const createUserAccountFormPageLayout: PageLayout = (user) => (page) => pipe(
   `
-  <div class="create-user-account-form-page__container">
-    ${siteHeader(user)}
-
-    <main id="mainContent" class="create-user-account-form-page__main">
-      <div class="page-content">
-        ${page.content}
-      </div>
-    </main>
-
-    ${siteFooter}
-  </div>
-  ${mobileMenu(user)}
+  <main id="mainContent" class="create-user-account-form-page__main">
+    <div class="page-content">
+      ${page.content}
+    </div>
+  </main>
   `,
+  toHtmlFragment,
+  wrapWithHeaderAndFooter('create-user-account-form-page__container', user),
   toContentWrappedInLayout,
 );