Merge branch 'main' of https://github.com/GSA/notifications-admin into notify-678

app/templates/admin_template.html

@@ -3,23 +3,15 @@
 
 {% block headIcons %}
   <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
-  <link rel="mask-icon" href="{{ asset_url('images/govuk-mask-icon.svg') }}" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/govuk-apple-touch-icon-180x180.png') }}">
-  <link rel="apple-touch-icon" sizes="167x167" href="{{ asset_url('images/govuk-apple-touch-icon-167x167.png') }}">
-  <link rel="apple-touch-icon" sizes="152x152" href="{{ asset_url('images/govuk-apple-touch-icon-152x152.png') }}">
-  <link rel="apple-touch-icon" href="{{ asset_url('images/govuk-apple-touch-icon.png') }}">
+  <link rel="mask-icon" href="{{ asset_url('images/usa-mask-icon.svg') }}" color="{{ themeColor | default('#F0F0F0') }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/apple-touch-icon.png') }}">
+  <link rel="apple-touch-icon" href="{{ asset_url('images/apple-touch-icon.png') }}">
 {% endblock %}
 
 {% block head %}
-  {%- for font in font_paths %}
-  <link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
-  {%- endfor %}
   <link rel="stylesheet" media="screen" href="{{ asset_url('css/styles.css') }}" />
   {% block extra_stylesheets %}
   {% endblock %}
-  <style nonce="{{ csp_nonce() }}">
-      .govuk-header__container { border-color: {{header_colour}} }
-  </style>
   {% if g.hide_from_search_engines %}
     <meta name="robots" content="noindex" />
   {% endif %}
@@ -28,6 +20,8 @@
     <meta name="format-detection" content="telephone=no">
   {% endblock %}
   {% block meta %}
+    <meta property="og:site_name" content="Notify.gov">
+    <meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
   {% endblock %}
   <!-- <script type="text/javascript" src="{{ asset_url('js/gtm_head.js') }}"></script> -->
 {% endblock %}

app/templates/components/big-number.html

@@ -39,7 +39,7 @@
   <span class="big-number-with-status">
     {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
     {% if show_failures %}
-      <span class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      <span class="big-number-status{% if danger_zone %} big-number-status--failing{% endif %}">
         {% if failures %}
           {% if failure_link %}
             <a class="usa-link" href="{{ failure_link }}">

app/templates/components/components/header/template.njk

@@ -55,7 +55,9 @@
         <a href="/" title="notify.gov">notify.gov</a>
       </em>
     </div>
-    <button type="button" class="usa-menu-btn">Menu</button>
+    {% if current_user.is_authenticated %}
+      <button type="button" class="usa-menu-btn">Menu</button>
+    {% endif %}
   </div>
   <nav aria-label="Primary navigation" class="usa-nav">
     <div class="usa-nav__inner">

app/templates/components/folder-path.html

@@ -6,7 +6,7 @@
   link_current_item=False,
   root_element='h1'
 ) %}
-  <{{ root_element }} class="font-body-lg folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
+  <{{ root_element }} class="font-body-lg folder-heading margin-bottom-0"{% if root_element == 'h1' %} id="page-header"{% endif %}>
     {% for folder in folders %}
       {% if loop.last and not link_current_item %}
         {% if folder.template_type or not folder.id %}

app/templates/components/status-box.html

@@ -1,6 +1,6 @@
 {% macro status_box(number, label, failing=false, percentage=None, url=None) %}
   <div class="big-number-with-status">
-    <div class="big-number-status{% if failing %}-failing{% endif %}">
+    <div class="big-number-status{% if failing %} big-number-status--failing{% endif %}">
       {% if url %}
         <a class="usa-link" href="{{ url }}">{{ number }} {{ label }}</a>
       {% else %}

app/templates/main_template.html

@@ -20,17 +20,17 @@
 
     {% block headIcons %}
       <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon" />
