From 9e4a20de75235b56e51263137759332ec761a2f7 Mon Sep 17 00:00:00 2001
From: Kilian Ciuffolo <385716+kilianc@users.noreply.github.com>
Date: Tue, 21 May 2024 22:13:27 -0700
Subject: [PATCH] fix: correctly color legend at the top (#55)

---
 assets/index.css | 26 +++++++++++++-------------
 assets/index.js  | 14 ++++++++++++++
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/assets/index.css b/assets/index.css
index ee5537a..b86aede 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -212,20 +212,20 @@ body {
         padding: 0 16px;
       }
     }
+  }
+}
 
-    .cov-covered {
-      color: var(--covered);
-      background-color: color-mix(in srgb, var(--covered) 10%, transparent);
-    }
+.cov-covered {
+  color: var(--covered);
+  background-color: color-mix(in srgb, var(--covered) 10%, transparent);
+}
 
-    .cov-uncovered {
-      color: var(--uncovered);
-      background-color: color-mix(in srgb, var(--uncovered) 20%, transparent);
-    }
+.cov-uncovered {
+  color: var(--uncovered);
+  background-color: color-mix(in srgb, var(--uncovered) 20%, transparent);
+}
 
-    .cov-mixed {
-      color: var(--mixed);
-      background-color: color-mix(in srgb, var(--mixed) 10%, transparent);
-    }
-  }
+.cov-mixed {
+  color: var(--mixed);
+  background-color: color-mix(in srgb, var(--mixed) 10%, transparent);
 }
diff --git a/assets/index.js b/assets/index.js
index 7428895..de128c1 100644
--- a/assets/index.js
+++ b/assets/index.js
@@ -28,6 +28,7 @@ function main() {
   }
 
   // setup the layout
+  configureLegend()
   configureFileSelect()
   addIncrementalButton()
   addThemeButton()
@@ -42,6 +43,19 @@ function main() {
   document.documentElement.style.setProperty('opacity', '1')
 }
 
+function configureLegend() {
+  let spans = document.querySelectorAll('#legend span')
+  for (let i = 0; i < spans.length; i++) {
+    if (spans[i].classList.length === 0) continue
+
+    if (spans[i].classList[0] === 'cov0') {
+      spans[i].classList.add('cov-uncovered')
+    } else {
+      spans[i].classList.add('cov-covered')
+    }
+  }
+}
+
 function addCoverageSpans(cssSelector) {
   let spans = Array.from(document.querySelectorAll(`${cssSelector} span`))