arrange colours of chart by odd first, then even

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 */

src/app/components/client/Chart.tsx

@@ -73,7 +73,6 @@ export const DoughnutChart = (props: Props) => {
       />
     );
   });
-
   const modalContent = (
     <div className={styles.modalBodyContent}>
       <p>