From 96c61a5a7d8ce051d92facb29ec448ea81cfe7b8 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 30 Jan 2020 21:00:19 +0000
Subject: [PATCH] styling updates

---
 .../builder/src/common/ActionButton.svelte    |  2 +-
 packages/builder/src/common/Modal.svelte      |  1 +
 .../EventsEditor/EventEditorModal.svelte      | 20 +++++++++++-------
 .../EventsEditor/HandlerSelector.svelte       | 21 +++++++++----------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
index 092123b47c..dd00966c49 100644
--- a/packages/builder/src/common/ActionButton.svelte
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -20,7 +20,7 @@
   }
 
   .action-button:disabled {
-    color: #163057;
+    color: rgba(22, 48, 87, 0.2);
     cursor: default;
     background: transparent;
   }
diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index 3e716f5c9a..19db3b064e 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -37,6 +37,7 @@ $: {
 .uk-modal-dialog {
     border-radius: .3rem;
     width: 60%;
+    height: 80vh;
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 9e93be7a60..5c288084e6 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -6,6 +6,7 @@
   import PlusButton from "../../common/PlusButton.svelte";
   import Select from "../../common/Select.svelte";
   import Input from "../../common/Input.svelte";
+  import getIcon from "../../common/icon";
 
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
 
@@ -70,8 +71,9 @@
 
   h5 {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 16px;
+    font-size: 15px;
     margin-bottom: 5px;
+    margin-top: 20px;
   }
 
   .event-options {
@@ -80,12 +82,13 @@
     grid-gap: 10px;
   }
 
-  .actions {
+  .actions, header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
-  p {
+  a {
     color: rgba(22, 48, 87, 0.6);
     font-size: 12px;
     margin-top: 0;
@@ -93,13 +96,16 @@
 </style>
 
 <Modal bind:isOpen={open} onClosed={onClose}>
-  <h2>{eventData.name || 'Create a New Component Event'}</h2>
-  <p>Click here to learn more about component events</p>
+  <h2>{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>
-      <h5>Event Type</h5>
-      <Select bind:value={eventType}>
+      <header>
+        <h5>Event Type</h5>
+        {@html getIcon('info')}
+      </header>
+      <Select :value={eventType}>
         {#each eventOptions as option}
           <option value={option.name}>{option.name}</option>
         {/each}
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
index d3ec42557e..e22a992fe7 100644
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -31,7 +31,6 @@
     })
   );
 
-  // TODO: refactor
   $: {
     if (handler) {
       handlerType = handler[EVENT_TYPE_MEMBER_NAME];
@@ -40,6 +39,7 @@
         value
       }));
     } else {
+      // Empty Handler 
       handlerType = "";
       parameters = [];
     }
@@ -63,11 +63,11 @@
     const handlerType = eventOptions.find(
       handler => handler.name === e.target.value
     );
-    // Set default params for handler
     const defaultParams = handlerType.parameters.map(param => ({
       name: param,
       value: ""
     }));
+
     handlerChanged(handlerType.name, defaultParams);
   };
 
@@ -93,10 +93,6 @@
     flex-direction: column;
   }
 
-  .handler-option > div {
-    margin-bottom: 5px;
-  }
-
   .new-handler {
     background: #fff;
   }
@@ -113,6 +109,7 @@
   }
 
   span {
+    font-size: 12px;
     margin-bottom: 5px;
   }
 </style>
@@ -131,7 +128,7 @@
     {#if parameters}
       {#each parameters as param, idx}
         <div class="handler-option">
-          <div>{param.name}</div>
+          <span>{param.name}</span>
           <StateBindingControl
             onChanged={onParameterChanged(idx)}
             value={param.value} />
@@ -140,10 +137,12 @@
     {/if}
   </div>
   <div class="event-action-button">
-    {#if newHandler}
-      <PlusButton on:click={onCreate} />
-    {:else}
-      <IconButton icon="x" on:click={onRemoved} />
+    {#if parameters.length > 0}
+      {#if newHandler}
+        <PlusButton on:click={onCreate} />
+      {:else}
+        <IconButton icon="x" on:click={onRemoved} />
+      {/if}
     {/if}
   </div>
 </div>