X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/08ac60f877d6495a748747a3a0d30ca9f0e289d5..7f857c19e38816c3323ff930d13f9f981624ed8b:/src/store/processes/process.ts

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index b72a0c2b..d7fd3aa2 100644
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -73,25 +73,55 @@ export const getProcessRuntime = ({ container }: Process) => {
     }
 };
 
-export const getProcessStatusColor = (status: string, { customs }: ArvadosTheme) => {
+
+export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): React.CSSProperties => {
+    let color = theme.customs.colors.grey500;
+    let running = false;
     switch (status) {
         case ProcessStatus.RUNNING:
-            return customs.colors.blue500;
+            color = theme.customs.colors.green800;
+            running = true;
+            break;
         case ProcessStatus.COMPLETED:
-            return customs.colors.green700;
+            color = theme.customs.colors.green800;
+            break;
         case ProcessStatus.WARNING:
-            return customs.colors.yellow700;
+            color = theme.customs.colors.green800;
+            running = true;
+            break;
         case ProcessStatus.FAILING:
+            color = theme.customs.colors.red900;
+            running = true;
+            break;
         case ProcessStatus.CANCELLED:
         case ProcessStatus.FAILED:
-            return customs.colors.red900;
+            color = theme.customs.colors.red900;
+            break;
+        case ProcessStatus.QUEUED:
+            color = theme.customs.colors.grey600;
+            running = true;
+            break;
         default:
-            return customs.colors.grey500;
+            color = theme.customs.colors.grey600;
+            break;
     }
+
+    // Using color and running we build the text, border, and background style properties
+    return {
+        // Set background color when not running, otherwise use white
+        backgroundColor: running ? theme.palette.common.white : color,
+        // Set text color to status color when running, else use white text for solid button
+        color: running ? color : theme.palette.common.white,
+        // Set border color when running, else omit the style entirely
+        ...(running ? {border: `2px solid ${color}`} : {}),
+    };
 };
 
 export const getProcessStatus = ({ containerRequest, container }: Process): ProcessStatus => {
     switch (true) {
+        case containerRequest.containerUuid && !container:
+            return ProcessStatus.UNKNOWN;
+
         case containerRequest.state === ContainerRequestState.FINAL &&
             container?.state !== ContainerState.COMPLETE:
             // Request was finalized before its container started (or the