From 82438ab75fb0d808d97a56f03231e0028aa10a16 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 24 Nov 2023 12:18:43 +0000
Subject: [PATCH] adjusting automatiom side panel

---
 .../AutomationPanel/AutomationPanel.svelte    | 28 +++++++++++++++----
 .../src/components/design/Panel.svelte        | 11 ++++++--
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index fc52b7323a..bb03303665 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@@ -1,20 +1,38 @@
 <script>
   import AutomationList from "./AutomationList.svelte"
   import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal, Button, Layout } from "@budibase/bbui"
+  import { Modal, Button, Layout, Icon } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
 
   export let modal
   export let webhookModal
 </script>
 
-<Panel title="Automations" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button cta on:click={modal.show}>Add automation</Button>
-  </Layout>
+<Panel title="Automations" borderRight noHeaderBorder titleCSS={false}>
+  <span class="panel-title-content" slot="panel-title-content">
+    <div class="header">
+      <div>Automations</div>
+      <div on:click={modal.show} class="spacing">
+        <Icon name="Add" />
+      </div>
+    </div>
+  </span>
   <AutomationList />
 </Panel>
 
 <Modal bind:this={modal}>
   <CreateAutomationModal {webhookModal} />
 </Modal>
+
+<style>
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
+
+  .spacing {
+    margin-left: 130px;
+  }
+</style>
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 3d5938c174..07ec354ae6 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -14,7 +14,8 @@
   export let wide = false
   export let extraWide = false
   export let closeButtonIcon = "Close"
-
+  export let noHeaderBorder = false
+  export let titleCSS = true
   $: customHeaderContent = $$slots["panel-header-content"]
   $: customTitleContent = $$slots["panel-title-content"]
 </script>
@@ -26,14 +27,14 @@
   class:borderLeft
   class:borderRight
 >
-  <div class="header" class:custom={customHeaderContent}>
+  <div class="header" class:noHeaderBorder class:custom={customHeaderContent}>
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
     {#if icon}
       <Icon name={icon} />
     {/if}
-    <div class="title">
+    <div class:title={titleCSS}>
       {#if customTitleContent}
         <slot name="panel-title-content" />
       {:else}
@@ -97,6 +98,10 @@
     border-bottom: var(--border-light);
     gap: var(--spacing-m);
   }
+
+  .noHeaderBorder {
+    border-bottom: none !important;
+  }
   .title {
     flex: 1 1 auto;
     width: 0;