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/features.html

@@ -18,30 +18,30 @@
   <p class="usa-body"><a class="usa-link" href="{{ url_for('main.register') }}">Create an account</a> for free and try it yourself.</p>
 {% endif %}
 
-<h2 class="heading-medium" id="templates">Reusable message templates</h2>
+<h2 class="font-heading-lg" id="templates">Reusable message templates</h2>
 <p class="usa-body">To send a text with Notify, you need to create a reusable message template first.</p>
 <p class="usa-body">Templates let you send the same thing to lots of people, as often as you need to, without writing a new message each time.</p>
 
-<h2 class="heading-medium" id="organizing-content">Organizing your content</h2>
+<h2 class="font-heading-lg" id="organizing-content">Organizing your content</h2>
 <p class="usa-body">You can organize your content by grouping templates, and putting them into folders.</p>
 <p class="usa-body">Set up folders within the Send message section of Notify, where you find templates. You can choose to create a Folder before or after a template is made. If you want to change a user’s ability to view or edit folders, you may control this through their individual team member permissions.</p>
 
-<h2 class="heading-medium" id="personalised-messages">Personalized content</h2>
+<h2 class="font-heading-lg" id="personalised-messages">Personalized content</h2>
 <p class="usa-body">Notify makes it easy to send personalized messages from a single template.</p>
 <p class="usa-body">See <a class="usa-link" href="{{ url_for('.how_to', _anchor='personalized-content') }}">how to personalize your content</a>.</p>
 
-<h2 class="heading-medium" id="bulk-sending">Bulk sending</h2>
+<h2 class="font-heading-lg" id="bulk-sending">Bulk sending</h2>
 <p class="usa-body">To send a batch of messages at once, upload a list of contact details to Notify. You can also schedule the date and time you want them to be sent.</p>
 
-<!-- <h2 class="heading-medium" id="api">API integration</h2>
+<!-- <h2 class="font-heading-lg" id="api">API integration</h2>
 <p class="usa-body">You can integrate the Notify API with your web application or back-office system to send messages automatically.</p>
 <p class="usa-body">Read our <a class="usa-link" href="{{ url_for('.documentation') }}">API documentation</a> for more information.</p> -->
 
-<h2 class="heading-medium" id="reporting">Reporting</h2>
+<h2 class="font-heading-lg" id="reporting">Reporting</h2>
 <p class="usa-body">Notify’s real-time dashboard lets you see the number of messages sent. You can also check the current status of any message to see when it was delivered.</p>
 <p class="usa-body">Read more about the <a class="usa-link" href="{{ url_for('main.message_status') }}">delivery status</a> of your messages.</p>
 
-<h2 class="heading-medium" id="permissions">Permissions</h2>
+<h2 class="font-heading-lg" id="permissions">Permissions</h2>
 <p class="usa-body">Control which members of your team can see, create, edit, and send messages.</p>
 <p class="usa-body">Notify lets you:</p>
 <ul class="list list-bullet">
@@ -49,7 +49,7 @@
   <li>choose who else can manage team members</li>
 </ul>
 
-<h2 class="heading-medium" id="performance">Performance</h2>
+<h2 class="font-heading-lg" id="performance">Performance</h2>
 <p class="usa-body">Notify commits to sending 95% of text messages within 10 seconds.</p>
 <!-- <ul class="list list-bullet">
   <li>sending 95% of text messages within 10 seconds</li>
@@ -59,17 +59,17 @@
 
 <!-- <p class="usa-body">Visit our <a class="usa-link" href="{{ url_for('main.performance') }}">performance data</a> page to see how Notify is performing.</p> -->
 
-<h2 class="heading-medium" id="security">Security</h2>
+<h2 class="font-heading-lg" id="security">Security</h2>
 <p class="usa-body">Notify protects and manages data to meet the needs of government services.</p>
 
-<h3 class="heading-small">Hide sensitive information</h3>
+<h3 class="font-heading-md">Hide sensitive information</h3>
 <p class="usa-body">Notify lets you redact personal information from your messages after they have been sent. This means that only the recipient can see that information.</p>
 
-<h3 class="heading-small">Two-factor authentication</h3>
+<h3 class="font-heading-md">Two-factor authentication</h3>
 <p class="usa-body">Notify uses two-factor authentication (2FA) to keep your account secure. When you sign in, we’ll send a unique one-time code to your phone and ask you to enter it before we let you use your account.</p>
 <p class="usa-body">Read more about <a class="usa-link" href="{{ url_for('main.security') }}">security</a>.
 
-<!-- <h2 class="heading-medium" id="support">Support</h2>
+<!-- <h2 class="font-heading-lg" id="support">Support</h2>
 <p class="usa-body">Notify provides 24-hour online support. If you have an emergency outside office hours, we’ll reply within 30 minutes.</p>
 <p class="usa-body">Find out more about <a class="usa-link" href="{{ url_for('.support') }}">support</a>.</p> -->