Changing the layout of the page to a table view

GSA · Oct 31, 2023 · 0a11211 · 0a11211
1 parent c695b59
commit 0a11211
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 27 deletions.
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -238,9 +238,6 @@ td.table-empty-message {
 // Dashboard
 
 .dashboard {
-   .big-number-number {
-      font-weight: bold; 
-   }
    .big-number-with-status {
       a {
          background: color("blue-60v");

diff --git a/app/templates/views/dashboard/_usage.html b/app/templates/views/dashboard/_usage.html
@@ -2,22 +2,34 @@
 
 <div class='grid-row grid-gap ajax-block-container'>
   <div class='grid-col-12'>
-    <div class="keyline-block">
-      {% if sms_cost %}
-        {{ big_number(
-          sms_cost,
-          'spent on text messages',
-          currency="$",
-          smaller=True
-        ) }}
-      {% else %}
-        {{ big_number(sms_allowance_remaining, 'free text messages left', smaller=True) }}
-      {% endif %}
-    </div>
+
+    <table class="usa-table usa-table--borderless margin-bottom-5">
+      <caption class="usa-sr-only">
+        Daily
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Usage</th>
+          <th scope="col">Remaining</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ big_number(40000 - sms_allowance_remaining, smaller=True) }}</td>
+          <td>
+            {% if sms_cost %}
+            {{ big_number(
+              sms_cost,
+              'spent on text messages',
+              currency="$",
+              smaller=True
+            ) }}
+            {% else %}
+              {{ big_number(sms_allowance_remaining, smaller=True) }}
+            {% endif %}
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
-  <!-- <div class='grid-col-6 pilot-disabled'>
-    <div class="keyline-block">
-      {{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
-    </div>
-  </div> -->
 </div>
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
@@ -19,25 +19,46 @@ <h1 class="usa-sr-only">Dashboard</h1>
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-lg margin-top-0 margin-bottom-1">
-      In the last seven days
+    <h2 class="font-body-xl margin-0">
+      Messages sent
     </h2>
+    <p class="margin-top-0">In the last seven days</p>
 
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     {{ ajax_block(partials, updates_url, 'totals') }}
 
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
 
-    <h2 class="heading-small margin-bottom-1">Daily messages across all services</h2>
-    <p class="margin-top-0"><strong>{{ daily_global_messages_remaining }}</strong> free text messages left</p>
+    <h2 class="margin-bottom-1">Usage</h2>
+    <h3 class="margin-bottom-0">Daily</h3>
+    <p class="margin-0">Across all services</p>
+    <table class="usa-table usa-table--borderless margin-bottom-5">
+      <caption class="usa-sr-only">
+        Daily
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Usage</th>
+          <th scope="col">Remaining</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ 5000 - daily_global_messages_remaining }}</td>
+          <td>
+            {{ daily_global_messages_remaining }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
     {% if current_user.has_permissions('manage_service') %}
-      <h2 class='font-body-lg margin-bottom-1'>This year</h2>
+      <h3 class='font-body-md margin-bottom-1'>2023</h3>
       {{ ajax_block(partials, updates_url, 'usage') }}
       {{ show_more(
         url_for(".usage", service_id=current_service['id']),
-        'See usage'
+        'See all usage'
       ) }}
     {% endif %}
   </div>

diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html
@@ -22,7 +22,8 @@ <h1 class="font-body-lg">
 
         <div class='grid-col-12'>
           <h2 class="heading-small margin-bottom-1">Daily messages across all services</h2>
-          <p class="margin-top-0"><strong>{{ daily_global_messages_remaining }}</strong> free text messages left</p>
+          <p class="margin-0">You have sent {{ 5000 - daily_global_messages_remaining }} of your 5000 daily messages allowance.</p>
+          <p class="margin-0"></p>You have {{ daily_global_messages_remaining }} messages remaining.</p>
           <h2 class='heading-small margin-bottom-1'>Text messages</h2>
           <div class="keyline-block">
             You have sent