From dee6ef1c16441c96bc1ad680720da9cedb30a858 Mon Sep 17 00:00:00 2001
From: stvnrlly <steven.reilly@gsa.gov>
Date: Wed, 14 Dec 2022 13:14:35 -0500
Subject: [PATCH] put some things back for simplicity

---
 app/templates/admin_template.html             |  96 ++++++++
 .../uk_components/footer/template.njk         |  32 +--
 .../uk_components/header/template.njk         |  40 +---
 app/templates/main_template.html              | 211 +++---------------
 .../views/agreement/service-agreement.html    |   2 +-
 app/templates/views/jobs/jobs.html            |   2 +-
 .../manage-users/confirm-edit-user-email.html |   6 +-
 .../confirm-edit-user-mobile-number.html      |   2 +-
 .../settings/preview-email-branding.html      |   2 +-
 .../views/user-profile/security-keys.html     |   2 +-
 gulpfile.js                                   |   2 +-
 11 files changed, 133 insertions(+), 264 deletions(-)

diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index 9ad821632..df66b7ba2 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -2,6 +2,15 @@
 {% from "components/banner.html" import banner %}
 {% from "components/cookie-banner.html" import cookie_banner %}
 
+{% block headIcons %}
+  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
+  <link rel="mask-icon" href="{{ asset_url('images/govuk-mask-icon.svg') }}" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/govuk-apple-touch-icon-180x180.png') }}">
+  <link rel="apple-touch-icon" sizes="167x167" href="{{ asset_url('images/govuk-apple-touch-icon-167x167.png') }}">
+  <link rel="apple-touch-icon" sizes="152x152" href="{{ asset_url('images/govuk-apple-touch-icon-152x152.png') }}">
+  <link rel="apple-touch-icon" href="{{ asset_url('images/govuk-apple-touch-icon.png') }}">
+{% endblock %}
+
 {% block head %}
   {%- for font in font_paths %}
   <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
@@ -38,7 +47,94 @@
 {% endblock %}
 
 {% block header %}
+  {% if current_user.is_authenticated %}
+    {% if current_user.platform_admin %}
+      {% set navigation = [
+        {
+          "href": url_for('main.support'),
+          "text": "Support",
+          "active": header_navigation.is_selected('support')
+        },
+        {
+          "href": url_for('main.documentation'),
+          "text": "Documentation",
+          "active": header_navigation.is_selected('documentation')
+        },
+        {
+          "href": url_for('main.user_profile'),
+          "text": current_user.name,
+          "active": header_navigation.is_selected('user-profile')
+        },
+        {
+          "href": url_for('main.platform_admin_splash_page'),
+          "text": "Platform admin",
+          "active": header_navigation.is_selected('platform-admin')
+        },
+        {
+          "href": url_for('main.sign_out'),
+          "text": "Sign out"
+        }
+      ] %}
+    {% else %}
+      {% set navigation = [
+        {
+          "href": url_for('main.support'),
+          "text": "Support",
+          "active": header_navigation.is_selected('support')
+        },
+        {
+          "href": url_for('main.documentation'),
+          "text": "Documentation",
+          "active": header_navigation.is_selected('documentation')
+        },
+        {
+          "href": url_for('main.user_profile'),
+          "text": current_user.name,
+          "active": header_navigation.is_selected('user-profile')
+        },
+        {
+          "href": url_for('main.sign_out'),
+          "text": "Sign out"
+        }
+      ] %}
+    {% endif %}
+  {% else %}
+    {% set navigation = [
+      {
+        "href": url_for('main.support'),
+        "text": "Support",
+        "active": header_navigation.is_selected('support')
+      },
+      {
+        "href": url_for('main.features'),
+        "text": "Features",
+        "active": header_navigation.is_selected('features')
+      },
+      {
+        "href": url_for('main.pricing'),
+        "text": "Pricing",
+        "active": header_navigation.is_selected('pricing')
+      },
+      {
+        "href": url_for('main.documentation'),
+        "text": "Documentation",
+        "active": header_navigation.is_selected('documentation')
+      },
+      {
+        "href": url_for('main.sign_in'),
+        "text": "Sign in",
+        "active": header_navigation.is_selected('sign-in')
+      }
+    ] %}
+  {% endif %}
 
+  {{ govukHeader({
+    "homepageUrl": url_for('main.show_accounts_or_dashboard'),
+    "productName": "Notify",
+    "navigation": navigation,
+    "navigationClasses": "govuk-header__navigation--end",
+    "assetsPath": asset_path + "images"
+  }) }}
 {% endblock %}
 
 {% block footer %}