-      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
-      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
-      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
-      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/usa-mask-icon.svg" color="{{ themeColor | default('#F0F0F0') }}">
+      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
+      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/apple-touch-icon.png">
     {% endblock %}
 
     {% block head %}{% endblock %}
     {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-    {# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
-    <!-- <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png"> -->
+    {% block meta %}
+      <meta property="og:site_name" content="Notify.gov">
+      <meta property="og:image" content="{{ asset_url('images/usa-opengraph-image.png') }}">
+    {% endblock %}
   </head>
   <body class="usa-template__body {{ bodyClasses }}">
     <script nonce="{{ csp_nonce() }}">document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

app/templates/partials/count.html

@@ -3,7 +3,7 @@
 
 <div class="ajax-block-container">
   {% if notifications_deleted %}
-    <div class="grid-row bottom-gutter-1-2">
+    <div class="grid-row ">
       {% for label, query_param, url, count in counts %}
         {% if query_param == 'pending' %}
             <div class="grid-col-3">{{ big_number(count, query_param, smaller=True) }}</div>
@@ -14,7 +14,7 @@
       {% endfor %}
     </div>
   {% else %}
-    <div class="bottom-gutter">
+    <div class="tabs">
       {{ pill(counts, request.args.get('status', '')) }}
     </div>
   {% endif %}

app/templates/views/add-service.html

@@ -18,9 +18,9 @@
 
       {{ form.name(param_extensions={"hint": {"text": "You can change this later"}}) }}
 
-      {% if not default_organization_type %}
+      <!--{% if not default_organization_type %}
         {{ form.organization_type }}
-      {% endif %}
+      {% endif %}-->
 
       {{ page_footer('Add service') }}
 

app/templates/views/api/index.html

@@ -12,7 +12,7 @@
     API integration
   </h1>
 
-  <nav class="grid-row bottom-gutter-1-2">
+  <nav class="grid-row">
     <div class="grid-col-4">
       <a class="usa-link pill-separate-item"  href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
     </div>

app/templates/views/check/column-errors.html

@@ -15,7 +15,7 @@
 
 {% block maincolumn_content %}
 
-  <div class="bottom-gutter-1-2">
+  <div class="">
     {% call banner_wrapper(type='dangerous') %}
 
       {% if recipients.too_many_rows %}

app/templates/views/check/ok.html

@@ -21,11 +21,6 @@
 
   {{ page_header('Preview of {}'.format(template.name)) }}
 
-  {{ usaSkipLink({
-    "text": "Skip to file contents",
-    "href": "#" + file_contents_header_id
-  }) }}
-
   {{ template|string }}
   <div class="bottom-gutter-3-2">
     <form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>

app/templates/views/check/row-errors.html

@@ -4,6 +4,7 @@
 {% from "components/table.html" import mapping_table, row, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
+{% from "components/components/alert/macro.njk" import usaAlert %}
 
 {% block service_page_title %}
   Error
@@ -15,27 +16,31 @@
 
 {% block maincolumn_content %}
 
-  <div class="bottom-gutter-1-2">
+  <div class="">
     {% call banner_wrapper(type='dangerous') %}
       {% if row_errors|length == 1 %}
-        <h1 class='banner-title' data-module="track-error" data-error-type="Bad rows" data-error-label="{{ upload_id }}">
-          There’s a problem with {{ original_file_name }}
-        </h1>
-        <p>
-          You need to {{ row_errors[0] }}.
-        </p>
+        <div class="usa-alert usa-alert--error" role="alert">
+          <div class="usa-alert__body">
+            <h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
+            <p class="usa-alert__text">
+            You need to {{ row_errors[0] }}.
+            </p>
+          </div>
+        </div>
       {% else %}
-        <h1 class='banner-title' data-module="track-error" data-error-type="Bad rows" data-error-label="{{ upload_id }}">
-          There are some problems with {{ original_file_name }}
-        </h1>
-        <p>
-          You need to:
-        </p>
-        <ul class="list-bullet">
-          {% for error in row_errors %}
-            <li>{{ error }}</li>
-          {% endfor %}
-        </ul>
+        <div class="usa-alert usa-alert--error" role="alert">
+          <div class="usa-alert__body">
+            <h1 class="usa-alert__heading">There’s a problem with {{ original_file_name }}</h1>
+            <p class="usa-alert__text">
+              You need to:
+              <ul class="list-bullet">
+                {% for error in row_errors %}
+                <li>{{ error }}</li>
+                {% endfor %}
+              </ul>
+            </p>
+          </div>
+        </div>
       {% endif %}
     {% endcall %}
   </div>
@@ -49,7 +54,6 @@
         button_text='Upload your file again'
       ) }}
     </div>
-    <a href="#content" class="usa-link back-to-top-link">Back to top</a>
   </div>
 
   <div class="fullscreen-content" data-module="fullscreen-table">

app/templates/views/dashboard/_upcoming.html

@@ -3,10 +3,10 @@
 
 <div class="ajax-block-container">
   {% if current_service.scheduled_job_stats.count %}
-    <h2 class="heading-medium heading-upcoming-jobs">
+    <h2 class="font-body-lg margin-y-0">
       In the next few days
     </h2>
-    <a class="usa-link banner-dashboard" href="{{ url_for('.uploads', service_id=current_service.id) }}">
+    <a class="usa-link banner-dashboard margin-bottom-2 display-block" href="{{ url_for('.uploads', service_id=current_service.id) }}">
       <span class="banner-dashboard-count">
         {{ current_service.scheduled_job_stats.count }}
       </span>
@@ -18,7 +18,7 @@
         {% endif %}
       </span>
       <span class="banner-dashboard-meta">
-        sending starts
+        - sending starts
         {{ current_service.scheduled_job_stats.soonest_scheduled_for|format_datetime_relative }}
       </span>
     </a>

app/templates/views/dashboard/dashboard.html

@@ -19,7 +19,7 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-lg margin-top-0">
+    <h2 class="font-body-lg margin-top-0 margin-bottom-1">
       In the last seven days
     </h2>
 
@@ -30,7 +30,7 @@
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
 
     {% if current_user.has_permissions('manage_service') %}
