final touches for design

packages/builder/src/common/ActionButton.svelte

@@ -1,12 +1,23 @@
 <script>
-  export let visible = true;
   export let disabled = false;
+  export let hidden = false;
+  export let primary = true;
+  export let alert = false;
+  export let warning = false;
 </script>
 
 <style>
-  .action-button {
+  .primary {
     color: #0055ff;
     background: rgb(54, 133, 249, 0.1);
+  }
+
+  .alert {
+    color: rgba(255, 0, 31, 1);
+    background: rgba(255, 0, 31, 0.1);;
+  }
+
+  .button {
     font-size: 18px;
     font-weight: bold;
     border-radius: 5px;
@@ -15,11 +26,11 @@
     height: 64px;
   }
 
-  .action-button:hover {
+  .button:hover {
     cursor: pointer;
   }
 
-  .action-button:disabled {
+  .button:disabled {
     color: rgba(22, 48, 87, 0.2);
     cursor: default;
     background: transparent;
@@ -30,6 +41,13 @@
   }
 </style>
 
-<button on:click class="action-button {!visible && 'hidden'}" {disabled}>
+<button
+  on:click
+  class="button"
+  class:hidden
+  class:primary
+  class:alert
+  class:warning
+  {disabled}>
   <slot />
 </button>

packages/builder/src/common/Modal.svelte

@@ -1,43 +1,44 @@
 <script>
-import UIkit from "uikit";
+  import UIkit from "uikit";
 
-export let isOpen = false;
+  export let isOpen = false;
-export let onClosed = () => {};
+  export let onClosed = () => {};
-export let id = "";
+  export let id = "";
 
-let ukModal;
+  let ukModal;
-let listenerAdded = false;
+  let listenerAdded = false;
 
-$: {
+  $: {
-    if(ukModal && !listenerAdded) {
+    if (ukModal && !listenerAdded) {
-        listenerAdded = true;
+      listenerAdded = true;
-        ukModal.addEventListener("hidden", onClosed);
+      ukModal.addEventListener("hidden", onClosed);
     }
 
-    if(ukModal) {
+    if (ukModal) {
-        if(isOpen) {
+      if (isOpen) {
-            UIkit.modal(ukModal).show();
+        UIkit.modal(ukModal).show();
-        } else {
+      } else {
-            UIkit.modal(ukModal).hide();
+        UIkit.modal(ukModal).hide();
-        }
+      }
     }
-}
+  }
-
 </script>
 
-<div bind:this={ukModal} uk-modal {id}>
-    <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
-        <slot />
-    </div>
-</div>
-
-
 <style>
-
+  .uk-modal-dialog {
-.uk-modal-dialog {
+    border-radius: 0.3rem;
-    border-radius: .3rem;
     width: 60%;
     height: 80vh;
-}
+    display: flex;
+    flex-direction: column;
+  }
+</style>
 
-</style>
+<div bind:this={ukModal} uk-modal {id}>
+  <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
+    {#if onClosed}
+      <button class="uk-modal-close-default" type="button" uk-close />
+    {/if}
+    <slot />
+  </div>
+</div>

packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte

@@ -17,21 +17,22 @@
   export let onPropChanged;
 
   let eventType = "onClick";
-  let newEventHandler = { parameters: [] };
+  let draftEventHandler = { parameters: [] };
 
   $: eventData = event || { handlers: [] };
 
-  const resetModalState = () => {
+  const closeModal = () => {
-    newEventHandler = { parameters: [] };
+    onClose();
+    draftEventHandler = { parameters: [] };
     eventData = { handlers: [] };
   };
 
-  const changeEventHandler = (updatedHandler, index) => {
+  const updateEventHandler = (updatedHandler, index) => {
     eventData.handlers[index] = updatedHandler;
   };
 
-  const changeNewEventHandler = updatedHandler => {
+  const updateDraftEventHandler = updatedHandler => {
-    newEventHandler = updatedHandler;
+    draftEventHandler = updatedHandler;
   };
 
   const deleteEventHandler = index => {
@@ -50,14 +51,12 @@
 
   const deleteEvent = () => {
     onPropChanged(eventType, []);
-    resetModalState();
+    closeModal();
-    onClose();
   };
 
   const saveEventData = () => {
     onPropChanged(eventType, eventData.handlers);
-    resetModalState();
+    closeModal();
-    onClose();
   };
 </script>
 
@@ -72,8 +71,7 @@
   h5 {
     color: rgba(22, 48, 87, 0.6);
     font-size: 15px;
-    margin-bottom: 5px;
+    margin: 0;
-    margin-top: 20px;
   }
 
   .event-options {
@@ -82,12 +80,22 @@
     grid-gap: 10px;
   }
 
-  .actions, header {
+  .actions,
+  header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
+  .actions {
+    margin-top: auto;
+  }
+
+  header {
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
+
   a {
     color: rgba(22, 48, 87, 0.6);
     font-size: 12px;
@@ -95,15 +103,19 @@
   }
 </style>
 
-<Modal bind:isOpen={open} onClosed={onClose}>
+<Modal bind:isOpen={open} onClosed={closeModal}>
-  <h2>{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}</h2>
+  <h2>
-  <a href="https://docs.budibase.com/" target="_blank" >Click here to learn more about component events</a>
+    {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
+  </h2>
+  <a href="https://docs.budibase.com/" target="_blank">
+    Click here to learn more about component events
+  </a>
 
   <div class="event-options">
     <div>
       <header>
         <h5>Event Type</h5>
-        {@html getIcon('info')}
+        {@html getIcon('info', 20)}
       </header>
       <Select :value={eventType}>
         {#each eventOptions as option}
@@ -113,20 +125,23 @@
     </div>
   </div>
 
-  <h5>Event Action(s)</h5>
+  <header>
+    <h5>Event Action(s)</h5>
+    {@html getIcon('info', 20)}
+  </header>
   <HandlerSelector
     newHandler
-    onChanged={changeNewEventHandler}
+    onChanged={updateDraftEventHandler}
     onCreate={() => {
-      createNewEventHandler(newEventHandler);
+      createNewEventHandler(draftEventHandler);
-      newEventHandler = { parameters: [] };
+      draftEventHandler = { parameters: [] };
     }}
-    handler={newEventHandler} />
+    handler={draftEventHandler} />
   {#if eventData}
     {#each eventData.handlers as handler, index}
       <HandlerSelector
         {index}
-        onChanged={changeEventHandler}
+        onChanged={updateEventHandler}
         onRemoved={() => deleteEventHandler(index)}
         {handler} />
     {/each}
@@ -134,8 +149,9 @@
 
   <div class="actions">
     <ActionButton
+      alert
       disabled={eventData.handlers.length === 0}
-      visible={eventData.name}
+      hidden={!eventData.name}
       on:click={deleteEvent}>
       Delete
     </ActionButton>

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -75,7 +75,7 @@
     flex-wrap: wrap;
   }
 
-  .heading {
+  header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -124,10 +124,10 @@
   }
 </style>
 
-<div class="heading">
+<header>
   <h3>Events</h3>
   <PlusButton on:click={() => openModal()} />
-</div>
+</header>
 
 <div class="root">
   <form class="uk-form-stacked form-root">