styling updates

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;
   }

packages/builder/src/common/Modal.svelte

@@ -37,6 +37,7 @@ $: {
 .uk-modal-dialog {
     border-radius: .3rem;
     width: 60%;
+    height: 80vh;
 }
 
 </style>

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>
+      <header>
         <h5>Event Type</h5>
-      <Select bind:value={eventType}>
+        {@html getIcon('info')}
+      </header>
+      <Select :value={eventType}>
         {#each eventOptions as option}
           <option value={option.name}>{option.name}</option>
         {/each}

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 parameters.length > 0}
       {#if newHandler}
         <PlusButton on:click={onCreate} />
       {:else}
         <IconButton icon="x" on:click={onRemoved} />
       {/if}
+    {/if}
   </div>
 </div>