From 7b905667694b6ca77c74b4e8835b8689424b0762 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 1 Mar 2021 17:48:52 +0000
Subject: [PATCH] Updating the properties panel to show the component type
 rather than name (no point in repeating) and some final styling changes to
 the one to many update.

---
 .../backend/DataTable/modals/CreateEditColumn.svelte     | 9 +++++----
 .../design/PropertiesPanel/PropertiesPanel.svelte        | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 812647d1cc..b4a9283352 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -257,9 +257,9 @@
                 value={value}
                 bind:group={field.relationshipType}>
               <div class="radio-button-labels">
-                <label class="rel-type-label" for={value}>{name.split(" has ")[0]}</label>
+                <label for={value}>{name.split("has")[0]}</label>
                 <label class="rel-type-center" for={value}>has</label>
-                <label class="rel-type-label" for={value}>{name.split(" has ")[1]}</label>
+                <label for={value}>{name.split("has")[1]}</label>
               </div>
             </Radio>
           {/each}
@@ -326,8 +326,9 @@
   .rel-type-center {
     font-weight: 500;
     color: var(--grey-6);
-    margin-right: 10px;
-    margin-left: 10px;
+    margin-right: 8px;
+    margin-left: 8px;
+    padding: 1px 3px 1px 3px;
     background: var(--grey-3);
     border-radius: 2px;
   }
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 6291917cd0..39eb2752bf 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -73,8 +73,8 @@
   {categories}
   {selectedCategory} />
 
-{#if showDisplayName}
-  <div class="instance-name">{$selectedComponent._instanceName}</div>
+{#if definition && definition.name}
+  <div class="instance-name">{definition.name}</div>
 {/if}
 
 <div class="component-props-container">