Updates to styles and js

app/assets/javascripts/activityChart.js

@@ -4,7 +4,7 @@
 
         const COLORS = {
             delivered: '#0076d6',
-            failed: '#c6cace',
+            failed: '#fa9441',
             text: '#666'
         };
 

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;

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 {

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