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
2026-08-25 08:44:23 -04:00 · 2023-06-08 13:12:00 -04:00
parent c3e1235a96
commit e0d2d74067
87 changed files with 409 additions and 354 deletions
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -112,7 +112,7 @@
        "element": "a",
        "text": "Add a new service",
        "href": url_for('.add_service'),
-        "classes": "govuk-button--secondary"
+        "classes": ""
      }) }}
      {% if current_user.has_access_to_live_and_trial_mode_services %}
          </div>
--- a/app/templates/views/dashboard/_totals.html
+++ b/app/templates/views/dashboard/_totals.html
@@ -1,8 +1,8 @@
 {% from "components/big-number.html" import big_number_with_status %}

 <div class="ajax-block-container">
-  <div class="govuk-grid-row">
-    <div id="total-sms" class="govuk-grid-column-one-half">
+  <div class="grid-row grid-gap">
+    <div id="total-sms" class="grid-col-6">
      {{ big_number_with_status(
        statistics['sms']['requested'],
        statistics['sms']['requested']|message_count_label('sms', suffix='sent'),
@@ -14,9 +14,9 @@
        smaller=True,
        ) }}
      </div>
-      <div id="total-email" class="govuk-grid-column-one-half">
+      <div id="total-email" class="grid-col-6">
        <span class="big-number-with-status pilot-disabled">
-          <a class="govuk-link govuk-link--no-visited-state big-number-link">
+          <a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1">
            <span class="big-number-smaller">
              <span class="big-number-number">0</span>
              <span class="big-number-label">emails sent</span>
--- a/app/templates/views/dashboard/_usage.html
+++ b/app/templates/views/dashboard/_usage.html
@@ -1,7 +1,7 @@
 {% from "components/big-number.html" import big_number %}

