Update events editor and action components with new drawer styles

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

@@ -73,20 +73,10 @@
 </script>
 
 <DrawerContent>
-  <div class="actions-list" slot="sidebar">
+  <Layout noPadding gap="S" slot="sidebar">
-    <Layout>
-      <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
-          class="action-dnd-container"
+        class="actions"
         use:dndzone={{
           items: actions,
           flipDurationMs,
@@ -99,28 +89,33 @@
           <div
             class="action-container"
             animate:flip={{ duration: flipDurationMs }}
-            >
-              <div
-                class="action-header"
             class:selected={action === selectedAction}
             on:click={selectAction(action)}
           >
-                {index + 1}.
+            <Icon name="DragHandle" size="XL" />
-                {action[EVENT_TYPE_KEY]}
+            <div class="action-header">
+              {index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
             </div>
-              <div
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
               on:click={() => deleteAction(index)}
-                style="margin-left: auto;"
+            />
-              >
-                <Icon size="S" hoverable name="Close" />
-              </div>
           </div>
         {/each}
       </div>
     {/if}
+    <ActionMenu>
+      <Button slot="control" secondary>Add Action</Button>
+      {#each actionTypes as actionType}
+        <MenuItem on:click={addAction(actionType)}>
+          {actionType.name}
+        </MenuItem>
+      {/each}
+    </ActionMenu>
   </Layout>
-  </div>
+  <Layout noPadding>
-  <Layout>
     {#if selectedAction}
       <div class="selected-action-container">
         <svelte:component
@@ -133,32 +128,41 @@
 </DrawerContent>
 
 <style>
-  .action-header {
+  .actions {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
-    align-items: center;
+    justify-content: flex-start;
-    margin-top: var(--spacing-s);
+    align-items: stretch;
+    gap: var(--spacing-s);
   }
 
   .action-header {
-    margin-bottom: var(--spacing-m);
+    color: var(--spectrum-global-color-gray-700);
-    font-size: var(--font-size-s);
-    color: var(--grey-7);
-    font-weight: 600;
-  }
 
-  .action-header:hover,
+    flex: 1 1 auto;
-  .action-header.selected {
-    cursor: pointer;
-    color: var(--ink);
   }
 
   .action-container {
-    border-bottom: 1px solid var(--grey-1);
+    background-color: var(--background);
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: 4px;
+    border: var(--border-light);
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
+    gap: var(--spacing-m);
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     align-items: center;
   }
-  .action-container:last-child {
+  .action-container:hover,
-    border-bottom: none;
+  .action-container.selected {
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-global-color-gray-500);
+    cursor: pointer;
+  }
+  .action-container:hover .action-header,
+  .action-container.selected .action-header {
+    color: var(--spectrum-global-color-gray-900);
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<Layout gap="XS">
+<Layout gap="XS" noPadding>
   <Select
     label="Datasource"
     bind:value={parameters.datasourceId}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte

@@ -41,7 +41,7 @@
 
 <DrawerContent>
   <div class="container">
-    <Layout noPadding>
+    <Layout noPadding gap="S">
       {#if links?.length}
         <div
           class="links"
@@ -72,7 +72,7 @@
           {/each}
         </div>
       {/if}
-      <div class="button-container">
+      <div>
         <Button secondary icon="Add" on:click={addLink}>Add Link</Button>
       </div>
     </Layout>
@@ -90,9 +90,9 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    gap: var(--spacing-s);
   }
   .link {
-    padding: 4px 8px;
     gap: var(--spacing-l);
     display: flex;
     flex-direction: row;
@@ -108,7 +108,4 @@
     flex: 1 1 auto;
     width: 0;
   }
-  .button-container {
-    margin-left: var(--spacing-l);
-  }
 </style>