From 47a014789f01b3d3aad00195c70b7fcd1e6cf345 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 5 Feb 2025 10:23:07 +0100
Subject: [PATCH] Change the errors button to an icon

---
 packages/bbui/src/Divider/Divider.svelte      |  4 +-
 .../[screenId]/_components/AppPanel.svelte    |  5 ++-
 .../_components/ScreenErrorsButton.svelte     | 37 +------------------
 3 files changed, 6 insertions(+), 40 deletions(-)

diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte
index f6837ca97c..5373b1fa16 100644
--- a/packages/bbui/src/Divider/Divider.svelte
+++ b/packages/bbui/src/Divider/Divider.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/divider/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
 
   export let vertical = false
   export let noMargin = false
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 120d9eeeeb..9dd7aab640 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -4,6 +4,7 @@
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
   import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
+  import { Divider } from "@budibase/bbui"
 </script>
 
 <div class="app-panel">
@@ -16,7 +17,7 @@
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
-
+      <Divider vertical />
       <ScreenErrorsButton />
     </div>
   </div>
@@ -65,7 +66,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-l);
   }
   .content {
     flex: 1 1 auto;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
index f97d0ec062..85f6aaf13d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenErrorsButton.svelte
@@ -37,16 +37,7 @@
 </script>
 
 <div bind:this={button} class="error-button">
-  <ActionButton selected quiet on:click={() => popover.show()} size="M">
-    <div class="content">
-      Errors
-      {#if $screenComponentErrorList.length}
-        <div class="badge">
-          {$screenComponentErrorList.length}
-        </div>
-      {/if}
-    </div>
-  </ActionButton>
+  <ActionButton quiet on:click={() => popover.show()} size="M" icon="Alert" />
 </div>
 <Popover
   bind:this={popover}
@@ -75,32 +66,6 @@
 </Popover>
 
 <style>
-  .error-button :global(.spectrum-ActionButton) {
-    border-radius: 16px;
-    right: -4px;
-  }
-
-  .error-button .content {
-    min-width: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    padding-left: var(--spacing-xs);
-    padding-right: var(--spacing-xs);
-    font-weight: 600;
-  }
-  .error-button .badge {
-    color: var(--spectrum-global-color-static-white);
-    background-color: var(--spectrum-global-color-static-red-700);
-    height: 18px;
-    width: 18px;
-    border-radius: 50%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
   .error-popover {
     display: flex;
     flex-direction: column;