From 2f559c3867230fa2bb40228d3f7008829c0f4777 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 20 Jul 2021 14:34:27 +0100
Subject: [PATCH] Update events editor and action components with new drawer
 styles

---
 .../EventsEditor/EventEditor.svelte           | 130 +++++++++---------
 .../EventsEditor/actions/ExecuteQuery.svelte  |   2 +-
 .../NavigationEditor/NavigationDrawer.svelte  |   9 +-
 3 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 843f33cab9..444aab5fe9 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -73,54 +73,49 @@
 </script>
 
 <DrawerContent>
-  <div class="actions-list" 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"
-          use:dndzone={{
-            items: actions,
-            flipDurationMs,
-            dropTargetStyle: { outline: "none" },
-          }}
-          on:consider={handleDndConsider}
-          on:finalize={handleDndFinalize}
-        >
-          {#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>
+  <Layout noPadding gap="S" slot="sidebar">
+    {#if actions && actions.length > 0}
+      <div
+        class="actions"
+        use:dndzone={{
+          items: actions,
+          flipDurationMs,
+          dropTargetStyle: { outline: "none" },
+        }}
+        on:consider={handleDndConsider}
+        on:finalize={handleDndFinalize}
+      >
+        {#each actions as action, index (action.id)}
+          <div
+            class="action-container"
+            animate:flip={{ duration: flipDurationMs }}
+            class:selected={action === selectedAction}
+            on:click={selectAction(action)}
+          >
+            <Icon name="DragHandle" size="XL" />
+            <div class="action-header">
+              {index + 1}.&nbsp;{action[EVENT_TYPE_KEY]}
             </div>
-          {/each}
-        </div>
-      {/if}
-    </Layout>
-  </div>
-  <Layout>
+            <Icon
+              name="Close"
+              hoverable
+              size="S"
+              on:click={() => deleteAction(index)}
+            />
+          </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;
-    align-items: center;
-    margin-top: var(--spacing-s);
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
   }
 
   .action-header {
-    margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-s);
-    color: var(--grey-7);
-    font-weight: 600;
-  }
+    color: var(--spectrum-global-color-gray-700);
 
-  .action-header:hover,
-  .action-header.selected {
-    cursor: pointer;
-    color: var(--ink);
+    flex: 1 1 auto;
   }
 
   .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 {
-    border-bottom: none;
+  .action-container:hover,
+  .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>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
index 5d298e4b9f..d4e70dac05 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/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}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
index 9118223e5d..1cf6240572 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NavigationEditor/NavigationDrawer.svelte
+++ b/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>