fix: correctly color legend at the top (#55)

Author: kilianc

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);
 }

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`))