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/service-settings/branding/email-branding-govuk-org.html

@@ -18,16 +18,16 @@
 
   {{ page_header('Before you request new branding') }}
 
-  <p class="govuk-body">You can only use U.S. Notify branding if people go to U.S. Notify to access your service.</p>
+  <p>You can only use U.S. Notify branding if people go to U.S. Notify to access your service.</p>
 
-  <p class="govuk-body">
+  <p>
     You cannot use U.S. Notify branding if your organization is
     <a class="govuk-link govuk-link--no-visited-state"
       href="https://www.gov.uk/government/publications/govuk-proposition/govuk-proposition#organisations-independent-from-government">independent
       from government</a>.
   </p>
 
-  <p class="govuk-body">We’ll email you once your branding’s ready to use, or if we need any more information.</p>
+  <p>We’ll email you once your branding’s ready to use, or if we need any more information.</p>
 
   {% call form_wrapper() %}
     {{ page_footer('Request new branding') }}

app/templates/views/service-settings/branding/email-branding-govuk.html

@@ -19,17 +19,17 @@
 
   {{ page_header('Check your new branding') }}
 
-  <p class="govuk-body">
+  <p>
     Emails from {{ current_service.name }} will look like this.
   </p>
 
   {{ email_branding_preview('__NONE__') }}
 
-  <h2 class="heading-medium">Before you continue</h2>
+  <h2 class="font-body-lg">Before you continue</h2>
 
-  <p class="govuk-body">You can only use U.S. Notify branding if people go to U.S. Notify to access your service.</p>
+  <p>You can only use U.S. Notify branding if people go to U.S. Notify to access your service.</p>
 
-  <p class="govuk-body">
+  <p>
     You cannot use U.S. Notify branding if your organization is
     <a class="govuk-link govuk-link--no-visited-state"
       href="https://www.gov.uk/government/publications/govuk-proposition/govuk-proposition#organisations-independent-from-government">independent

app/templates/views/service-settings/branding/email-branding-nhs.html

@@ -19,16 +19,16 @@
 
   {{ page_header('Check your new branding') }}
 
-  <p class="govuk-body">
+  <p>
     Emails from {{ current_service.name }} will look like this.
   </p>
   {{ email_branding_preview(nhs_branding_id) }}
 
-  <h2 class="heading-medium">Before you continue</h2>
+  <h2 class="font-body-lg">Before you continue</h2>
 
-  <p class="govuk-body">Make sure you’re allowed to use NHS branding.</p>
+  <p>Make sure you’re allowed to use NHS branding.</p>
 
-  <p class="govuk-body">
+  <p>
     If you’re not sure, <a class="govuk-link govuk-link--no-visited-state" href="https://www.england.nhs.uk/nhsidentity/identity-guidelines/who-can-use-the-nhs-identity/">check the guidance on the NHS website</a>.
   </p>
 

app/templates/views/service-settings/branding/email-branding-options.html

@@ -22,7 +22,7 @@
 
   {{ page_header('Change email branding') }}
 
-  <p class="govuk-body">
+  <p>
     Your emails currently have {{ branding_name }} branding.
   </p>
 
@@ -31,7 +31,7 @@
   ) }}
 
   {% if current_service.needs_to_change_email_branding %}
-    <p class="govuk-body">
+    <p>
       You should be using your own branding instead.
     </p>
   {% endif %}

app/templates/views/service-settings/branding/email-branding-organisation.html

@@ -18,11 +18,11 @@
 
   {{ page_header('When you request new branding') }}
 
-  <p class="govuk-body">We’ll check if we already have the {{organisation}} logo.</p>
+  <p>We’ll check if we already have the {{organisation}} logo.</p>
 
-  <p class="govuk-body">If we do, we’ll let you know when your new branding is ready to use.</p>
+  <p>If we do, we’ll let you know when your new branding is ready to use.</p>
 
-  <p class="govuk-body">If we don’t, we’ll email you to ask for more information.</p>
+  <p>If we don’t, we’ll email you to ask for more information.</p>
 
   {% call form_wrapper() %}
     {{ page_footer('Request new branding') }}

app/templates/views/service-settings/data-retention.html

@@ -10,7 +10,7 @@
 
   <div class="govuk-grid-row bottom-gutter">
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="heading-large">
+      <h1 class="font-body-2xl margin-bottom-3">
         Data retention
       </h1>
     </div>

app/templates/views/service-settings/email-reply-to/_verify-updates.html

@@ -5,10 +5,10 @@
 
 <div class="ajax-block-container">
   {% if verification_status == "pending" %}
-    <p class="govuk-body">
+    <p>
       We’re checking that ‘{{ reply_to_email_address }}’ is a real email address.
     </p>
-    <p class="govuk-body">
+    <p>
       <span class='loading-indicator'>This can take a minute</span>
     </p>
 
@@ -30,10 +30,10 @@
         <h2 class='banner-title' data-module="track-error" data-error-type="reply-to-email-not-working" data-error-label="{{ upload_id }}">
           There’s a problem with your reply-to address
         </h2>
