Use discrete buttons with text for adding screens and components

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
+<Panel title="Components" showExpandIcon borderRight>
-  title="Components"
+  <div class="add-component">
-  showAddButton
+    <Button on:click={() => $goto("../new")} cta>Add component</Button>
-  onClickAddButton={() => $goto("../new")}
+  </div>
-  showExpandIcon
-  borderRight
->
   <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;

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
+<Panel title="Screens" borderRight>
-  title="Screens"
-  showAddButton
-  onClickAddButton={showNewScreenModal}
-  borderRight
->
   <Layout paddingX="L" paddingY="XL" gap="S">
+    <Button on:click={showNewScreenModal} cta>Add screen</Button>
     <Search
       placeholder="Search"
       value={searchString}