-      <h2 class='font-body-lg'>This year</h2>
+      <h2 class='font-body-lg margin-bottom-0'>This year</h2>
       {{ ajax_block(partials, updates_url, 'usage') }}
       {{ show_more(
         url_for(".usage", service_id=current_service['id']),

app/templates/views/message-status.html

@@ -58,7 +58,7 @@
       caption_visible=False
     ) %}
       {% for message_status, description in [
-        ('Sending', 'Notify has sent the message to the provider. The provider will try to deliver the message to the recipient for up to 72 hours. Notify is waiting for delivery information.'),
+        ('Pending', 'Notify has sent the message to the provider. The provider will try to deliver the message to the recipient for up to 72 hours. Notify is waiting for delivery information.'),
         ('Sent', 'The mobile networks may not provide any more delivery information.'),
         ('Delivered', 'The message was successfully delivered. Notify cannot tell you if a user has opened or read a message.'),
         ('Not delivered', ('The provider could not deliver the message. This can happen if the phone number was wrong or if the network operator rejects the message. If you’re sure that these phone numbers are correct, you should <a class="usa-link" href="' + url_for(".support") + '">contact us</a>. If not, you should remove them from your database. You’ll still be charged for text messages that cannot be delivered.')|safe),

app/templates/views/pricing/index.html

@@ -20,7 +20,11 @@ data={
 ) }}
 
 <p>During pilot period, each service has an allowance of 250,000 free text messages. Once this allowance is met, the
-application will stop delivering messages. There’s no monthly charge, no setup fee and no procurement cost.</p>
+application will stop delivering messages. There's no monthly charge, no setup fee and no procurement cost.</p>
+<p>When a new service is added, it will start in <a class="usa-link" href="{{ url_for('main.trial_mode_new') }}">trial mode</a>. Moving a service out of trial mode is subject to approval by
+the Notify.gov team.</p>
+<p>You'll use more messages towards the allowance if you send text messages longer than 160 characters.
+</p>
 
 <p>
   {% if not current_user.is_authenticated %}

app/templates/views/send-test.html

@@ -28,9 +28,9 @@
         {{ form.placeholder_value(param_extensions={"classes": ""}) }}
       </div>
       {% if skip_link or link_to_upload %}
-        <div class="grid-col-12">
+        <div class="grid-col-12 margin-top-1">
           {% if link_to_upload %}
-            <a class="usa-link" href="{{ url_for('.send_messages', service_id=current_service.id, template_id=template.id) }}">Upload a list of {{ 999|recipient_count_label(template.template_type) }}</a>
+            <a class="usa-link margin-right-2" href="{{ url_for('.send_messages', service_id=current_service.id, template_id=template.id) }}">Upload a list of {{ 999|recipient_count_label(template.template_type) }}</a>
           {% endif %}
           {% if skip_link %}
             <a href="{{ skip_link[1] }}" class="usa-link">{{ skip_link[0] }}</a>

app/templates/views/send.html

@@ -53,7 +53,7 @@
     <a class="usa-link" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)</a>
   </p>
 
-  <h2 class="font-body-lg">Your file will populate this template ({{ template.name }})</h2>
+  <h2 class="font-body-lg margin-bottom-1">Your file will populate this template:<br><span class="font-body-lg">({{ template.name }})</span></h2>
   {{ template|string }}
 
 {% endblock %}

app/templates/views/service-settings.html

@@ -373,7 +373,7 @@
     {% endif %}
     {% if (not current_service.active) and current_user.platform_admin %}
       <p>
-        <div class="hint bottom-gutter-1-2">
+        <div class="hint ">
           Service suspended
         </div>
 

app/templates/views/templates/choose-reply.html

@@ -10,7 +10,7 @@
 
 {% block maincolumn_content %}
 
-<div class="bottom-gutter-1-2">
+<div class="">
   <h1 class="font-body-2xl margin-bottom-3">Choose a template</h1>
   {{ folder_path(template_folder_path, current_service.id, template_type, current_user, root_element='h2') }}
 </div>

app/templates/views/templates/copy.html

@@ -10,7 +10,7 @@
 
 {% block maincolumn_content %}
 
-    <div class="bottom-gutter-1-2">
+    <div class="">
       <h1 class="font-body-2xl margin-bottom-3">{{ page_title }}</h1>
       {{ copy_folder_path(template_folder_path, current_service.id, from_service, current_user) }}
     </div>

app/templates/views/templates/manage-template-folder.html

@@ -9,7 +9,7 @@
 
 {% block maincolumn_content %}
 
-  <div class="grid-row bottom-gutter-1-2">
+  <div class="grid-row ">
     <div class="grid-col-12">
       {{ folder_path(
         folders=template_folder_path,

app/templates/views/templates/template.html

@@ -32,7 +32,7 @@
   {% else %}
     <div class="grid-row">
       <div class="grid-col-12">
-        <h1 class="font-body-lg folder-heading">
+        <h1 class="font-body-xl folder-heading margin-top-0">
           Review your message
         </h1>
         {{ folder_path(
@@ -70,7 +70,7 @@
     {% endif %}
   </div>
 
-  <!--<div class="bottom-gutter-1-2">
+  <!--<div class="">
     {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
   </div>-->