From 128cf7c07082ab313f495c0bcca02fb2daed2037 Mon Sep 17 00:00:00 2001
From: Yana <iana.matrosova@gmail.com>
Date: Fri, 9 May 2025 15:46:50 +0300
Subject: [PATCH] Add colors on uptime

---
 .../src/components/nodeTable/NodeTable.tsx    | 33 +++++++++++++------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/explorer-v2/src/components/nodeTable/NodeTable.tsx b/explorer-v2/src/components/nodeTable/NodeTable.tsx
index 5ae66d27c4..10c96490b0 100644
--- a/explorer-v2/src/components/nodeTable/NodeTable.tsx
+++ b/explorer-v2/src/components/nodeTable/NodeTable.tsx
@@ -281,11 +281,24 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         accessorKey: "qualityOfService",
         size: 100,
         Header: <ColumnHeading>Uptime</ColumnHeading>,
-        Cell: ({ row }) => (
-          <Typography variant="body4">
-            {row.original.qualityOfService.toFixed()}%
-          </Typography>
-        ),
+        Cell: ({ row }) => {
+          const value = row.original.qualityOfService;
+          let color = "#000000";
+
+          if (value >= 80) {
+            color = "#22C55E"; // green
+          } else if (value >= 50) {
+            color = "#F59E0B"; // amber/orange-yellow
+          } else {
+            color = "#EF4444"; // red
+          }
+
+          return (
+            <Typography variant="body4" sx={{ color, fontWeight: 400 }}>
+              {value.toFixed()}%
+            </Typography>
+          );
+        },
       },
 
       {
@@ -300,17 +313,17 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
           let color = "#000000";
 
           if (value > 100) {
-            color = "#EF4444"; // red
+            color = "#EF4444";
           } else if (value >= 75) {
-            color = "#22C55E"; // green
+            color = "#22C55E";
           } else if (value >= 25) {
-            color = "#F59E0B"; // amber/orange-yellow
+            color = "#F59E0B";
           } else {
-            color = "#EF4444"; // red
+            color = "#EF4444";
           }
 
           return (
-            <Typography variant="body4" sx={{ color }}>
+            <Typography variant="body4" sx={{ color, fontWeight: 400 }}>
               {value}%
             </Typography>
           );