Update dashboard and template flow (#514)

* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in

app/templates/partials/jobs/status.html

@@ -11,10 +11,10 @@
     {% endif %}
   </p>
   {% if job.status == 'sending limits exceeded'%}
-    <p class="govuk-error-message">
+    <p class="usa-error-message">
         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="govuk-error-message govuk-!-margin-bottom-6">
+    <p class="usa-error-message govuk-!-margin-bottom-6">
         Upload this spreadsheet again tomorrow or <a class="govuk-link" href="https://www.notifications.service.gov.uk/support">contact the U.S. Notify team</a> to raise the limit.
     </p>
     {% endif %}

app/templates/partials/templates/content-count-message.html

@@ -1,3 +1,3 @@
-<span {% if error %}class="govuk-error-message"{% endif %}>
+<span {% if error %}class="usa-error-message"{% endif %}>
   {{ message }}
 </span>

app/templates/partials/templates/guidance-character-count.html

@@ -1,8 +1,8 @@
-<h2 class="heading-medium">Message length</h2>
-<p class="govuk-body">
+<h2 class="font-body-lg">Message length</h2>
+<p class="usa-body">
   If your message is long then it will
   cost more.
 </p>
-<p class="govuk-body">
-  See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.pricing') }}">pricing</a> for details.
+<p class="usa-body">
+  See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
 </p>

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

@@ -1,9 +1,9 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">Links and URLs</h2>
+<h2 class="font-body-lg">Links and URLs</h2>
 <p class="bottom-gutter-1-3">
   Always use full URLs, starting with https://. For example:
 {{ govukInsetText({
   "text": "Apply now at https://www.usa.gov/example",
-  "classes": "govuk-!-margin-top-0"})
+  "classes": "usa-body"})
 }}

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

@@ -1,9 +1,9 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">
+<h2 class="font-body-lg">
   Optional content
 </h2>
-<p class="govuk-body">
+<p class="usa-body">
   Use double brackets and ‘??’ to define optional content.
 </p>
 <p class="bottom-gutter-1-3">
@@ -13,9 +13,9 @@
 {{ govukInsetText({
   "text": "((under18??Please get your application signed by a parent or
   guardian.))",
-  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  "classes": "usa-body"})
 }}
-<p class="govuk-body">
+<p class="usa-body">
   For each person you send this message to, specify ‘yes’ or ‘no’ to
   show or hide this content.
 </p>

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

@@ -1,6 +1,6 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">
+<h2 class="font-body-lg">
   Personalization
 </h2>
 <p class="bottom-gutter-1-3">