Updating site to use USWDS styles (#509)

* Updated header and footer
* Updated fonts
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Adjusted grid templating
* Added images to assets
* Update app/templates/components/uk_components/footer/template.njk

Co-authored-by: Steven Reilly <stvnrlly@users.noreply.github.com>

app/templates/views/support/bat-phone.html

@@ -16,25 +16,25 @@
     {{ page_header('Out of hours emergencies')}}
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <p class="govuk-body">
+        <p>
           First, check the
           <a class="govuk-link govuk-link--no-visited-state" href="https://status.notifications.service.gov.uk">system status page</a>.
           You do not need to contact us if
           the problem you’re having is listed on that page.
         </p>
-        <p class="govuk-body">
+        <p>
           Otherwise, contact us using the emergency email address we
           gave you or your service manager when we made your service live.
         </p>
-        <p class="govuk-body">
+        <p>
           We’ll reply within 30 minutes and give you hourly updates
           until the problem’s fixed.
         </p>
-        <p class="govuk-body">
+        <p>
           We do not offer out of hours support if your service is in
           trial mode.
         </p>
-        <h2 class="heading-medium">Any other problems</h2>
+        <h2 class="font-body-lg">Any other problems</h2>
         <p class="bottom-gutter-2">
           <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.feedback', ticket_type='report-problem', severe='no') }}">Fill in this form</a>
           and we’ll get back to you by the next working day.

app/templates/views/support/form.html

@@ -20,7 +20,7 @@
       <div class="govuk-grid-column-two-thirds">
         {% if show_status_page_banner %}
           <div class="panel panel-border-wide">
-            <p class="govuk-body">
+            <p>
               Check our <a class="govuk-link govuk-link--no-visited-state" href="https://status.notifications.service.gov.uk">system status</a>
               page to see if there are any known issues with U.S. Notify.
             </p>
@@ -32,7 +32,7 @@
               {{ form.name(param_extensions={"classes": "govuk-!-width-full"}) }}
               {{ form.email_address(param_extensions={"classes": "govuk-!-width-full"}) }}
             {% else %}
-              <p class="govuk-body">We’ll reply to {{ current_user.email_address }}</p>
+              <p>We’ll reply to {{ current_user.email_address }}</p>
             {% endif %}
             {{ sticky_page_footer('Send') }}
         {% endcall %}

app/templates/views/support/index.html

@@ -8,19 +8,19 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Contact us</h1>
+  <h1 class="font-body-2xl margin-bottom-3">Contact us</h1>
   
-  <p class="govuk-body">We are available at <a class="govuk-link govuk-link--no-visited-state"" href="mailto:notify-support@gsa.gov">notify-support@gsa.gov</a>.</p>
+  <p>We are available at <a class="govuk-link govuk-link--no-visited-state"" href="mailto:notify-support@gsa.gov">notify-support@gsa.gov</a>.</p>
 
-  <p class="govuk-body">You can expect a response within one business day.</p>
+  <p>You can expect a response within one business day.</p>
   
-  <!-- <p class="govuk-body">U.S. Notify provides 24-hour online support.</p> -->
+  <!-- <p>U.S. Notify provides 24-hour online support.</p> -->
 
   <!-- {% call form_wrapper() %}
     {% if current_user.is_authenticated %}
       {{ form.support_type }}
     {% else %}
-      <p class="govuk-body">
+      <p>
         What do you need help with?
       </p>
       {{ form.who }}
@@ -30,15 +30,15 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <h2 class="heading-medium">Office hours</h2>
-    <p class="govuk-body">Our office hours are 9:30am to 5:30pm, Monday to Friday.</p>
-    <p class="govuk-body">When you report a problem in office hours, we’ll aim to read it within 30 minutes and reply within one working day.</p>
+    <h2 class="font-body-lg">Office hours</h2>
+    <p>Our office hours are 9:30am to 5:30pm, Monday to Friday.</p>
+    <p>When you report a problem in office hours, we’ll aim to read it within 30 minutes and reply within one working day.</p>
 
-    <h2 class="heading-medium">Out-of-hours</h2>
-    <p class="govuk-body">Outside office hours, response times depend on whether you’re reporting an emergency.</p>
-    <p class="govuk-body">If it’s an emergency, we’ll reply within 30 minutes and update you every hour until the problem’s fixed.</p>
-    <p class="govuk-body">If your problem is not an emergency, we’ll reply within one working day.</p>
-    <p class="govuk-body">A problem is only classed as an emergency if you have a live service and:</p>
+    <h2 class="font-body-lg">Out-of-hours</h2>
+    <p>Outside office hours, response times depend on whether you’re reporting an emergency.</p>
+    <p>If it’s an emergency, we’ll reply within 30 minutes and update you every hour until the problem’s fixed.</p>
+    <p>If your problem is not an emergency, we’ll reply within one working day.</p>
+    <p>A problem is only classed as an emergency if you have a live service and:</p>
     <ul class="list list-bullet">
       <li>nobody on your team can sign in</li>
       <li>a ‘technical difficulties’ error appears when you try to upload a file</li>

app/templates/views/support/public.html

@@ -18,30 +18,30 @@
 
     {{ page_header('The U.S. Notify service is for people who work in the government') }}
 
-    <p class="govuk-body">
+    <p>
       We cannot give advice to the public. We do not have access to information about you held by government departments.
     </p>
 
-    <p class="govuk-body">
+    <p>
       There are other pages on U.S. Notify where you can get help:
     </p>
 
     <h2 class="govuk-heading-m govuk-!-margin-bottom-1">
       <a class="govuk-link govuk-link--no-visited-state" href="https://www.gov.uk/coronavirus">Coronavirus (COVID-19)</a>
     </h2>
-    <p class="govuk-body">
+    <p>
       Find guidance and support.
     </p>
     <h2 class="govuk-heading-m govuk-!-margin-bottom-1">
       <a class="govuk-link govuk-link--no-visited-state" href="https://www.gov.uk/contact">Contact the government</a>
     </h2>
-    <p class="govuk-body">
+    <p>
       Ask about benefits, driving, transport, tax, and more.
     </p>
     <h2 class="govuk-heading-m govuk-!-margin-bottom-1">
       <a class="govuk-link govuk-link--no-visited-state" href="https://www.gov.uk/report-suspicious-emails-websites-phishing">Report internet scams and phishing</a>
     </h2>
-    <p class="govuk-body">
+    <p>
       Advice on suspicious emails and text messages.
     </p>
   </div>

app/templates/views/support/thanks.html

@@ -14,7 +14,7 @@
 {% block maincolumn_content %}
 
     {{ page_header('Thanks for contacting us') }}
-    <p class="govuk-body">
+    <p>
       {% if out_of_hours_emergency %}
         We’ll reply in the next 30 minutes.
       {% else %}