-        <p class="govuk-body">
+        <p>
           We sent an email to ‘{{ reply_to_email_address }}’ but it could not be delivered.
         </p>
-        <p class="govuk-body">
+        <p>
           You can try again, or use a different address.
         </p>
       {% endcall %}

app/templates/views/service-settings/email_reply_to.html

@@ -66,10 +66,10 @@
       {% endif %}
     </div>
     <div class="govuk-grid-column-five-sixths">
-      <p class="govuk-body">
+      <p>
         You need to add at least one reply-to address so recipients can reply to your messages.
       </p>
-      <p class="govuk-body">
+      <p>
         Emails with a reply-to address:
       </p>
       <ul class="list list-bullet">

app/templates/views/service-settings/name-local.html

@@ -23,17 +23,17 @@
       <li>Blue Badge - {{ current_service.organisation.name or current_user.default_organisation.name }}</li>
     </ul>
 
-  <p class="govuk-body">You should only use an acronym or initialism if your users are already familiar with it.</p>
+  <p>You should only use an acronym or initialism if your users are already familiar with it.</p>
 
   <div class="form-group">
     {% if current_service.prefix_sms %}
-      <p class="govuk-body">Users will see your service name at the start of every text message</p>
+      <p>Users will see your service name at the start of every text message</p>
       <!-- <ul class="govuk-list govuk-list--bullet">
         <li>at the start of every text message</li>
         <li>as your email sender name</li>
       </ul> -->
     {% else %}
-      <p class="govuk-body">Users will see your service name as your email sender name.</p>
+      <p>Users will see your service name as your email sender name.</p>
     {% endif %}
   </div>
 

app/templates/views/service-settings/name.html

@@ -24,13 +24,13 @@
 
   <div class="form-group">
     {% if current_service.prefix_sms %}
-      <p class="govuk-body">Users will see your service name:</p>
+      <p>Users will see your service name:</p>
       <ul class="list-bullet">
         <li>at the start of every text message</li>
         <li>as your email sender name</li>
       </ul>
     {% else %}
-      <p class="govuk-body">Users will see your service name as your email sender name.</p>
+      <p>Users will see your service name as your email sender name.</p>
     {% endif %}
   </div>
 

app/templates/views/service-settings/preview-email-branding.html

@@ -9,7 +9,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Preview email branding</h1>
+  <h1 class="font-body-2xl margin-bottom-3">Preview email branding</h1>
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       {{ email_branding_preview(form.branding_style.data) }}

app/templates/views/service-settings/request-to-go-live.html

@@ -52,15 +52,15 @@
         {% endif %}
       {% endcall %}
       {% if not current_user.is_gov_user %}
-        <p class="govuk-body">
+        <p>
           Only team members with a government email address can request to go live.
         </p>
       {% elif (not current_service.go_live_checklist_completed)  %}
-        <p class="govuk-body">
+        <p>
           You must complete these steps before you can request to go live.
         </p>
       {% else %}
-        <p class="govuk-body">
+        <p>
           When we receive your request we’ll get back to you within one working day.
         </p>
         <p class="bottom-gutter">

app/templates/views/service-settings/send-files-by-email.html

@@ -18,14 +18,14 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-five-sixths">
       {{ page_header('Send files by email') }}
-      <p class="govuk-body">
+      <p>
         This is an API-only feature.
       </p>
-      <p class="govuk-body">
+      <p>
         To send a file by email, follow the instructions in our <a class="govuk-link govuk-link--no-visited-state" href={{ url_for('main.documentation') }}>API documentation</a>.
       </p>
-      <h2 class="heading-medium">{% if contact_details %}Change contact details for{% else %}Add contact details to{% endif %} the file download page</h2>
-      <p class="govuk-body">
+      <h2 class="font-body-lg">{% if contact_details %}Change contact details for{% else %}Add contact details to{% endif %} the file download page</h2>
+      <p>
         You need to include contact details for your service so your users can get in touch if there’s a problem. For example, if the link to download the file you sent them has expired.
       </p>
       {% call form_wrapper() %}

app/templates/views/service-settings/service-already-live.html

@@ -10,7 +10,7 @@
     <div class="govuk-grid-column-full">
       {{ page_header('Your service is already live') }}
 
-      <p class="govuk-body">
+      <p>
         {% if current_service.go_live_at %}
           ‘{{ current_service.name }}’ went live on {{ current_service.go_live_at | format_date_normal }}.
         {% else %}
@@ -18,7 +18,7 @@
         {% endif %}
         </p>
 
-      <p class="govuk-body">
+      <p>
         <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_account') }}">Switch service</a>
          if you want to make a different service live.
       </p>

app/templates/views/service-settings/set-auth-type.html

@@ -20,21 +20,21 @@
         <p class="heading-small bottom-gutter-2-3">
           Email link or text message code
         </p>
-        <p class="govuk-body">
+        <p>
           Your team members can sign in with either a text message code
           or an email link.
         </p>
