From ef74a2fe989e812562d50801df88816d4ad7787e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 16 Apr 2021 11:28:53 +0200
Subject: [PATCH] Component panel now uses Tabs component

---
 .../FrontendNavigatePane.svelte               |  1 -
 .../PropertiesPanel/PropertiesPanel.svelte    | 46 +++++++++----------
 .../design/[assetType]/_layout.svelte         |  2 -
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 6f4872dec4..5bf448ec3d 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -27,7 +27,6 @@
   ]
 
   let modal
-  let routes = {}
   $: selected = tabs.find(t => t.key === $params.assetType).title
 
   const navigate = ({detail}) => {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
index 38f6b521fa..26e898c8d0 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@@ -1,6 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { store, selectedComponent, currentAsset } from "builderStore"
+  import { Tabs, Tab } from '@budibase/bbui'
   import { FrontendTypes } from "constants"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
@@ -44,47 +45,46 @@
   }
 </script>
 
-<CategoryTab
-  onClick={category => (selectedCategory = category)}
-  {categories}
-  {selectedCategory} />
-
-{#if definition && definition.name}
-  <div class="instance-name">{definition.name}</div>
-{/if}
-
-<div class="component-props-container">
-  {#if selectedCategory.value === 'design'}
-    <DesignView
+<Tabs selected="Settings">
+  <Tab title="Settings">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <DesignView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
       {onStyleChanged}
       {onCustomStyleChanged}
       {onUpdateTransition}
       {onResetStyles} />
-  {:else if selectedCategory.value === 'settings'}
-    <SettingsView
+    </div>
+  </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <SettingsView
       componentInstance={$selectedComponent}
       componentDefinition={definition}
       {showDisplayName}
       onChange={store.actions.components.updateProp}
       onScreenPropChange={setAssetProps}
       assetInstance={$store.currentView !== 'component' && $currentAsset} />
-  {/if}
-</div>
+    </div>
+  </Tab>
+</Tabs>
 
 <style>
-  .component-props-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 20px;
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
   }
 
   .instance-name {
     font-size: var(--font-size-xs);
+    margin-bottom: var(--spacing-l);
     font-weight: 500;
     color: var(--grey-7);
   }
diff --git a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
index 2852101a2c..7204f6afb1 100644
--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@@ -206,8 +206,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl);
     border-left: var(--border-light);
   }
 </style>