From 7032c1ad0b24d420d46e360f8146cc6eac5e5b12 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 7 Jul 2022 12:20:25 +0200
Subject: [PATCH] Workers: Color status indicators

Match Jobs and Tasks.
---
 web/app/src/assets/base.css    | 5 +++++
 web/app/src/statusindicator.js | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 501a9bf7..4310ec72 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -442,6 +442,11 @@ select {
   --indicator-color: var(--color-worker-status-offline);
 }
 
+[class^='worker-status'] {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
+
 .status-archiving,
 .status-active,
 .status-queued,
diff --git a/web/app/src/statusindicator.js b/web/app/src/statusindicator.js
index 6f2d4a91..39cfb816 100644
--- a/web/app/src/statusindicator.js
+++ b/web/app/src/statusindicator.js
@@ -26,7 +26,7 @@ export function indicator(status, classNamePrefix) {
  */
 export function workerStatus(worker) {
   if (!worker.status_change) {
-    return `${worker.status}`;
+    return `<span class="worker-status-${worker.status}">${worker.status}</span>`;
   }
 
   let arrow;
@@ -36,5 +36,7 @@ export function workerStatus(worker) {
     arrow = `<span class='state-transition-arrow forced' title='forced status transition'>➜</span>`
   }
 
-  return `${worker.status} ${arrow} ${worker.status_change.status}`;
+  return `<span class="worker-status-${worker.status}">${worker.status}</span>
+          ${arrow}
+          <span class="worker-status-${worker.status_change.status}">${worker.status_change.status}</span>`;
 }