From 84fe14fa468ec5a8f9ada366bb37cf2d7a55f7a5 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Thu, 5 May 2022 15:39:31 +0200
Subject: [PATCH] Web: Color adjustments to statuses

---
 web/app/src/assets/base.css | 82 ++++++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 33 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 866cf70f..939616de 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -37,21 +37,25 @@
   --transition-speed: 240ms;
   --transition-speed-fast: 60ms;
 
-  --color-status-active: hsl(0 50% 50%);
-  --color-status-archived: hsl(0 50% 50%);
+  --color-status-active: hsl(166 100% 46%);
+  --color-status-completed: hsl(166 100% 46%);
+
+  --color-status-archived: hsl(0 0% 25%);
   --color-status-archiving: hsl(0 50% 50%);
-  --color-status-cancel-requested: hsl(0 50% 50%);
-  --color-status-canceled: hsl(0 50% 50%);
-  --color-status-completed: hsl(0 50% 50%);
-  --color-status-construction-failed: hsl(0 50% 50%);
-  --color-status-fail-requested: hsl(0 50% 50%);
-  --color-status-failed: hsl(0 50% 50%);
-  --color-status-soft-failed: hsl(0 50% 50%);
-  --color-status-paused: hsl(0 50% 50%);
-  --color-status-queued: hsl(0 50% 50%);
-  --color-status-requeued: hsl(0 50% 50%);
-  --color-status-under-construction: hsl(0 50% 50%);
-  --color-status-waiting-for-files: hsl(0 50% 50%);
+
+  --color-status-construction-failed: hsl(356 100% 59%);
+  --color-status-fail-requested: hsl(356 100% 59%);
+  --color-status-failed: hsl(356 100% 59%);
+  --color-status-soft-failed: hsl(356 70% 40%);
+
+  --color-status-queued: hsl(194 100% 46%);
+  --color-status-requeued: hsl(194 100% 46%);
+  --color-status-canceled: hsl(194 100% 46%);
+  --color-status-paused: hsl(194 100% 46%);
+
+  --color-status-cancel-requested: hsl(194 30% 50%);
+  --color-status-under-construction: hsl(194 30% 50%);
+  --color-status-waiting-for-files: hsl(194 30% 50%);
 }
 
 html,
@@ -276,56 +280,68 @@ footer {
 }
 
 .indicator {
-  background-color: var(--color-background);
-  box-shadow: 0 0 3px black;
+  --indicator-color: var(--color-background);
+
+  background-color: var(--indicator-color);
+  border: 3px solid var(--indicator-color);
   border-radius: 50%;
   display: block;
-  height: 12px;
-  width: 12px;
+  height: 6px;
+  width: 6px;
 }
 
 .status-active {
-  background-color: hsl(86, 81%, 44%);
+  --indicator-color: var(--color-status-active);
 }
 .status-canceled {
-  background-color: hsl(0 0% 50%);
+  --indicator-color: var(--color-status-canceled);
 }
 .status-completed {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-completed);
 }
 .status-construction-failed {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-construction-failed);
 }
 .status-failed {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-failed);
 }
 .status-soft-failed {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-soft-failed);
 }
 .status-paused {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-paused);
 }
 .status-queued {
-  background-color: hsl(207, 67%, 51%);
+  --indicator-color: var(--color-status-queued);
 }
 .status-archived {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-archived);
 }
 .status-archiving {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-archiving);
 }
 .status-cancel-requested {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-cancel-requested);
 }
 .status-fail-requested {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-fail-requested);
 }
 .status-requeued {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-requeued);
 }
 .status-under-construction {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-under-construction);
 }
 .status-waiting-for-files {
-  background-color: hsl(0 50% 50%);
+  --indicator-color: var(--color-status-waiting-for-files);
+}
+
+.status-fail-requested,
+.status-archiving,
+.status-active,
+.status-queued,
+.status-waiting-for-files,
+.status-under-construction,
+.status-cancel-requested {
+  background-color: transparent;
 }