Removed all govuk css (#2814)

* Removed all govuk css

* Updated reference files

* Removing govuk js

* Fixed casing for modules, removed unused page

* Got more reference images

* Updated template page

* Removed govuk padding util

* Updated hint to uswds hint

* More govuk cleanup

* Commiting backstopjs ref files

* Fixed all unit tests that broke due to brittleness around govuk styling

* Added new ref images

* Final removal of govuk

* Officially removed all govuk references

* Updated reference file

* Updated link to button

* UI modernization

* Cleanup

* removed govuk escaping tests since they are no longer needed

* Fix CodeQL security issue in escapeElementName function

- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping

* Found more govuk removal. Fixed unit tests

* Add missing pipeline check to pre-commit

* updated test

* Updated e2e test

* More update to e2e test

* Fixed another e2e test

* Simple PR comments addressed

* More updates

* Updated backstop ref files

* Refactored folder selection for non-admins

* Updated redundant line

* Updated tests to include correct mocks

* Added more ref files

* Addressing carlos comments

* Addressing Carlo comments, cleanup of window initing

* More cleanup and addressing carlo comments

* Fixing a11 scan

* Fixed a few issues with javascript

* Fixed for pr

* Fixing e2e tests

* Tweaking e2e test

* Added more ref files and cleaned up urls.js

* Fixed bug with creating new template

* Removed brittle test - addressed code ql comment

* e2e race condition fix

* More e2e test fixes

* Updated e2e tests to not wait for text sent

* Updated test to not wait for button click response

* Made tear down more resilent if staging is down

* reverted e2e test to what was working before main merge

* Updated backstopRef images

* Updated gulp to include job-polling differently

app/templates/partials/jobs/notifications.html

@@ -25,12 +25,12 @@
       <div class="dashboard-table job-status-table table-overflow-x-auto">
     {% endif %}
       {% if job.still_processing %}
-        <p class="bottom-gutter hint">
+        <p class="margin-bottom-3 usa-hint">
           Report is {{ "{:.0f}%".format(job.percentage_complete * 0.99) }} complete…
         </p>
       {% elif notifications  and time_left != "Data no longer available" %}
-        <p class="bottom-gutter">
-          <a href="{{ download_link }}" download class="usa-link heading-small">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
+        <p class="margin-bottom-3">
+          <a href="{{ download_link }}" download class="usa-link font-heading-md">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
           &emsp;
           <span id="time-left">{{ time_left }}</span>
         </p>

app/templates/partials/jobs/status.html

@@ -20,7 +20,7 @@
 {% endset %}
 
 <div class="ajax-block-container">
-  <p class='bottom-gutter'>
+  <p class='margin-bottom-3'>
     {% if not job.finished_processing %}
       {% if job.scheduled_for %}
         <div class="usa-alert usa-alert--info">
@@ -80,7 +80,7 @@
         Notify cannot send these messages because you have reached a limit. You can only send {{ current_service.message_limit|format_thousands }} messages per day and {{ 250000|format_thousands }} messages in total.
     </p>
     <p class="usa-error-message">
-        Upload this spreadsheet again tomorrow or <a class="usa-link" href="https://www.notifications.service.gov.uk/support">contact the Notify.gov team</a> to raise the limit.
+        Upload this spreadsheet again tomorrow or contact the Notify.gov team to raise the limit.
     </p>
     {% endif %}
 </div>

app/templates/partials/templates/guidance-formatting-letters.html

@@ -1,6 +1,6 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="heading-medium">Formatting</h2>
+<h2 class="font-heading-lg">Formatting</h2>
 <p class="usa-body">
   To put a heading in your template, use a hash:
 </p>

app/templates/partials/templates/guidance-formatting.html

@@ -1,13 +1,13 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="heading-medium">Formatting</h2>
-<p class="bottom-gutter-1-3">
+<h2 class="font-heading-lg">Formatting</h2>
+<p class="margin-bottom-1">
   To put a title in your template, use a hash:
 </p>
 <div>
   {{ usaInsetText({"text": "# This is a title", "classes": ""})}}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
   To make bullet points, use asterisks:
 </p>
 <div>
@@ -18,13 +18,13 @@
     "classes": ""})
   }}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
   To add inset text, use a caret:
 </p>
 <div>
   {{ usaInsetText({"text": "^ You must tell us if your circumstances change", "classes": ""})}}
 </div>
-<p class="bottom-gutter-1-3">
+<p class="margin-bottom-1">
   To add a horizontal line, use three dashes:
 </p>
 {{ usaInsetText({

app/templates/partials/templates/guidance-optional-content.html

@@ -9,7 +9,7 @@
   <p class="usa-body">
     Use double parenthesis and ‘??’ to define optional content.
   </p>
-  <p class="bottom-gutter-1-3">
+  <p class="margin-bottom-1">
     For example if you only want to show something to people who are under
     18:
   </p>

app/templates/partials/templates/guidance-personalization.html

@@ -6,7 +6,7 @@
   </button>
 </h3>
 <div id="personalization" class="usa-accordion__content usa-prose">
-  <p class="bottom-gutter-1-3">
+  <p class="margin-bottom-1">
     Use double parenthesis to personalize your message:
   </p>
   {{ usaInsetText({

app/templates/partials/templates/guidance-send-a-document.html

@@ -1,6 +1,6 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="heading-medium">
+<h2 class="font-heading-lg">
   Send a document by email
 </h2>
 <p class="usa-body">

app/templates/partials/tour.html

@@ -1,10 +1,10 @@
 {% from "components/banner.html" import banner_wrapper %}
 
 {% call banner_wrapper(type='tour') %}
-    <p class="heading-medium">Try sending yourself this example</p>
-    <div class="grid-row bottom-gutter {% if help != '1' %}greyed-out-step{% endif %}">
+    <p class="font-heading-lg">Try sending yourself this example</p>
+    <div class="grid-row margin-bottom-3 {% if help != '1' %}text-base-dark opacity-50{% endif %}">
       <div class="grid-col-2">
-        <p class="heading-large">1.</p>
+        <p class="font-heading-xl">1.</p>
       </div>
       <div class="grid-col-10">
         <p class="usa-body">
@@ -12,9 +12,9 @@
         </p>
       </div>
     </div>
-    <div class="grid-row bottom-gutter {% if help != '2' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '2' %}text-base-dark opacity-50{% endif %}">
       <div class="grid-col-2">
-        <p class="heading-large">2.</p>
+        <p class="font-heading-xl">2.</p>
       </div>
       <div class="grid-col-10">
         <p class="usa-body">
@@ -22,9 +22,9 @@
         </p>
       </div>
     </div>
-    <div class="grid-row bottom-gutter {% if help != '3' %}greyed-out-step{% endif %}">
+    <div class="grid-row margin-bottom-3 {% if help != '3' %}text-base-dark opacity-50{% endif %}">
       <div class="grid-col-2">
-        <p class="heading-large">3.</p>
+        <p class="font-heading-xl">3.</p>
       </div>
       <div class="grid-col-10">
         <p class="usa-body">