From 2dce8fcb27ddfcd88fa2e9f4714b22f2c0e96ab3 Mon Sep 17 00:00:00 2001
From: Kaitlyn <kandres@mozilla.com>
Date: Tue, 25 Jul 2023 17:06:59 -0400
Subject: [PATCH] arrange colours of chart by odd first, then even

---
 src/app/components/client/Chart.module.scss | 54 ++++++++++-----------
 src/app/components/client/Chart.tsx         |  1 -
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/app/components/client/Chart.module.scss b/src/app/components/client/Chart.module.scss
index 7bdbb9749bd..f91196c53b0 100644
--- a/src/app/components/client/Chart.module.scss
+++ b/src/app/components/client/Chart.module.scss
@@ -129,111 +129,111 @@
   }
 }
 .slice:nth-child(3) {
-  stroke: $color-purple-80;
+  stroke: $color-purple-70;
 }
 .legend tbody tr:nth-child(2) {
   .chartAndLegendWrapper:has(.slice:nth-child(3):hover) & {
-    color: $color-purple-80;
+    color: $color-purple-70;
   }
 
   rect {
-    fill: $color-purple-80;
+    fill: $color-purple-70;
   }
 }
 .slice:nth-child(4) {
-  stroke: $color-purple-70;
+  stroke: $color-purple-50;
 }
 .legend tbody tr:nth-child(3) {
   .chartAndLegendWrapper:has(.slice:nth-child(4):hover) & {
-    color: $color-purple-70;
+    color: $color-purple-50;
   }
 
   rect {
-    fill: $color-purple-70;
+    fill: $color-purple-50;
   }
 }
 .slice:nth-child(5) {
-  stroke: $color-purple-60;
+  stroke: $color-purple-30;
 }
 .legend tbody tr:nth-child(4) {
   .chartAndLegendWrapper:has(.slice:nth-child(5):hover) & {
-    color: $color-purple-60;
+    color: $color-purple-30;
   }
 
   rect {
-    fill: $color-purple-60;
+    fill: $color-purple-30;
   }
 }
 .slice:nth-child(6) {
-  stroke: $color-purple-50;
+  stroke: $color-purple-10;
 }
 .legend tbody tr:nth-child(5) {
   .chartAndLegendWrapper:has(.slice:nth-child(6):hover) & {
-    color: $color-purple-50;
+    color: $color-purple-10;
   }
 
   rect {
-    fill: $color-purple-50;
+    fill: $color-purple-10;
   }
 }
 .slice:nth-child(7) {
-  stroke: $color-purple-40;
+  stroke: $color-purple-80;
 }
 .legend tbody tr:nth-child(6) {
   .chartAndLegendWrapper:has(.slice:nth-child(7):hover) & {
-    color: $color-purple-40;
+    color: $color-purple-80;
   }
 
   rect {
-    fill: $color-purple-40;
+    fill: $color-purple-80;
   }
 }
 .slice:nth-child(8) {
-  stroke: $color-purple-30;
+  stroke: $color-purple-60;
 }
 .legend tbody tr:nth-child(7) {
   .chartAndLegendWrapper:has(.slice:nth-child(8):hover) & {
-    color: $color-purple-30;
+    color: $color-purple-60;
   }
 
   rect {
-    fill: $color-purple-30;
+    fill: $color-purple-60;
   }
 }
 .slice:nth-child(9) {
-  stroke: $color-purple-20;
+  stroke: $color-purple-40;
 }
 .legend tbody tr:nth-child(8) {
   .chartAndLegendWrapper:has(.slice:nth-child(9):hover) & {
-    color: $color-purple-20;
+    color: $color-purple-40;
   }
 
   rect {
-    fill: $color-purple-20;
+    fill: $color-purple-40;
   }
 }
 .slice:nth-child(10) {
-  stroke: $color-purple-10;
+  stroke: $color-purple-20;
 }
 .legend tbody tr:nth-child(9) {
   .chartAndLegendWrapper:has(.slice:nth-child(10):hover) & {
-    color: $color-purple-10;
+    color: $color-purple-20;
   }
 
   rect {
-    fill: $color-purple-10;
+    fill: $color-purple-20;
   }
 }
 .slice:nth-child(11) {
-  stroke: $color-purple-05;
+  stroke: $color-violet-90;
 }
 .legend tbody tr:nth-child(10) {
   .chartAndLegendWrapper:has(.slice:nth-child(11):hover) & {
-    color: $color-purple-05;
+    color: $color-violet-90;
   }
 
   rect {
-    fill: $color-purple-05;
+    fill: $color-violet-90;
   }
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/app/components/client/Chart.tsx b/src/app/components/client/Chart.tsx
index aec4e46fabf..73cd9c884d5 100644
--- a/src/app/components/client/Chart.tsx
+++ b/src/app/components/client/Chart.tsx
@@ -73,7 +73,6 @@ export const DoughnutChart = (props: Props) => {
       />
     );
   });
-
   const modalContent = (
     <div className={styles.modalBodyContent}>
       <p>