Tweaks to component snippet editor.

packages/builder/src/userInterface/CodeEditor.svelte

@@ -30,7 +30,7 @@
 <p>Use the code box below to add snippets of javascript to enhance your webapp</p>
 
 <div class="editor">
-  <textarea bind:value={snippet_text} />
+  <textarea class="code" bind:value={snippet_text} />
   <button on:click={save_snippet}>Save</button>
 </div>
 
@@ -38,7 +38,7 @@
   <h3>Snippets added</h3>
   {#each snippets as { id, snippet } }
   <div class="snippet">
-    <pre>{snippet}</pre>
+    <pre class="code">{snippet}</pre>
     <button on:click={() => edit_snippet(id)}>Edit</button>
   </div>
   {/each}
@@ -63,10 +63,9 @@
     position: relative;
   }
 
-  .editor textarea {
+  .code {
     width: 100%;
     outline: none;
-    height: 150px;
     border: none;
     background: #173157;
     border-radius: 5px;
@@ -75,10 +74,14 @@
     color: #eee;
     padding: 10px;
     font-family: monospace;
-    resize: none;
     overflow-y: scroll;
   }
 
+  .editor textarea {
+    resize: none;
+    height: 150px;
+  }
+
   button {
     position: absolute;
     box-shadow: 0 0 black;
@@ -104,20 +107,9 @@
   }
 
   .snippet pre {
-    width: 100%;
-    outline: none;
-    max-height: 150px;
-    border: none;
     background: #f9f9f9;
-    border-radius: 5px;
-    box-sizing: border-box;
-    white-space: pre;
     color: #333;
-    padding: 10px;
-    font-family: monospace;
-    resize: none;
-    overflow-y: scroll;
-    margin: 10px;
+    max-height: 150px;
   }
 
   .snippet button {

packages/builder/src/userInterface/ComponentsList.svelte

@@ -26,11 +26,11 @@ const addRootComponent = (c, all) => {
     }
 
     group.components.push(c)
-    
+
 };
 
 const onComponentChosen = (component) => {
-    
+
 };
 
 store.subscribe(s => {
@@ -39,17 +39,13 @@ store.subscribe(s => {
 
     for(let comp of sortBy(["name"])(s.components)) {
         addRootComponent(
-            comp, 
+            comp,
             newComponentLibraries);
     }
 
     componentLibraries = newComponentLibraries;
 });
 
-
-
-
-
 </script>
 
 <div class="root">
@@ -60,7 +56,7 @@ store.subscribe(s => {
 
     <div class="library-container">
 
-    
+
         <div class="inner-header">
             Components
         </div>

packages/builder/src/userInterface/NewComponent.svelte

@@ -11,7 +11,7 @@ import UIkit from "uikit";
 import { isRootComponent } from "./pagesParsing/searchComponents";
 import { splitName } from "./pagesParsing/splitRootComponentName.js"
 
-import { 
+import {
     find, filter, some, map, includes
 } from "lodash/fp";
 import { assign } from "lodash";
@@ -29,13 +29,13 @@ let name="";
 let saveAttempted=false;
 
 store.subscribe(s => {
-
+    console.log(s)
     layoutComponents = pipe(s.components, [
         filter(c => c.container),
         map(c => ({name:c.name, ...splitName(c.name)}))
     ]);
 
-    layoutComponent = layoutComponent 
+    layoutComponent = layoutComponent
                       ? find(c => c.name === layoutComponent.name)(layoutComponents)
                       : layoutComponents[0];
 
@@ -48,7 +48,7 @@ const save = () => {
     const isValid = name.length > 0
                     && !screenNameExists(name)
                     && layoutComponent;
-                    
+
     if(!isValid) return;
 
     store.createScreen(name, layoutComponent.name);
@@ -59,7 +59,7 @@ const cancel = () => {
     UIkit.modal(componentSelectorModal).hide();
 }
 
-const screenNameExists = (name) => 
+const screenNameExists = (name) =>
     some(s => s.name.toLowerCase() === name.toLowerCase())(screens)
 
 </script>
@@ -84,7 +84,7 @@ const screenNameExists = (name) =>
             <div class="uk-margin">
                 <label class="uk-form-label">Layout Component</label>
                 <div class="uk-form-controls">
-                    <select class="uk-select uk-form-small" 
+                    <select class="uk-select uk-form-small"
                             bind:value={layoutComponent}
                             class:uk-form-danger={saveAttempted && !layoutComponent}>
                         {#each layoutComponents as comp}
@@ -130,4 +130,4 @@ h1 {
     font-size: 9pt;
 }
 
-</style>
+</style>