Commit before switching branches

app/assets/javascripts/copyToClipboard.js

@@ -7,19 +7,19 @@
 
     const states = {
       'valueVisible': (options) => `
-        <span class="copy-to-clipboard__value">${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}</span>
-        <span class="copy-to-clipboard__notice govuk-visually-hidden" aria-live="assertive">
+        <span class="copy-to-clipboard__value margin-bottom-1">${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}</span>
+        <span class="copy-to-clipboard__notice usa-sr-only" aria-live="assertive">
           ${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
         </span>
-        <button class="govuk-button govuk-button--secondary copy-to-clipboard__button--copy">
+        <button class="usa-button usa-button--outline copy-to-clipboard__button--copy">
           Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
         </button>
       `,
       'valueCopied': (options) => `
         <span class="copy-to-clipboard__notice" aria-live="assertive">
-          <span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
+          <span class="usa-sr-only">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
         </span>
-        <button class="govuk-button govuk-button--secondary copy-to-clipboard__button--show">
+        <button class="usa-button copy-to-clipboard__button--show">
           Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
         </button>
       `

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -44,13 +44,13 @@ h1 {
    h1,
    h2:not(.get-started-list__heading, .usa-process-list__heading) {
       margin-top: units(4);
-      font-weight: bold !important;
+      font-weight: bold;
    }
 
    h2:not(.get-started-list__heading, .usa-process-list__heading),
    h3 {
-      margin-top: units(5) !important;
-      margin-bottom: units(2) !important;
+      margin-top: units(5);
+      margin-bottom: units(2);
    }
 }
 
@@ -75,8 +75,10 @@ p,
 }
 
 .show-more-no-border:focus,
-.show-more:focus {
-   box-shadow: none;
+.show-more:focus,
+.table-field-right-aligned a:active:before,
+.table-field-right-aligned a:focus:before {
+   box-shadow: none !important;
 }
 
 .govuk-checkboxes__label::after {
@@ -131,6 +133,7 @@ td.table-empty-message {
    text-decoration: none !important;
 }
 
-.sub-content .banner-dangerous h1 {
+.sub-content .banner-dangerous h1,
+.sub-content h2.user-list-item-heading {
    margin-top: 0;
 }

app/templates/components/table.html

@@ -117,16 +117,16 @@
 
 {% macro link_field(text, link) -%}
   {% call field() %}
-    <a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">{{ text }}</a>
+    <a class="usa-link" href="{{ link }}">{{ text }}</a>
   {% endcall %}
 {%- endmacro %}
 
 {% macro edit_field(text, link, permissions=[], suffix=None) -%}
   {% call field(align='right') %}
     {% if not permissions or current_user.has_permissions(*permissions) %}
-      <a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
+      <a class="usa-link" href="{{ link }}">
         {{ text }}
-        {%- if suffix %}<span class="govuk-visually-hidden"> {{ suffix }}</span>{% endif -%}
+        {%- if suffix %}<span class="usa-sr-only"> {{ suffix }}</span>{% endif -%}
       </a>
     {% endif %}
   {% endcall %}
@@ -159,7 +159,7 @@
     ) %}
       {% if displayed_on_single_line %}<span class="align-with-message-body">{% endif %}
       {% if notification.status|format_notification_status_as_url(notification.notification_type) %}
-        <a class="govuk-link govuk-link--{% if status == 'error' %}destructive{% else %}no-visited-state{% endif %}" href="{{ notification.status|format_notification_status_as_url(notification.notification_type) }}">
+        <a class="usa-link" href="{{ notification.status|format_notification_status_as_url(notification.notification_type) }}">
       {% endif %}
       {{ notification.status|format_notification_status(notification.template.template_type) }}
       {% if notification.status|format_notification_status_as_url(notification.notification_type) %}

app/templates/views/dashboard/write-first-messages.html

@@ -1,7 +1,4 @@
 <h2 class="font-body-lg">Get started</h2>
-
-<nav>
-  <a class="govuk-link govuk-link--no-visited-state pill-separate-item" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
-    Write an email or text message
-  </a>
-</nav>
+<a class="usa-button" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
+  Create your first template
+</a>

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

@@ -14,8 +14,8 @@
 
 {% block maincolumn_content %}
 
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-five-sixths">
+  <div class="grid-row">
+    <div class="grid-col-9">
       {{ page_header('Send text messages') }}
       <p>
         You have a free allowance of

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

@@ -25,22 +25,22 @@
     {% endif %}
     {% for item in current_service.sms_senders_with_hints %}
       <div class="user-list-item">
-        <div class="govuk-grid-row">
-          <div class="govuk-grid-column-three-quarters">
+        <div class="grid-row">
+          <div class="grid-col">
             <h2 class="user-list-item-heading">
-              <span class="heading-small">{{ item.sms_sender }}</span>
+              <span class="font-body-lg">{{ item.sms_sender }}</span>
               {% if item.hint %}
                 &ensp;
-                <span class="hint">
+                <span class="usa-hint">
                   {{ item.hint }}
                 </span>
               {% endif %}
             </h2>
           </div>
-          <div class="govuk-grid-column-one-quarter">
+          <div class="grid-col">
             {% if current_user.has_permissions('manage_service') %}
-              <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">
-               Change<span class="govuk-visually-hidden"> {{ item.sms_sender }}</span>
+              <a class="usa-link user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">
+               Change<span class="usa-sr-only"> {{ item.sms_sender }}</span>
               </a>
             {% endif %}
           </div>