Update events editor and action components with new drawer styles

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

@@ -73,54 +73,49 @@
 </script>
 
 <DrawerContent>
-  <div class="actions-list" slot="sidebar">
+  <Layout noPadding gap="S" slot="sidebar">
-    <Layout>
+    {#if actions && actions.length > 0}
-      <ActionMenu>
+      <div
-        <Button slot="control" secondary>Add Action</Button>
+        class="actions"
-        {#each actionTypes as actionType}
+        use:dndzone={{
-          <MenuItem on:click={addAction(actionType)}>
+          items: actions,
-            {actionType.name}
+          flipDurationMs,
-          </MenuItem>
+          dropTargetStyle: { outline: "none" },
-        {/each}
+        }}
-      </ActionMenu>
+        on:consider={handleDndConsider}
-
+        on:finalize={handleDndFinalize}
-      {#if actions && actions.length > 0}
+      >
-        <div
+        {#each actions as action, index (action.id)}
-          class="action-dnd-container"
+          <div
-          use:dndzone={{
+            class="action-container"
-            items: actions,
+            animate:flip={{ duration: flipDurationMs }}
-            flipDurationMs,
+            class:selected={action === selectedAction}
-            dropTargetStyle: { outline: "none" },
+            on:click={selectAction(action)}
-          }}
+          >
-          on:consider={handleDndConsider}
+            <Icon name="DragHandle" size="XL" />
-          on:finalize={handleDndFinalize}
+            <div class="action-header">
-        >
+              {index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
-          {#each actions as action, index (action.id)}
-            <div
-              class="action-container"
-              animate:flip={{ duration: flipDurationMs }}
-            >
-              <div
-                class="action-header"
-                class:selected={action === selectedAction}
-                on:click={selectAction(action)}
-              >
-                {index + 1}.
-                {action[EVENT_TYPE_KEY]}
-              </div>
-              <div
-                on:click={() => deleteAction(index)}
-                style="margin-left: auto;"
-              >
-                <Icon size="S" hoverable name="Close" />
-              </div>
             </div>
-          {/each}
+            <Icon
-        </div>
+              name="Close"
-      {/if}
+              hoverable
-    </Layout>
+              size="S"
-  </div>
+              on:click={() => deleteAction(index)}
-  <Layout>
+            />
+          </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>
+  <Layout noPadding>
     {#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>