refactor($48): 💄 Made the Accepted filtering more intuitive

TDT4290-group-4 · Oct 29, 2025 · 6f25a4d · 6f25a4d
1 parent 1315491
commit 6f25a4d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/AcceptedFiltering/threePanels.css b/src/AcceptedFiltering/threePanels.css
@@ -128,22 +128,24 @@
   align-items: center;
   margin: 3px 0;
   font-size: 13px;
-  color: #ddd; /* visible text */
+  color: #ddd;
 }
 
-/* Color boxes */
+/* Color boxes → now circles */
 #accepted_legend .legend-color {
-  width: 16px;
-  height: 16px;
-  border: 1px solid #777;
-  margin-right: 8px;
-  border-radius: 2px;
+  width: 20px;
+  height: 8px;
+  border-radius: 4px; /* pill shape */
+  margin-left: 6px;
 }
 
 #accepted_legend .legend-color.accepted {
   background-color: #fff;
+  border: #0008;
+  box-shadow: 0 0 4px 1px #fff8;
 }
 
 #accepted_legend .legend-color.not-accepted {
   background-color: #000;
+  box-shadow: 0 0 4px 1px #fff8;
 }
diff --git a/src/AcceptedFiltering/threePanels.js b/src/AcceptedFiltering/threePanels.js
@@ -299,12 +299,12 @@ function ensureAcceptedLegend() {
     legend.style.display = 'none'
     legend.innerHTML = `
       <div class="legend-row">
+        <span>Accepted points displayed as: </span>
         <div class="legend-color accepted"></div>
-        <span>Accepted points</span>
       </div>
       <div class="legend-row">
+        <span>Not accepted points displayed as: </span>
         <div class="legend-color not-accepted"></div>
-        <span>Not accepted points</span>
       </div>
     `
     list.appendChild(legend)