feat: add color to scorecard menu

NodeSecure · Nov 25, 2023 · 94ec2ca · 94ec2ca
1 parent dbbd43e
commit 94ec2ca
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/public/css/components/package/navigation.css b/public/css/components/package/navigation.css
@@ -88,3 +88,20 @@ section#package-info>.package-navigation>div>.signal {
 section#package-info>.package-navigation>div#scorecard-menu {
   display: none;
 }
+
+section#package-info>.package-navigation>div#scorecard-menu.red {
+  border: 2px solid #EF5350;
+  color: #FF80AB;
+}
+section#package-info>.package-navigation>div#scorecard-menu.orange {
+  border: 2px solid #FDD835;
+  color: #FFD740;
+}
+section#package-info>.package-navigation>div#scorecard-menu.blue {
+  border: 2px solid #2962FF;
+  color: #BBDEFB;
+}
+section#package-info>.package-navigation>div#scorecard-menu.green {
+  border: 2px solid #00E676;
+  color: #B2FF59;
+}
diff --git a/public/js/components/package/pannels/scorecard.js b/public/js/components/package/pannels/scorecard.js
@@ -62,6 +62,20 @@ export class Scorecard {
     });
   }
 
+  getScoreColor(score) {
+    if (score < 4) {
+      return "red";
+    }
+    if (score < 6.5) {
+      return "orange";
+    }
+    if (score < 8.5) {
+      return "blue";
+    }
+
+    return "green";
+  }
+
   renderScorecard(data, repoName) {
     const { score, checks } = data;
 
@@ -74,6 +88,9 @@ export class Scorecard {
     }
 
     document.getElementById('ossf-score').innerText = score;
+    document.getElementById('scorecard-menu').classList.add(
+      this.getScoreColor(score)
+    );
     document.getElementById('head-score').innerText = score;
     document
       .querySelector(".score-header .visualizer a")

diff --git a/src/http-server/endpoints/ossf-scorecard.js b/src/http-server/endpoints/ossf-scorecard.js
@@ -14,6 +14,10 @@ export async function get(req, res) {
   }
 
   catch (error) {
-    return send(res, error.statusCode ?? 404, { error: error.statusMessage ?? "Not Found" });
+    return send(
+      res,
+      error.statusCode ?? 404,
+      { error: error.statusMessage ?? "Not Found" }
+    );
   }
 }