Fix more sizes in settings and drawer

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,7 +1,14 @@
 <script>
   import { flip } from "svelte/animate"
   import { dndzone } from "svelte-dnd-action"
-  import { Icon, Button, Popover, Layout, DrawerContent } from "@budibase/bbui"
+  import {
+    Icon,
+    Button,
+    Layout,
+    DrawerContent,
+    ActionMenu,
+    MenuItem,
+  } from "@budibase/bbui"
   import actionTypes from "./actions"
   import { generate } from "shortid"
 
@@ -22,8 +29,6 @@
     }
   }
 
-  let addActionButton
-  let addActionDropdown
   let selectedAction = actions?.length ? actions[0] : null
 
   $: selectedActionComponent =
@@ -53,7 +58,6 @@
     }
     actions = [...actions, newAction]
     selectedAction = newAction
-    addActionDropdown.hide()
   }
 
   const selectAction = (action) => () => {
@@ -71,24 +75,14 @@
 <DrawerContent>
   <div class="actions-list" slot="sidebar">
     <Layout>
-      <div bind:this={addActionButton}>
-        <Button wide secondary on:click={addActionDropdown.show}>
-          Add Action
-        </Button>
-      </div>
-      <Popover
-        bind:this={addActionDropdown}
-        anchor={addActionButton}
-        align="right"
-      >
-        <div class="available-actions-container">
-          {#each actionTypes as actionType}
-            <div class="available-action" on:click={addAction(actionType)}>
-              <span>{actionType.name}</span>
-            </div>
-          {/each}
-        </div>
-      </Popover>
+      <ActionMenu>
+        <Button slot="control" secondary>Add Action</Button>
+        {#each actionTypes as actionType}
+          <MenuItem on:click={addAction(actionType)}>
+            {actionType.name}
+          </MenuItem>
+        {/each}
+      </ActionMenu>
 
       {#if actions && actions.length > 0}
         <div
@@ -148,7 +142,7 @@
 
   .action-header {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
     font-weight: 500;
   }
@@ -161,7 +155,7 @@
 
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     cursor: pointer;
   }
 

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<Button secondary size="S" on:click={drawer.show}>Define Actions</Button>
+<Button secondary on:click={drawer.show}>Define Actions</Button>
 <Drawer bind:this={drawer} title={'Actions'}>
   <svelte:fragment slot="description">
     Define what actions to run.

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<Button size="S" secondary wide on:click={drawer.show}>Define Filters</Button>
+<Button secondary on:click={drawer.show}>Define Filters</Button>
 <Drawer bind:this={drawer} title="Filtering">
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <DrawerContent slot="body">