From c65f5cf56e80cfa5813a17c32841525165f08b0f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 8 Feb 2024 20:16:03 +0100
Subject: [PATCH] chore(docs): cleanup styles

---
 docs/examples/layout/AnimationEdge.vue |  3 ++-
 docs/examples/layout/ProcessNode.vue   | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/examples/layout/AnimationEdge.vue b/docs/examples/layout/AnimationEdge.vue
index 3c15e22e..715ff9fb 100644
--- a/docs/examples/layout/AnimationEdge.vue
+++ b/docs/examples/layout/AnimationEdge.vue
@@ -70,7 +70,7 @@ const edgeColor = toRef(() => {
   }
 
   if (targetNodeData.value.isFinished) {
-    return '#10b981'
+    return '#42B983'
   }
 
   if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
@@ -195,6 +195,7 @@ export default {
 <style>
 .animated-edge-label {
   position: absolute;
+  z-index: 100;
 }
 
 .truck {
diff --git a/docs/examples/layout/ProcessNode.vue b/docs/examples/layout/ProcessNode.vue
index 46522446..32050947 100644
--- a/docs/examples/layout/ProcessNode.vue
+++ b/docs/examples/layout/ProcessNode.vue
@@ -29,7 +29,7 @@ const isReceiver = toRef(() => targetConnections.value.length <= 0)
 
 const bgColor = toRef(() => {
   if (isSender.value) {
-    return '#4b5563'
+    return '#2563eb'
   }
 
   if (props.data.hasError) {
@@ -37,7 +37,7 @@ const bgColor = toRef(() => {
   }
 
   if (props.data.isFinished) {
-    return '#10b981'
+    return '#42B983'
   }
 
   if (props.data.isCancelled) {
@@ -73,8 +73,10 @@ const processLabel = toRef(() => {
 </script>
 
 <template>
-  <div class="process-node" :style="{ backgroundColor: bgColor }">
-    <Handle v-if="!isSender" type="target" :position="targetPosition" />
+  <div class="process-node" :style="{ backgroundColor: bgColor, boxShadow: data.isRunning ? '0 0 10px rgba(0, 0, 0, 0.5)' : '' }">
+    <Handle v-if="!isSender" type="target" :position="targetPosition">
+      <span v-if="!data.isRunning && !data.isFinished && !data.isCancelled && !data.isSkipped && !data.hasError">📥 </span>
+    </Handle>
     <Handle v-if="!isReceiver" type="source" :position="sourcePosition" />
 
     <div v-if="!isSender && data.isRunning" class="spinner" />
@@ -87,7 +89,6 @@ const processLabel = toRef(() => {
 <style scoped>
 .process-node {
   padding: 10px;
-  color: white;
   border-radius: 99px;
   width: 24px;
   height: 24px;