Merge pull request #1326 from GSA/805-make-dashboard-links-clickable

805 make dashboard links clickable

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

@@ -319,27 +319,15 @@ td.table-empty-message {
 
 .dashboard {
    .big-number-with-status {
-      a {
-         background: color("blue-60v");
-         padding: units(2);
-         margin-bottom: units(1);
-         text-decoration: none;
-         &:hover{
-            background: color("blue-warm-70v");
-         }
-      }
-      span {
-         color: white;
-      }
       .big-number-smaller {
          display: flex;
          flex-direction: column;
          .big-number-number {
                font-size: units(5);
-               line-height: units(6);
+               line-height: units(5);
          }
          .big-number-label {
-               font-size: units(3);
+               font-size: units(2.5);
          }
       }
       .big-number-status {

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

@@ -9,5 +9,9 @@ in the form $setting: value,
 
 @use "uswds-core" with (
    $theme-font-type-sans: "public-sans",
-   $theme-show-notifications: false
+   $theme-show-notifications: false,
+   $theme-banner-max-width: "desktop-lg",
+   $theme-grid-container-max-width: "desktop-lg",
+   $theme-footer-max-width: "desktop-lg",
+   $theme-header-max-width: "desktop-lg"
 );

app/templates/views/dashboard/_totals.html

@@ -1,43 +1,25 @@
 <div class="ajax-block-container">
   <div class="grid-row grid-gap">
-    <div id="total-sms" class="grid-col-12">
+    <div id="total-sms" class="grid-col-12 margin-top-2">
-      <span class="big-number-with-status">
+      <span class="big-number-with-status display-block margin-bottom-2">
-        <a class="usa-link display-flex" href="{{ url_for('.view_notifications', service_id=service_id, message_type='sms', status='sending,delivered,failed') }}">
+        <p>
           <span class="big-number-smaller">
             <span class="big-number-number">
               {% if statistics['sms']['requested'] is number %}
-                {{ "{:,}".format(statistics['sms']['requested']) }}
+              {{ "{:,}".format(statistics['sms']['requested']) }}
               {% else %}
-                {{ statistics['sms']['requested'] }}
+              {{ statistics['sms']['requested'] }}
               {% endif %}
             </span>
-            <span class="big-number-label">{{ statistics['sms']['requested']|message_count_label('sms', suffix='sent') }}</span>
+            <span class="big-number-label">{{ statistics['sms']['requested']|message_count_label('sms', suffix='sent') }} in the last seven days</span>
           </span>
+        </p>
+        <a class="usa-button usa-button--outline" href="{{ url_for('.view_notifications', service_id=service_id, message_type='sms', status='sending,delivered,failed') }}">
+         Details
         </a>
-        {% if show_failures %}
+        {# Removing the failures area for now, as the user can click on the above link to see all the details.
-          <span class="big-number-status{% if statistics['sms']['show_warning'] is sameas true %} big-number-status--failing{% endif %}">
+        In the future state of the dashboard, the all statuses will be more apparent with data visualizations #}
-            {% if statistics['sms']['failed'] %}
-              <a class="usa-link" href="{{ url_for('.view_notifications', service_id=service_id, message_type='sms', status='failed') }}">
-                {{ "{:,}".format(statistics['sms']['failed']) }}
-                failed – {{ statistics['sms']['failed_percentage'] }}%
-              </a>
-            {% else %}
-              No failures
-            {% endif %}
-          </span>
-        {% endif %}
       </span>
       </div>
-      <!-- <div id="total-email" class="grid-col-6">
-        <span class="big-number-with-status pilot-disabled">
-          <a class="usa-link 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>
-            </span>
-          </a>
-          <span class="big-number-status">No failures</span>
-        </span>
-      </div> -->
     </div>
 </div>

app/templates/views/dashboard/dashboard.html

@@ -18,10 +18,9 @@
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-xl margin-0">
+    <h2 class="font-body-2xl line-height-sans-2 margin-0">
       Messages sent
     </h2>
-    <p class="margin-top-0">In the last seven days</p>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 

tests/app/main/views/test_dashboard.py

@@ -655,7 +655,7 @@ def test_should_not_show_recent_templates_on_dashboard_if_only_one_template_used
     expected_count = stats[0]["count"]
     assert expected_count == 50
     assert normalize_spaces(page.select_one("#total-sms .big-number-smaller").text) == (
-        "{} text messages sent".format(expected_count)
+        "{} text messages sent in the last seven days".format(expected_count)
     )