From f0aaef4fd6fd36b4d060344c3a08b098b6f5f9da Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 14 Dec 2021 12:49:22 -0700
Subject: [PATCH 1/2] styling

---
 ui/app/components/clients/total-client-usage.js |  5 +++--
 ui/app/styles/core/charts.scss                  | 10 +++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/ui/app/components/clients/total-client-usage.js b/ui/app/components/clients/total-client-usage.js
index 226efe63cfbc..8707a9fc27c8 100644
--- a/ui/app/components/clients/total-client-usage.js
+++ b/ui/app/components/clients/total-client-usage.js
@@ -44,7 +44,7 @@ const BAR_COLOR_DEFAULT = ['#8AB1FF', '#1563FF'];
 const BACKGROUND_BAR_COLOR = '#EBEEF2';
 
 const AXES_MARGIN = { xLeft: 10, xDown: 290 }; // makes space for y-axis legend
-const TRANSLATE = { none: 0, right: 10, down: -31 };
+const TRANSLATE = { none: 0, right: 10, down: -30 };
 
 export default class TotalClientUsage extends Component {
   @tracked tooltipTarget = '';
@@ -72,7 +72,7 @@ export default class TotalClientUsage extends Component {
     chartSvg.attr('viewBox', `0 5 725 305`); // set aspect ratio
 
     let groups = chartSvg
-      .selectAll('g')
+      .selectAll('g.rect')
       .data(stackedData)
       .enter()
       .append('g')
@@ -110,6 +110,7 @@ export default class TotalClientUsage extends Component {
         .append('g')
         .attr('transform', `translate(${TRANSLATE.right})`)
         .attr('class', 'axes-lines')
+      // .style('mix-blend-mode', 'darken')
     );
 
     // customize x-axis
diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss
index f332d6d7fc0e..4d9a5de9215d 100644
--- a/ui/app/styles/core/charts.scss
+++ b/ui/app/styles/core/charts.scss
@@ -74,13 +74,6 @@
   }
 }
 
-.chart {
-  .tick > text {
-    font-weight: $font-weight-semibold;
-    font-size: $size-8;
-  }
-}
-
 .chart-column-left {
   grid-column-start: 1;
   grid-column-end: 4;
@@ -189,9 +182,12 @@
 .axes-lines {
   g > text {
     color: $ui-gray-500;
+    font-weight: $font-weight-semibold;
+    font-size: $size-8;
   }
 
   g > line {
     color: $ui-gray-300;
+    mix-blend-mode: darken;
   }
 }

From 844a8000cece9bc2541337a98e132b5df33ac77f Mon Sep 17 00:00:00 2001
From: Angel Garbarino <argarbarino@gmail.com>
Date: Tue, 14 Dec 2021 16:09:37 -0700
Subject: [PATCH 2/2] cleanup

---
 ui/app/components/clients/total-client-usage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/app/components/clients/total-client-usage.js b/ui/app/components/clients/total-client-usage.js
index 8707a9fc27c8..1a3ccac42100 100644
--- a/ui/app/components/clients/total-client-usage.js
+++ b/ui/app/components/clients/total-client-usage.js
@@ -72,7 +72,7 @@ export default class TotalClientUsage extends Component {
     chartSvg.attr('viewBox', `0 5 725 305`); // set aspect ratio
 
     let groups = chartSvg
-      .selectAll('g.rect')
+      .selectAll('g')
       .data(stackedData)
       .enter()
       .append('g')
@@ -110,7 +110,6 @@ export default class TotalClientUsage extends Component {
         .append('g')
         .attr('transform', `translate(${TRANSLATE.right})`)
         .attr('class', 'axes-lines')
-      // .style('mix-blend-mode', 'darken')
     );
 
     // customize x-axis