From d6e4ae5600803b79a83c396b1d560ba124d11306 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 25 Aug 2020 11:40:48 +0200
Subject: [PATCH] fix styling issues

---
 .../userInterface/BindingDropdown.svelte      | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index 17bd731a33..e4495c5594 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -15,10 +15,11 @@
 
 <div class="container">
   <div class="text">
+
     <TextArea
       bind:value
-      placeholder="Enter your name"
-      label="Construct your text" />
+      placeholder=""
+      label="Select bindable properties from the right." />
   </div>
   <div class="list">
     <ul>
@@ -31,12 +32,11 @@
 
 <style>
   .container {
-    grid-gap: 20px;
-    padding: 20px;
     display: grid;
     grid-template-columns: auto auto;
   }
   .text {
+    padding: var(--spacing-s) 0 var(--spacing-s) var(--spacing-s);
     width: 600px;
     display: grid;
   }
@@ -47,8 +47,9 @@
     list-style: none;
     padding-left: 0;
     margin: 0;
-    padding: var(--spacing-s) 0;
+    padding: 0;
   }
+
   li {
     display: flex;
     font-family: var(--font-sans);
@@ -59,4 +60,12 @@
     align-items: center;
     cursor: pointer;
   }
+
+  li:hover {
+    background-color: var(--grey-2);
+  }
+
+  li:active {
+    color: var(--blue);
+  }
 </style>