diff --git a/app/templates/components/uk_components/footer/template.njk b/app/templates/components/uk_components/footer/template.njk
index 1e797312a..a24929812 100644
--- a/app/templates/components/uk_components/footer/template.njk
+++ b/app/templates/components/uk_components/footer/template.njk
@@ -50,37 +50,7 @@
             </div>
           {% endif %}
         {% endif %}
-        {#- The SVG needs `focusable="false"` so that Internet Explorer does not
-        treat it as an interactive element - without this it will be
-        'focusable' when using the keyboard to navigate. #}
-        <svg
-          role="presentation"
-          focusable="false"
-          class="govuk-footer__licence-logo"
-          xmlns="http://www.w3.org/2000/svg"
-          viewbox="0 0 483.2 195.7"
-          height="17"
-          width="41"
-        >
-          <path
-            fill="currentColor"
-            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
-          />
-        </svg>
-        <span class="govuk-footer__licence-description">
-          All content is available under the
-          <a
-            class="govuk-footer__link"
-            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-            rel="license"
-          >Open Government Licence v3.0</a>, except where otherwise stated
-        </span>
-      </div>
-      <div class="govuk-footer__meta-item">
-        <a
-          class="govuk-footer__link govuk-footer__copyright-logo"
-          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
-        >© Crown copyright</a>
+        
       </div>
     </div>
   </div>
diff --git a/app/templates/components/uk_components/header/template.njk b/app/templates/components/uk_components/header/template.njk
index b7f27efa7..b94e9293f 100644
--- a/app/templates/components/uk_components/header/template.njk
+++ b/app/templates/components/uk_components/header/template.njk
@@ -5,45 +5,9 @@
     <div class="govuk-header__logo">
       <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          {# We use an inline SVG for the crown so that we can cascade the
-          currentColor into the crown whilst continuing to support older browsers
-          which do not support external SVGs without a Javascript polyfill. This
-          adds approximately 1kb to every page load.
-
-          We use currentColour so that we can easily invert it when printing and
-          when the focus state is applied. This also benefits users who override
-          colours in their browser as they will still see the crown.
-
-          The SVG needs `focusable="false"` so that Internet Explorer does not
-          treat it as an interactive element - without this it will be
-          'focusable' when using the keyboard to navigate. #}
-          <svg
-            role="presentation"
-            focusable="false"
-            class="govuk-header__logotype-crown"
-            xmlns="http://www.w3.org/2000/svg"
-            viewbox="0 0 132 97"
-            height="32"
-            width="36"
-          >
-            <path
-              fill="currentColor" fill-rule="evenodd"
-              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
-            ></path>
-            {# Fallback PNG image for older browsers.
-
-            The <image> element is a valid SVG element. In SVG, you would specify
-            the URL of the image file with the xlink:href – as we don't reference an
-            image it has no effect. It's important to include the empty xlink:href
-            attribute as this prevents versions of IE which support SVG from
-            downloading the fallback image when they don't need to.
-
-            In other browsers <image> is synonymous for the <img> tag and will be
-            interpreted as such, displaying the fallback image. #}
-            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
-          </svg>
+          
           <span class="govuk-header__logotype-text">
-            GOV.UK
+            U.S.
           </span>
         </span>
         {% if (params.productName) %}
diff --git a/app/templates/main_template.html b/app/templates/main_template.html
index e6da3be7b..e735ca6a7 100644
--- a/app/templates/main_template.html
+++ b/app/templates/main_template.html
@@ -1,118 +1,46 @@
+{% from "./components/uk_components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "./components/uk_components/header/macro.njk" import govukHeader -%}
+{% from "./components/uk_components/footer/macro.njk" import govukFooter -%}
+{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
+{%- set assetUrl = assetUrl | default(assetPath) -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
   <head>
     <meta charset="utf-8" />
-    <title>{% block pageTitle %}{% endblock %}</title>
+    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
     {# Ensure that older IE versions always render with the correct rendering engine #}
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
     {% block headIcons %}
-    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
-    <link rel="mask-icon" href="{{ asset_url('images/govuk-mask-icon.svg') }}" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/govuk-apple-touch-icon-180x180.png') }}">
-    <link rel="apple-touch-icon" sizes="167x167" href="{{ asset_url('images/govuk-apple-touch-icon-167x167.png') }}">
-    <link rel="apple-touch-icon" sizes="152x152" href="{{ asset_url('images/govuk-apple-touch-icon-152x152.png') }}">
-    <link rel="apple-touch-icon" href="{{ asset_url('images/govuk-apple-touch-icon.png') }}">
+      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
+      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
     {% endblock %}
 
     {% block head %}{% endblock %}
     {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
     {# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
-    <!-- <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png"> -->
+    <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
   </head>
   <body class="govuk-template__body {{ bodyClasses }}">
     <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
     {% block bodyStart %}{% endblock %}
 
+    {% block skipLink %}
+      {{ govukSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }}
+    {% endblock %}
 
-    <a href="#main-content" class="govuk-skip-link">Skip to main content</a>
-
-    <header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
-        
-        <div class="govuk-header__logo">
-            <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="govuk-header__link govuk-header__link--homepage">
-                <span class="govuk-header__logotype">
-                    <span class="govuk-header__logotype-text">
-                        U.S.
-                    </span>
-                </span>
-                <span class="govuk-header__product-name">
-                    Notify
-                </span>
-            </a>
-        </div>
-        <div class="govuk-header__content">
-            <button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-            <nav>
-              <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
-                {% if current_user.is_authenticated %}
-                <li class="govuk-header__navigation-item">
-                    <a class="govuk-header__link" href="{{ url_for('main.support') }}">
-                    Support
-                    </a>
-                </li>
-                <li class="govuk-header__navigation-item">
-                    <a class="govuk-header__link" href="{{ url_for('main.documentation') }}">
-                    Documentation
-                    </a>
-                </li>
-                <li class="govuk-header__navigation-item">
-                    <a class="govuk-header__link" href="{{ url_for('main.user_profile') }}">
-                    {{ current_user.name }}
-                    </a>
-                </li>
-                {% if current_user.platform_admin %}
-                <li class="govuk-header__navigation-item">
-                    <a class="govuk-header__link" href="{{ url_for('main.platform_admin_splash_page') }}">
-                    Platform admin
-                    </a>
-                </li>
-                {% endif %}
-                <li class="govuk-header__navigation-item">
-                    <a class="govuk-header__link" href="{{ url_for('main.sign_out') }}">
-                    Sign out
-                    </a>
-                </li>
-                {% else %}
-                    <li class="govuk-header__navigation-item">
-                      <a class="govuk-header__link" href="{{ url_for('main.support') }}">
-                        Support
-                      </a>
-                    </li>
-                  
-                    <li class="govuk-header__navigation-item">
-                      <a class="govuk-header__link" href="{{ url_for('main.features') }}">
-                        Features
-                      </a>
-                    </li>
-                  
-                    <li class="govuk-header__navigation-item">
-                      <a class="govuk-header__link" href="{{ url_for('main.pricing') }}">
-                        Pricing
-                      </a>
-                    </li>
-                  
-                    <li class="govuk-header__navigation-item">
-                      <a class="govuk-header__link" href="{{ url_for('main.documentation') }}">
-                        Documentation
-                      </a>
-                    </li>
-                  
-                    <li class="govuk-header__navigation-item">
-                      <a class="govuk-header__link" href="{{ url_for('main.sign_in') }}">
-                        Sign in
-                      </a>
-                    </li>
-                {% endif %}
-              </ul>
-            </nav>
-        </div>
-    </div>
-    </header>
+    {% block header %}
+      {{ govukHeader({}) }}
+    {% endblock %}
 
     {% block main %}
       <div class="govuk-width-container">
@@ -123,98 +51,9 @@
       </div>
     {% endblock %}
 
-    <footer class="govuk-footer js-footer" role="contentinfo">
-        <div class="govuk-width-container ">
-            <div class="govuk-footer__navigation">
-                <div class="govuk-footer__section">
-                  <h2 class="govuk-footer__heading govuk-heading-m">About Notify</h2>
-                    <ul class="govuk-footer__list govuk-footer__list--columns-1">
-                        
-                          <li class="govuk-footer__list-item">
-                            <a class="govuk-footer__link" href="{{ url_for('main.features') }}">
-                              Features
-                            </a>
-                          </li>
-                        
-                          <li class="govuk-footer__list-item">
-                            <a class="govuk-footer__link" href="{{ url_for('main.roadmap') }}">
-                              Roadmap
-                            </a>
-                          </li>
-                          <li class="govuk-footer__list-item">
-                            <a class="govuk-footer__link" href="{{ url_for('main.security') }}">
-                              Security
-                            </a>
-                          </li>
-                          <li class="govuk-footer__list-item">
-                            <a class="govuk-footer__link" href="{{ url_for('main.terms') }}">
-                              Terms of use
-                            </a>
-                          </li>
-                    </ul>
-                </div>
-                <div class="govuk-footer__section">
-                  <h2 class="govuk-footer__heading govuk-heading-m">Using Notify</h2>
-                    <ul class="govuk-footer__list govuk-footer__list--columns-1">
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.get_started') }}">
-                            Get started
-                        </a>
-                        </li>
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.pricing') }}">
-                            Pricing
-                        </a>
-                        </li>
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.trial_mode_new') }}">
-                            Trial mode
-                        </a>
-                        </li>
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.message_status') }}">
-                            Delivery status
-                        </a>
-                        </li>
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.guidance_index') }}">
-                            Guidance
-                        </a>
-                        </li>
-                    
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.documentation') }}">
-                            API documentation
-                        </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="govuk-footer__section">
-                  <h2 class="govuk-footer__heading govuk-heading-m">Support</h2>
-                    <ul class="govuk-footer__list govuk-footer__list--columns-1">
-                        <li class="govuk-footer__list-item">
-                        <a class="govuk-footer__link" href="{{ url_for('main.support') }}">
-                            Contact us
-                        </a>
-                        </li>
-                        
-                      
-                    </ul>
-                  
-                </div>
-              
-            </div>
-            <hr class="govuk-footer__section-break">
-          <div class="govuk-footer__meta">
-            <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-                <h2 class="govuk-visually-hidden">Support links</h2>
-                  <div class="govuk-footer__meta-custom">
-                    Built by the <a href="https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services/tts-solutions" class="govuk-footer__link">Technology Transformation Service</a>
-                  </div>
-            </div>
-          </div>
-        </div>
-      </footer>
+    {% block footer %}
+      {{ govukFooter({}) }}
+    {% endblock %}
 
     {% block bodyEnd %}{% endblock %}
   </body>
diff --git a/app/templates/views/agreement/service-agreement.html b/app/templates/views/agreement/service-agreement.html
index 95106c9a0..c61aadbdc 100644
--- a/app/templates/views/agreement/service-agreement.html
+++ b/app/templates/views/agreement/service-agreement.html
@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/uk_components/page-header.html" import page_header %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/uk_components/button/macro.njk" import govukButton %}
 {% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
 
diff --git a/app/templates/views/jobs/jobs.html b/app/templates/views/jobs/jobs.html
index b76f892e3..27b907506 100644
--- a/app/templates/views/jobs/jobs.html
+++ b/app/templates/views/jobs/jobs.html
@@ -1,6 +1,6 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% extends "withnav_template.html" %}
-{% from "components/button/macro.njk" import govukButton %}
+{% from "components/uk_components/button/macro.njk" import govukButton %}
 
 {% block service_page_title %}
   Uploads
diff --git a/app/templates/views/manage-users/confirm-edit-user-email.html b/app/templates/views/manage-users/confirm-edit-user-email.html
index 645b1bb5b..00176020c 100644
--- a/app/templates/views/manage-users/confirm-edit-user-email.html
+++ b/app/templates/views/manage-users/confirm-edit-user-email.html
@@ -1,7 +1,7 @@
 {% extends "withnav_template.html" %}
-{% from "components/uk_components/page-header.html" import page_header %}
-{% from "components/uk_components/page-footer.html" import page_footer %}
-{% from "components/uk_components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/form.html" import form_wrapper %}
 {% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
 
 {% block per_page_title %}
diff --git a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
index 3cb5ce7fe..9c9382ba0 100644
--- a/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
+++ b/app/templates/views/manage-users/confirm-edit-user-mobile-number.html
@@ -2,7 +2,7 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}
-{% from "components/uk_components/uk_components/back-link/macro.njk" import govukBackLink %}
+{% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
 
 {% block per_page_title %}
   Confirm change of mobile number
diff --git a/app/templates/views/organisations/organisation/settings/preview-email-branding.html b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
index 6b401f711..aa4ea8a59 100644
--- a/app/templates/views/organisations/organisation/settings/preview-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
@@ -1,6 +1,6 @@
 {% extends "org_template.html" %}
 {% from "components/form.html" import form_wrapper %}
-{% from "components/button/macro.njk" import govukButton %}
+{% from "components/uk_components/button/macro.njk" import govukButton %}
 {% from "components/branding-preview.html" import email_branding_preview %}
 
 {% block org_page_title %}
diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html
index 6a9401775..9b69ba941 100644
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -4,7 +4,7 @@
 {% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
 {% from "components/table.html" import edit_field, mapping_table, row, field, row_heading %}
 {% from "components/webauthn-api-check.html" import webauthn_api_check %}
-{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}
+{% from "components/uk_components/error-message/macro.njk" import govukErrorMessage %}
 
 {% set page_title = 'Security keys' %}
 {% set credentials = current_user.webauthn_credentials %}
diff --git a/gulpfile.js b/gulpfile.js
index fbc9717ea..37988f825 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -161,7 +161,7 @@ const sass = () => {
     .pipe(plugins.prettyerror())
     .pipe(plugins.sass.sync({
       includePaths: [
-        // paths.npm + 'govuk-elements-sass/public/sass/',
+        paths.npm + 'govuk-elements-sass/public/sass/',
         paths.toolkit + 'stylesheets/',
         paths.govuk_frontend,
         paths.npm