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/views/organizations/organization/index.html

@@ -12,13 +12,13 @@
 
   {{ page_header('Usage', size='medium') }}
 
-  <div class="bottom-gutter">
+  <div class="margin-bottom-3">
     {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
   </div>
 
-  <div class="grid-row bottom-gutter">
+  <div class="grid-row margin-bottom-3">
     <div class="grid-col-6">
-      <h2 class="heading-small">Emails</h2>
+      <h2 class="font-heading-md">Emails</h2>
       <div class="keyline-block">
         {{ big_number(
           total_emails_sent,
@@ -28,7 +28,7 @@
       </div>
     </div>
     <div class="grid-col-6">
-      <h2 class="heading-small">Text messages</h2>
+      <h2 class="font-heading-md">Text messages</h2>
       <div class="keyline-block">
         {{ big_number(
           total_sms_cost,
@@ -51,7 +51,7 @@
     </div>
   {% endif %}
 
-  <h2 class="heading-small {% if search_form %}visually-hidden{% endif %}">By service</h2>
+  <h2 class="font-heading-md {% if search_form %}visually-hidden{% endif %}">By service</h2>
 
   {% for service in services %}
     <div class="keyline-block organization-service">

app/templates/views/organizations/organization/settings/edit-domains.html

@@ -26,7 +26,7 @@
           form.domains,
           item_name='domain',
           autocomplete=False,
-          hint='For example cabinet-office.gov.uk'
+          hint='For example example.gov'
         ) }}
         {{ page_footer('Save') }}
       {% endcall %}

app/templates/views/organizations/organization/settings/index.html

@@ -7,7 +7,7 @@
 
 {% block maincolumn_content %}
   <h1 class="font-body-2xl">Settings</h1>
-  <div class="bottom-gutter-3-2 settings-table body-copy-table">
+  <div class="margin-bottom-3 settings-table body-copy-table">
     {% call mapping_table(
       caption='General',
       field_headings=['Label', 'Value', 'Action'],

app/templates/views/organizations/organization/users/index.html

@@ -36,9 +36,9 @@
           <div class="grid-col-9">
             <h2 class="user-list-item-heading">
               {%- if user.name -%}
-                <span class="heading-small">{{ user.name }}</span>&ensp;
+                <span class="font-heading-md">{{ user.name }}</span>&ensp;
               {%- endif -%}
-              <span class="hint">
+              <span class="usa-hint">
                 {%- if user.status == 'pending' -%}
                   {{ user.email_address }} (invited)
                 {%- elif user.status == 'cancelled' -%}

app/templates/views/organizations/organization/users/invite-org-user.html

@@ -24,7 +24,7 @@
       error_message_with_html=True
     ) }}
 
-    <div class="bottom-gutter">
+    <div class="margin-bottom-3">
 		  <p class="form-label">
 		    {{ current_org.name }} team members can:
 		  </p>