From 44b30e08defe13c0a48d7e5fbf068fd9eee12b3e Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Tue, 5 Jul 2022 19:57:09 +0200
Subject: [PATCH] UI: Color status in JobDetails and TaskDetails component

Create a visual connection with the colors used by the indicators.
---
 web/app/src/components/jobs/JobDetails.vue  | 8 ++++++--
 web/app/src/components/jobs/TaskDetails.vue | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 74efef2d..9ced29ce 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -27,7 +27,7 @@
           <dd>{{ jobData.name }}</dd>
 
           <dt class="field-status" title="Status">Status</dt>
-          <dd>{{ jobData.status }}</dd>
+          <dd class="field-status-label" :class="'status-' + jobData.status">{{ jobData.status }}</dd>
 
           <dt class="field-type" title="Type">Type</dt>
           <dd>{{ jobType ? jobType.label : jobData.type }}</dd>
@@ -46,7 +46,6 @@
         </dl>
       </TabItem>
     </TabsWrapper>
-
   </template>
 
   <div v-else class="details-no-item-selected">
@@ -208,4 +207,9 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.field-status-label {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
 </style>
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index 9390786b..e32c5f1e 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -10,7 +10,7 @@
       <dd>{{ taskData.name }}</dd>
 
       <dt class="field-status" title="Status">Status</dt>
-      <dd>{{ taskData.status }}</dd>
+      <dd class="field-status-label" :class="'status-' + taskData.status">{{ taskData.status }}</dd>
 
       <dt class="field-worker" title="Assigned To">Assigned To</dt>
       <dd><worker-link :worker="taskData.worker" /></dd>
@@ -91,4 +91,9 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.field-status-label {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
 </style>