-<div class='govuk-grid-row ajax-block-container'>
-  <div class='govuk-grid-column-one-half'>
+<div class='grid-row grid-gap ajax-block-container'>
+  <div class='grid-col-6'>
    <div class="keyline-block">
      {% if sms_cost %}
        {{ big_number(
@@ -15,7 +15,7 @@
      {% endif %}
    </div>
  </div>
-  <div class='govuk-grid-column-one-half pilot-disabled'>
+  <div class='grid-col-6 pilot-disabled'>
    <div class="keyline-block">
      {{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
    </div>
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -10,16 +10,16 @@

 {% block maincolumn_content %}

-  <div class="dashboard">
+  <div class="dashboard margin-bottom-8">

-    <h1 class="govuk-visually-hidden">Dashboard</h1>
+    <h1 class="usa-sr-only">Dashboard</h1>
    {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
      {% include 'views/dashboard/write-first-messages.html' %}
    {% endif %}

    {{ ajax_block(partials, updates_url, 'upcoming') }}

-    <h2 class="font-body-lg">
+    <h2 class="font-body-lg margin-top-0">
      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='heading-medium'>This year</h2>
+      <h2 class='font-body-lg'>This year</h2>
      {{ ajax_block(partials, updates_url, 'usage') }}
      {{ show_more(
        url_for(".usage", service_id=current_service['id']),
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -18,9 +18,14 @@
 {% block maincolumn_content %}

    {{ page_header('{} text message template'.format(heading_action)) }}
-    <p>
-      Don't worry, saving the template will not send ⛔
-    </p>
+
+    <div class="usa-alert usa-alert--info usa-alert--slim">
+      <div class="usa-alert__body">
+        <p class="usa-alert__text">
+          Don't worry, saving the template will not send        
+        </p>
+      </div>
+    </div>

    {% if current_service.prefix_sms %}
      {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
@@ -53,7 +58,7 @@
            </div>
          </div>
          {{ page_footer('Save') }}
-          <p class="form-hint">
+          <p class="usa-hint">
            After saving, you'll have the option to send 🚀
          </p>
        </div>
--- a/app/templates/views/features.html
+++ b/app/templates/views/features.html
@@ -9,7 +9,7 @@

 {% block content_column_content %}

-<h1 class="heading-large">Features</h1>
+<h1 class="font-body-2xl">Features</h1>
 <p class="govuk-body">If you work for the government, you can use U.S. Notify to keep your users updated.</p>
 <p class="govuk-body">Notify makes it easy to create, customize, and send <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.features_sms') }}">text messages</a>.</p>
 <!-- <ul class="list list-bullet">
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -9,7 +9,7 @@

 {% block maincolumn_content %}

-  <h1 class="heading-medium">
+  <h1 class="font-body-lg">
    Team members
  </h1>

@@ -89,7 +89,7 @@
        "element": "a",
        "text": "Invite a team member",
        "href": url_for('.invite_user', service_id=current_service.id),
-        "classes": "govuk-button--secondary"
+        "classes": "usa-button"
      }) }}
    </div>
  {% endif %}
--- a/app/templates/views/notifications.html
+++ b/app/templates/views/notifications.html
@@ -27,28 +27,27 @@

  {% call form_wrapper(
    action=url_for('.view_notifications', service_id=current_service.id, message_type=message_type),
-    class="govuk-grid-row"
+    class="usa-search margin-bottom-2"
  ) %}
-    <div class="govuk-grid-column-three-quarters {% if message_type == 'sms' %}extra-tracking{% endif %}">
-      {{ search_form.to(param_extensions={
-            "label": {
-              "text": things_you_can_search_by|formatted_list(
-                conjunction='or',
-                before_each='',
-                after_each='',
-                prefix='Search by',
-                prefix_plural='Search by'
-              )
-            }
-      }) }}
-    </div>
-    <div class="govuk-grid-column-one-quarter">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      {{ govukButton({
-        "text": "Search",
-        "classes": "search-form__button"
-      }) }}
-    </div>
+      <div class="grid-col-4 {% if message_type == 'sms' %}extra-tracking{% endif %}">
+        {{ search_form.to(param_extensions={
+        "label": {
+        "text": things_you_can_search_by|formatted_list(
+        conjunction='or',
+        before_each='',
+        after_each='',
+        prefix='Search by',
+        prefix_plural='Search by'
+        )
+        }
+        }) }}
+      </div>
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <button class="usa-button" type="submit">
+      <span class="usa-search__submit-text">Search </span><img src="/assets/img/usa-icons-bg/search--white.svg"
+        class="usa-search__submit-icon" alt="Search" />
+    </button> 
+  
  {% endcall %}

  {% call form_wrapper(id="search-form") %}
@@ -57,8 +56,8 @@
  {% endcall %}

  {% if current_user.has_permissions('view_activity') %}
-    <p class="bottom-gutter">
-      <a href="{{ download_link }}" download="download" class="govuk-link govuk-link--no-visited-state govuk-!-font-weight-bold">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
+    <p class="font-body-sm">
+      <a href="{{ download_link }}" download="download" class="usa-link">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
      &emsp;
      Data available for {{ partials.service_data_retention_days }} days
    </p>
--- a/app/templates/views/platform-admin/_base_template.html
+++ b/app/templates/views/platform-admin/_base_template.html
@@ -9,8 +9,8 @@
      </div>
      <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
    </div>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
+    <div class="grid-row">
+      <div class="tablet:grid-col-2">
        <nav class="navigation">
            {% for link_text, url in [
            ('Summary', url_for('main.platform_admin')),
@@ -34,7 +34,7 @@
          {% endfor %}
        </nav>
      </div>
-      <div class="govuk-grid-column-three-quarters">
+      <div class="grid-col-10 tablet:grid-col-10">
      {% block backLink %}{% endblock %}
        <main class="govuk-main-wrapper column-main govuk-!-padding-top-0 govuk-!-padding-bottom-0" id="main-content" role="main">
          {% block content %}
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -50,15 +50,15 @@
    {% endcall %}
  </div>
  <p class="table-show-more-link">
-    <a class="govuk-link govuk-link--no-visited-state" 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>
+    <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>
  {{ template|string }}

    <div>
-        <h2 class="heading-medium">Messages Remaining Today / Daily Message Limit</h2>
-        <p class="govuk-body"> {{ daily_remaining_messages }} / {{ current_service.message_limit }}</p>
+        <h2 class="font-body-lg">Messages Remaining Today / Daily Message Limit</h2>
+        <p class="usa-body"> {{ daily_remaining_messages }} / {{ current_service.message_limit }}</p>
    </div>

 {% endblock %}
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -8,7 +8,7 @@

 {% block maincolumn_content %}

-    <h1 class="heading-medium">Settings</h1>
+    <h1 class="font-body-lg">Settings</h1>

    <div class="bottom-gutter-3-2 settings-table body-copy-table">

@@ -192,7 +192,7 @@
    </div>

    {% if current_service.trial_mode %}
-      <h2 class="heading-medium top-gutter-0">Your service is in trial mode</h2>
+      <h2 class="font-body-lg top-gutter-0">Your service is in trial mode</h2>

        <p>You can only:</p>

@@ -350,7 +350,7 @@
    {% if current_service.active and (current_service.trial_mode or current_user.platform_admin) %}
      <p class="top-gutter-1-2">
        <span class="page-footer-link page-footer-delete-link-without-button">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.archive_service', service_id=current_service.id) }}">
+          <a class="usa-button usa-button--secondary" href="{{ url_for('.archive_service', service_id=current_service.id) }}">
            Delete this service
          </a>
        </span>
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -2,11 +2,12 @@
 {% from "components/uk_components/button/macro.njk" import govukButton %}

 {% block meta %}
-  <meta name="description" content="U.S. Notify lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
+<meta name="description"
+  content="U.S. Notify lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
 {% endblock %}

 {% block pageTitle %}
-  U.S. Notify
+U.S. Notify
 {% endblock %}

 {% block content %}
@@ -16,7 +17,8 @@
    <div class="grid-row grid-gap display-flex flex-align-center">
      <div class="tablet:grid-col-7">
        <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your users</h1>
-        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.</p>
+        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.
+        </p>
        <div class="usa-button-group">
          <a class="usa-button usa-button--big" href="{{ url_for('main.register' )}}">Create an account</a>
          or <a class="usa__link margin-x-1" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
@@ -26,7 +28,7 @@
      <div class="tablet:grid-col-4 grid-offset-1">
        <img src="{{ asset_url('images/product/proposition-illustration.png') }}"
          alt="An illustration of notifications to a phone, a laptop, and a letter.">
-      </div>  
+      </div>
    </div>
  </div>
 </section>
@@ -60,9 +62,9 @@
 </section>
 <section class="grid-container usa-section border-top border-base-lighter">
  <div class="grid-row grid-gap">
-      <h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
-        Send messages manually or automatically
-      </h2>
+    <h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
+      Send messages manually or automatically
+    </h2>
  </div>
  <div class="grid-row grid-gap">
    <div class="tablet:grid-col-6 usa-prose">
@@ -80,27 +82,28 @@
    </div>
  </div>
 </section>
-<section id="whos-using-notify" class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
+<section id="whos-using-notify"
+  class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
  <div class="grid-row grid-gap flex-column">
-    <h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 bold">
+    <h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 margin-bottom-3 bold">
      Who’s using U.S. Notify
    </h2>
-    <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
+    <!-- <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
      See the
      <a class="usa-link margin-left-05" href="{{ url_for('main.performance') }}">list of services and
        organizations</a>.
-    </p>
+    </p> -->
  </div>
  <div class="grid-row">
    <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
      <span class="usa-sr-only">There are</span>
      <div class="large-number">{{ counts.organisations|format_thousands }}</div>
-      <p class="font-body-lg">Organizations</p>
+      <p class="font-body-lg margin-bottom-0">Organizations</p>
    </div>
    <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
      <span class="usa-sr-only">and</span>
      <div class="large-number">{{ counts.services|format_thousands }}</div>
-      <p class="font-body-lg">Services</p>
+      <p class="font-body-lg margin-bottom-0">Services</p>
      <span class="usa-sr-only">using Notify.</span>
    </div>
  </div>
@@ -120,9 +123,9 @@
  </p>
 </section>

-  <!-- <div class="product-page-intro"></div> -->
+<!-- <div class="product-page-intro"></div> -->

-    <!-- <div class="product-page-intro-wrapper" data-module="homepage">
+<!-- <div class="product-page-intro-wrapper" data-module="homepage">
      <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">

      </nav>
@@ -281,4 +284,4 @@
  </div>-->


-{% endblock %}
+{% endblock %}
--- a/app/templates/views/signin.html
+++ b/app/templates/views/signin.html
@@ -12,8 +12,8 @@

 {% block maincolumn_content %}

-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
+<div class="grid-row">
+  <div class="tablet:grid-col-12">

    {% if again %}
      <h1 class="font-body-2xl margin-bottom-3">You need to sign in again</h1>
--- a/app/templates/views/templates/_template.html
+++ b/app/templates/views/templates/_template.html
@@ -1,10 +1,9 @@
 {% from "components/banner.html" import banner_wrapper %}

-<div class="govuk-grid-column-full template-container">
+<div class="grid-col-12 template-container">
  {{ template|string }}
 </div>
-<br>
-<div class="govuk-grid-column-full">
+<div class="grid-col-12">
  {% if template._template.archived %}
    <p class="hint">
      This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
@@ -16,26 +15,20 @@
      or edit this template, contact your manager.
    </p>
  {% else %}
-    <div class="bottom-gutter-2-3">
-      <div class="govuk-grid-row">
+    <div class="grid-row margin-bottom-5">
+      <div class="usa-button-group">
        {% if current_user.has_permissions('send_messages', restrict_admin_usage=True) %}
-          <div class="govuk-grid-column-one-half">
-            <a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
+            <a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-pill-separate-item">
              Prepare to send<span class="govuk-visually-hidden"> a message using this template</span>
            </a>
-          </div>
        {% endif %}
        {% if current_user.has_permissions('manage_templates') %}
-          <div class="govuk-grid-column-one-half">
-            <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
+            <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-button--outline usa-pill-separate-item">
              Edit
            </a>
-          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}
 </div>
-<br>
-<br>

--- a/app/templates/views/templates/_template_list.html
+++ b/app/templates/views/templates/_template_list.html
@@ -41,7 +41,7 @@
            <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
          </a>
        {% else %}
-          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
+          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="usa-link font-body-lg usa-template-list-template">
            <span class="live-search-relevant">
              {%- if current_service.api_keys -%}
                <span class="govuk-!-display-none">{{ item.id }} </span>
@@ -70,7 +70,7 @@
      {% set checkbox_config = {
        "html": label_content,
        "label": {
-          "classes": "template-list-item-label",
+          "classes": "template-list-item-label margin-top-05",
        },
        "id": "templates-or-folder-" ~ item.id,
        "classes": "template-list-item template-list-item-with-checkbox {}".format(
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -34,10 +34,13 @@

    <div class="govuk-grid-row">
      <div class="{% if current_user.has_permissions('manage_templates') %} govuk-grid-column-five-sixths {% else %} govuk-grid-column-full {% endif %}">
-        <p>
-          <br>
-          🚨 Every message starts with a template. To send, choose or create a template.
-        </p>
+        <div class="usa-alert usa-alert--info usa-alert--slim margin-y-5">
+          <div class="usa-alert__body">
+            <p class="usa-alert__text">
+              Every message starts with a template. To send, choose or create a template.
+            </p>
+          </div>
+        </div>
        {{ folder_path(
          folders=template_folder_path,
          service_id=current_service.id,
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -12,6 +12,7 @@
 {% block maincolumn_content %}

  {% if show_redaction_message %}
+
    <div class="bottom-gutter">
      {% call banner_wrapper(type='dangerous', subhead='Are you sure you want to hide personalization after sending?') %}
        <ul class="list list-bullet">
@@ -24,14 +25,14 @@
        </ul>
        <form method='post'>
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-          {{ govukButton({ "text": "Confirm", "classes": "govuk-button--warning govuk-!-margin-top-2" }) }}
+          {{ govukButton({ "text": "Confirm", "classes": "usa-button--secondary margin-top-2" }) }}
        </form>
      {% endcall %}
    </div>
  {% else %}
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        <h1 class="heading-large folder-heading">
+    <div class="grid-row">
+      <div class="grid-col-12">
+        <h1 class="font-body-lg folder-heading">
          Review your message
        </h1>
        {{ folder_path(
@@ -44,36 +45,25 @@
    </div>
  {% endif %}

-  <div class="govuk-grid-row">
+  <div class="grid-row">
    {% include 'views/templates/_template.html' %}
  </div>
-  <div class="bottom-gutter-1-2">
+  <div class="template-footer">
    {% if template._template.updated_at %}
-      <h2 class="heading-small bottom-gutter-2-3 heading-inline">
+      <h2 class="font-body-lg">
        Last edited
        <time class="timeago" datetime="{{ template._template.updated_at }}">
          {{ template._template.updated_at|format_delta }}
        </time>
      </h2>
-
-      &emsp;
-      <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous versions</a>
-      &emsp;
-      <br/>
+      <a class="usa-link margin-right-3" href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous versions</a>
    {% endif %}
    {% if current_user.has_permissions('manage_templates') and user_has_template_permission %}
      {% if not template._template.archived %}
-        <br/>
-        <br/>
-        <span class="page-footer-link page-footer-delete-link-without-button bottom-gutter-2-3">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this template</a>
-        </span>
-        &emsp;
+          <a class="usa-link margin-right-3" href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this template</a>
      {% endif %}
      {% if not template._template.redact_personalisation %}
-        <span class="page-footer-link page-footer-delete-link-without-button">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">Hide personalization after sending</a>
-        </span>
+          <a class="usa-link" href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">Hide personalization after sending</a>
      {% else %}
        <p class="hint">Personalization is hidden after sending</p>
      {% endif %}
--- a/app/templates/views/two-factor-sms.html
+++ b/app/templates/views/two-factor-sms.html
@@ -16,7 +16,7 @@

    {% call form_wrapper(class="extra-tracking") %}
      {{ form.sms_code(param_extensions={
-          "classes": "govuk-input govuk-input--width-5",
+          "classes": "width-card",
          "attributes": {"data-module": "autofocus"}
      }) }}
      {{ page_footer(
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -1,6 +1,5 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
-{% from "components/page-header.html" import page_header %}
 {% from "components/pill.html" import pill %}

 {% extends "withnav_template.html" %}
@@ -11,7 +10,9 @@

 {% block maincolumn_content %}

-    {{ page_header('Usage', size='medium') }}
+    <h1 class="font-body-lg">
+      Usage
+    </h1>

    <div class="bottom-gutter">
      {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
@@ -66,7 +67,7 @@
      </div> -->

      {% if months %}
-        <div class="dashboard-table usage-table body-copy-table">
+        <div class="dashboard-table usage-table body-copy-table margin-top-4">
          {% call(item, row_index) list_table(
            months,
            caption="Total spend",
@@ -134,7 +135,7 @@
      <div class="govuk-grid-column-two-thirds">
        <p class="align-with-heading-copy">
          What counts as 1 text message?<br />
-          See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.pricing') }}">pricing</a>.
+          See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
        </p>
      </div>
    </div>