From ef83fe50d81b10620dad55b31941ba0f679231e6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 22 Jul 2022 12:10:53 +0100
Subject: [PATCH] Use discrete buttons with text for adding screens and
 components

---
 .../navigation/ComponentListPanel.svelte      | 19 ++++++++++++-------
 .../_components/ScreenListPanel.svelte        | 10 +++-------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
index 5b86d4da29..513048caf1 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@@ -9,6 +9,7 @@
   import { setContext } from "svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
+  import { Button, Layout } from "@budibase/bbui"
 
   let scrollRef
 
@@ -61,13 +62,10 @@
   })
 </script>
 
-<Panel
-  title="Components"
-  showAddButton
-  onClickAddButton={() => $goto("../new")}
-  showExpandIcon
-  borderRight
->
+<Panel title="Components" showExpandIcon borderRight>
+  <div class="add-component">
+    <Button on:click={() => $goto("../new")} cta>Add component</Button>
+  </div>
   <div class="nav-items-container" bind:this={scrollRef}>
     <ul>
       <li
@@ -110,6 +108,13 @@
 </Panel>
 
 <style>
+  .add-component {
+    padding: var(--spacing-xl) var(--spacing-l);
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
   .nav-items-container {
     padding: var(--spacing-xl) 0;
     flex: 1 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index ecb020b104..27345cc429 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Search, Layout, Select, Body } from "@budibase/bbui"
+  import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
   import { roles } from "stores/backend"
   import { store, sortedScreens } from "builderStore"
@@ -28,13 +28,9 @@
   }
 </script>
 
-<Panel
-  title="Screens"
-  showAddButton
-  onClickAddButton={showNewScreenModal}
-  borderRight
->
+<Panel title="Screens" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
+    <Button on:click={showNewScreenModal} cta>Add screen</Button>
     <Search
       placeholder="Search"
       value={searchString}