From 832932f3b8ca75b33f7c6d77efc8c405a4277906 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Fri, 9 Aug 2024 10:33:51 -0400
Subject: [PATCH] Updates to styles and js

---
 app/assets/javascripts/activityChart.js        | 2 +-
 app/assets/javascripts/totalMessagesChart.js   | 2 +-
 app/assets/sass/uswds/_data-visualization.scss | 4 ++++
 app/templates/views/dashboard/dashboard.html   | 4 ----
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js
index b5139f157..75913c145 100644
--- a/app/assets/javascripts/activityChart.js
+++ b/app/assets/javascripts/activityChart.js
@@ -4,7 +4,7 @@
 
         const COLORS = {
             delivered: '#0076d6',
-            failed: '#c6cace',
+            failed: '#fa9441',
             text: '#666'
         };
 
diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js
index bebd6e106..a3c10d7a3 100644
--- a/app/assets/javascripts/totalMessagesChart.js
+++ b/app/assets/javascripts/totalMessagesChart.js
@@ -14,7 +14,7 @@
         document.getElementById('message').innerText = `${sms_sent.toLocaleString()} sent / ${sms_remaining_messages.toLocaleString()} remaining`;
 
         // Calculate minimum width for "Messages Sent" as 1% of the total chart width
-        var minSentPercentage = 0.01; // Minimum width as a percentage of total messages (1% in this case)
+        var minSentPercentage = 0.02; // Minimum width as a percentage of total messages (1% in this case)
         var minSentValue = totalMessages * minSentPercentage;
         var displaySent = Math.max(sms_sent, minSentValue);
         var displayRemaining = totalMessages - displaySent;
diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss
index 7740aad3f..48c5f1256 100644
--- a/app/assets/sass/uswds/_data-visualization.scss
+++ b/app/assets/sass/uswds/_data-visualization.scss
@@ -11,6 +11,10 @@ $failed: color('gray-cool-20');
   }
 }
 
+#totalMessageChartContainer {
+  max-width: 600px;
+}
+
 .bar {
   border-radius: units(0.5);
   &.delivered, &.usage {
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index eeca2b213..2c1af4909 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -28,10 +28,6 @@
       <div id="message"></div>
     </div>
     <div id="totalMessageTable" class="margin-0"></div>
-    <p class="align-with-heading-copy margin-bottom-4">
-      What counts as 1 text message part?<br />
-      See <a class="usa-link" href="{{ url_for('.pricing') }}">Tracking usage</a>.
-    </p>
 
     <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">
       Activity snapshot