From 199938e4f7a51e51731e9d8668d5741b990fb8be Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 19 May 2022 20:11:04 +0100
Subject: [PATCH] Update new component DND to use proper styles

---
 .../_components/navigation/ComponentTree.svelte          | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index d7e6500dd1..1ec961de15 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -182,24 +182,23 @@
 
   .drop-item {
     height: 2px;
-    background: green;
+    background: var(--spectrum-global-color-static-green-500);
     z-index: 999;
     position: absolute;
     top: calc(var(--indicatorY) - 1px);
     left: var(--indicatorX);
     width: 100px;
+      border-radius: 4px;
   }
   .drop-item.above {
-    background: red;
   }
   .drop-item.below {
-    background: blue;
     margin-top: 32px;
   }
   .drop-item.inside {
     background: transparent;
-    border: 2px solid green;
-    height: 32px;
+    border: 2px solid var(--spectrum-global-color-static-green-500);
+    height: 29px;
     pointer-events: none;
   }
 </style>