From 73b961f5fac54a9a756df798c2364c526fceb75d Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 7 Apr 2024 19:38:23 -0500
Subject: [PATCH] colors

---
 .../workflow-page/workflow-editor.svelte      | 43 +++++++++++++------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/workflow-page/workflow-editor.svelte b/web/src/lib/components/workflow-page/workflow-editor.svelte
index 8eeeaca690..90c070d181 100644
--- a/web/src/lib/components/workflow-page/workflow-editor.svelte
+++ b/web/src/lib/components/workflow-page/workflow-editor.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiPlus } from '@mdi/js';
 </script>
 
-<section class="h-full dark:bg-zinc-900">
+<section class="h-full">
   <div id="workflow-control-bar" class="m-4 flex justify-between place-items-center gap-2">
     <div>
       <p class="uppercase text-lg dark:text-white">
@@ -28,37 +30,52 @@
       <div class="flex flex-col place-items-center z-10">
         <div class="rounded-full border-[6px] border-green-800 h-[20px] w-[20px] bg-white translate-y-1"></div>
         <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-green-800 via-purple-800 to-indigo-900"></div>
-        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+        <div class="rounded-full border-[6px] border-indigo-900 h-[20px] w-[20px] bg-white -translate-y-1"></div>
       </div>
     </div>
 
     <div id="condition-blocks" class="-translate-y-3">
-      <div class="bg-indigo-800 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4">
+      <div class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4">
         And has Alex and Henry and Nate
       </div>
 
       <div
-        class="bg-indigo-800 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+        class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
       >
         And from Nurnberg, Germany
       </div>
-    </div>
 
-    <div class="w-full flex place-items-center place-content-center">
-      <div class="flex flex-col place-items-center z-10">
-        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white translate-y-1"></div>
-        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-indigo-800 via-purple-800 to-indigo-900"></div>
-        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+      <div
+        class="border-2 border-indigo-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
+        <span><Icon path={mdiPlus} /></span> ADD RULE
       </div>
     </div>
 
-    <div id="action-blocks">
-      <div class="w-full bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center">
+    <div class="w-full flex place-items-center place-content-center -translate-y-6">
+      <div class="flex flex-col place-items-center z-10">
+        <div class="rounded-full border-[6px] border-indigo-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
+        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-indigo-900 via-indigo-800 to-gray-700"></div>
+        <div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+      </div>
+    </div>
+
+    <div id="action-blocks" class="-translate-y-11">
+      <div
+        class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
         Add to Album
       </div>
-      <div class="w-full bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center">
+      <div
+        class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
         Send webhook to abc.com with payload 123
       </div>
+      <div
+        class="border-2 border-gray-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
+        <span><Icon path={mdiPlus} /></span> ADD ACTION
+      </div>
     </div>
   </div>
 </section>