diff --git a/app/assets/javascripts/activityChart.js b/app/assets/javascripts/activityChart.js index 75913c145..b5139f157 100644 --- a/app/assets/javascripts/activityChart.js +++ b/app/assets/javascripts/activityChart.js @@ -4,7 +4,7 @@ const COLORS = { delivered: '#0076d6', - failed: '#fa9441', + failed: '#c6cace', text: '#666' }; diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js index ff409c969..755d46f6e 100644 --- a/app/assets/javascripts/totalMessagesChart.js +++ b/app/assets/javascripts/totalMessagesChart.js @@ -21,7 +21,7 @@ var svg = d3.select("#totalMessageChart"); var width = chartContainer.clientWidth; - var height = 64; + var height = 50; // Ensure the width is set correctly if (width === 0) { @@ -62,7 +62,7 @@ .attr("x", 0) // Initially set to 0, will be updated during animation .attr("y", 0) .attr("height", height) - .attr("fill", '#fa9441') + .attr("fill", '#c6cace') .attr("width", 0) // Start with width 0 for animation .on('mouseover', function(event) { tooltip.style('display', 'block') diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss index 6139933be..7740aad3f 100644 --- a/app/assets/sass/uswds/_data-visualization.scss +++ b/app/assets/sass/uswds/_data-visualization.scss @@ -2,7 +2,7 @@ $delivered: color('blue-50v'); $pending: color('green-cool-40v'); -$failed: color('orange-30v'); +$failed: color('gray-cool-20'); .chart-container { display: flex;