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: Uptime, - Cell: ({ row }) => ( - - {row.original.qualityOfService.toFixed()}% - - ), + 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 ( + + {value.toFixed()}% + + ); + }, }, { @@ -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 ( - + {value}% );