-        <p class="govuk-body">
+        <p>
           You can <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.manage_users', service_id=current_service.id) }}">set the sign-in method for individual team members</a>.
         </p>
       {% else %}
         <p class="heading-small bottom-gutter-2-3">
           Text message code
         </p>
-        <p class="govuk-body">
+        <p>
           Your team members sign in with a text message code.
         </p>
-        <p class="govuk-body">
+        <p>
           <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.support') }}">Contact us</a> if signing in with a text message is a problem for your team.
         </p>
       {% endif %}

app/templates/views/service-settings/set-email.html

@@ -17,7 +17,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-five-sixths">
       {{ page_header('Send emails') }}
-      <p class="govuk-body">
+      <p>
         It’s free to send emails through U.S. Notify.
       </p>
       {% call form_wrapper() %}

app/templates/views/service-settings/set-inbound-number.html

@@ -19,9 +19,9 @@
     {{ page_header(page_title) }}
   {% endif %}
   {% if current_service.has_inbound_number %}
-    <p class="govuk-body"> This service already has an inbound number </p>
+    <p> This service already has an inbound number </p>
   {% elif no_available_numbers %}
-    <p class="govuk-body"> No available inbound numbers </p>
+    <p> No available inbound numbers </p>
   {% else %}
     {% call form_wrapper(class="govuk-!-margin-top-3") %}
       {{ form.inbound_number(param_extensions={

app/templates/views/service-settings/set-inbound-sms.html

@@ -17,38 +17,38 @@
     <div class="govuk-grid-column-five-sixths">
       {{ page_header('Receive text messages') }}
       {% if 'inbound_sms' in current_service.permissions %}
-        <p class="govuk-body">
+        <p>
           Your service can receive text messages sent to {{ current_service.inbound_number }}.
         </p>
-        <p class="govuk-body">
+        <p>
           You can still send text messages from a sender name if you need to, but users will not be able to reply to those messages.
         </p>
-        <p class="govuk-body">
+        <p>
           <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.support') }}">Contact us</a> if you want to switch this feature off.
         </p>
         {% if current_user.has_permissions('manage_api_keys') %}
-          <p class="govuk-body">
+          <p>
             You can set up callbacks for received text messages on the
             <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.api_callbacks', service_id=current_service.id) }}">API integration page</a>.
           </p>
         {% endif %}
       {% else %}
-        <p class="govuk-body">
+        <p>
           <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.support') }}">Contact us</a> if you want to be able to receive text messages from your users.
         </p>
-        <p class="govuk-body">
+        <p>
           We’ll create a unique phone number for your service that they can reply to.
         </p>
-        <p class="govuk-body">
+        <p>
           Text messages you send will come from this phone number instead of your sender name (currently {{ current_service.default_sms_sender }}).
         </p>
-        <p class="govuk-body">
+        <p>
           You can still send text messages from a sender name if you need to, but users will not be able to reply to those messages.
         </p>
-        <p class="govuk-body">
+        <p>
           You can see and reply to the messages you receive when you sign in to Notify, or get them using the API.
         </p>
-        <p class="govuk-body">
+        <p>
           It does not cost you anything to receive text messages. Users will pay their standard text message rate.
         </p>
       {% endif %}

app/templates/views/service-settings/set-international-sms.html

@@ -17,10 +17,10 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-five-sixths">
       {{ page_header('Send international text messages') }}
-      <p class="govuk-body">
+      <p>
         Messages to international mobile numbers are charged at 1, 2, or
         3 times the cost of messages to UK mobile numbers.</p>
-      <p class="govuk-body">
+      <p>
         See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for(".pricing") }}">pricing</a> for the list
         of rates.
       </p>

app/templates/views/service-settings/set-sms.html

@@ -17,16 +17,16 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-five-sixths">
       {{ page_header('Send text messages') }}
-      <p class="govuk-body">
+      <p>
         You have a free allowance of
         {{ '{:,}'.format(current_service.free_sms_fragment_limit) }} text messages each
         financial year.
       </p>
-      <!-- <p class="govuk-body">
+      <!-- <p>
         It costs 1.58 pence (plus VAT) for each text message you send
         after your free allowance.
       </p> -->
-      <p class="govuk-body">
+      <p>
         See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for(".pricing") }}">pricing</a> for more details.
       </p>
       {% call form_wrapper() %}

app/templates/views/service-settings/sms-sender/edit.html

@@ -20,7 +20,7 @@
   {{ page_header('Change text message sender') }}
   {% call form_wrapper() %}
     {% if inbound_number %}
-      <p class="govuk-body">
+      <p>
         <span class="bottom-gutter-1-3"> {{ sms_sender.sms_sender }} </span>
         <span class="hint"> This phone number receives replies and cannot be changed </span>
       </p>

app/templates/views/service-settings/sms-senders.html

@@ -63,7 +63,7 @@
       </div>
     </div>
   {% endif %}
-  <p class="govuk-body">
+  <p>
     The text message sender tells your users who the message is from.
   </p>
 {% endblock %}