Update workflow status colors (#2132)

* Update running color * Update scheduled color * Update completed and open color * Update new and initiated color
temporalio · Jun 4, 2024 · 9081147 · 9081147
1 parent 1f3a3a7
commit 9081147
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
@@ -454,8 +454,8 @@
       .vis-item.vis-range.Started,
       .vis-item.vis-range.Initiated
     ) {
-    background-color: #8098f9;
-    border-color: #2f34a4;
+    background-color: #93bbfd;
+    border-color: #1d4ed8;
     border-radius: 9999px;
     border-width: 2px;
     color: #000;
@@ -468,7 +468,7 @@
       .vis-item.vis-point.Started,
       .vis-item.vis-point.Initiated
     ) {
-    color: #2f34a4;
+    color: #1d4ed8;
   }
 
   :global(.vis-item.vis-range.workflow.Running) {

diff --git a/src/lib/components/heart-beat-indicator.svelte b/src/lib/components/heart-beat-indicator.svelte
@@ -40,7 +40,7 @@
 
 <style lang="postcss">
   .heart-beat {
-    @apply relative flex items-center justify-center bg-indigo-400 text-center;
+    @apply relative flex items-center justify-center bg-blue-300 text-center;
   }
 
   .heart-rate {
@@ -52,7 +52,7 @@
   }
 
   .fade-in {
-    @apply absolute right-0 top-0 h-full w-full bg-indigo-400;
+    @apply absolute right-0 top-0 h-full w-full bg-blue-300;
 
     animation: heartRateIn 2s linear infinite;
     animation-delay: var(--animation-delay, 0);
@@ -65,35 +65,35 @@
     left: 0;
     animation: heartRateOut 2s linear infinite;
     animation-delay: var(--animation-delay, 0);
-    background: rgb(128 152 249);
+    background: rgb(147 187 253);
     background: linear-gradient(
       to left,
-      rgb(128 152 249) 0%,
-      rgb(128 152 249) 50%,
+      hsl(228deg 91% 74%) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(128 152 249) 0%,
-      rgb(128 152 249) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(128 152 249) 0%,
-      rgb(128 152 249) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to left,
-      rgb(128 152 249) 0%,
-      rgb(128 152 249) 50%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 50%,
       rgb(255 255 255 / 0%) 100%
     );
     background: linear-gradient(
       to right,
-      rgb(128 152 249) 0%,
-      rgb(128 152 249) 80%,
+      rgb(147 187 253) 0%,
+      rgb(147 187 253) 80%,
       rgb(255 255 255 / 0%) 100%
     );
   }

diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
@@ -48,20 +48,20 @@
     {
       variants: {
         status: {
-          Running: 'bg-indigo-400',
+          Running: 'bg-blue-300',
           TimedOut: 'bg-orange-300',
-          Completed: 'bg-green-300',
+          Completed: 'bg-[#71D375]',
           Failed: 'bg-red-300',
           ContinuedAsNew: 'bg-purple-300',
           Canceled: 'bg-slate-100',
           Terminated: 'bg-yellow-300',
           Paused: 'bg-yellow-200',
           Unspecified: 'bg-slate-100',
-          Scheduled: 'bg-indigo-400',
+          Scheduled: 'bg-indigo-300',
           Started: 'bg-blue-300',
-          Open: 'bg-green-300',
-          New: 'bg-indigo-400',
-          Initiated: 'bg-indigo-400',
+          Open: 'bg-[#71D375]',
+          New: 'bg-blue-300',
+          Initiated: 'bg-blue-300',
           Fired: 'bg-pink-300',
           CancelRequested: 'bg-yellow-300',
           Signaled: 'bg-pink-200',