Begin implementation of components panel.

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -4,10 +4,10 @@ import ComponentsList from "./ComponentsList.svelte";
 
 let selected="properties";
 
-const isSelected = tab => 
+const isSelected = tab =>
     selected === tab;
 
-const selectTab = tab => 
+const selectTab = tab =>
     selected = tab;
 
 
@@ -17,13 +17,13 @@ const selectTab = tab =>
 
     <div class="switcher">
 
-        <button 
+        <button
             class:selected={selected==="properties"}
             on:click={() => selectTab("properties")}>
             Properties
         </button>
 
-        <button 
+        <button
             class:selected={selected==="components"}
             on:click={() => selectTab("components")}>
             Components
@@ -50,24 +50,28 @@ const selectTab = tab =>
     height: 100%;
     display: flex;
     flex-direction: column;
+    padding: 2rem 1.5rem 2rem 1.5rem;
 }
 
 .switcher {
-    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
 }
 
 .switcher > button {
     display: inline-block;
-    background-color: rgba(0,0,0,0);
-    border-style: solid;
-    border-color: var(--slate);
+    border: none;
     margin: 5px;
     padding: 5px;
     cursor: pointer;
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    color: #999;
 }
 
 .switcher > .selected {
-    background-color: red;
+    color: #333;
 }
 
 .panel {
@@ -76,4 +80,4 @@ const selectTab = tab =>
     overflow-y: auto;
 }
 
-</style>
+</style>

packages/builder/src/userInterface/EditComponentProps.svelte

@@ -13,8 +13,8 @@ import {
 import Button from "../common/Button.svelte";
 import ButtonGroup from "../common/ButtonGroup.svelte";
 
-import { 
-    cloneDeep, 
+import {
+    cloneDeep,
     join,
     split,
     map,
@@ -95,15 +95,15 @@ const updateComponent = doChange => {
 }
 
 const onPropsChanged = newProps => {
-    updateComponent(newComponent => 
+    updateComponent(newComponent =>
         assign(newComponent.props, newProps));
-    
+
 }
 
 const validate = () => {
-    const fieldInvalid = (field, err) => 
+    const fieldInvalid = (field, err) =>
         errors[field] = err;
-    const fieldValid = field => 
+    const fieldValid = field =>
         errors[field] && delete errors[field];
 
     if(!name) nameInvalid = "component name i not supplied";
@@ -127,12 +127,12 @@ const showDialog = () => {
     <div class="title">
         <div>{shortName}</div>
         <div>
-            <IconButton icon="save" 
-                        on:click={save} 
+            <IconButton icon="save"
+                        on:click={save}
                         color="var(--secondary100)"
                         hoverColor="var(--primary100)"/>
-            <IconButton icon="trash" 
-                        on:click={deleteComponent} 
+            <IconButton icon="trash"
+                        on:click={deleteComponent}
                         color="var(--secondary100)"
                         hoverColor="var(--primary100)"/>
         </div>
@@ -140,11 +140,11 @@ const showDialog = () => {
 
     <div class="component-props-container">
 
-       
+
         <PropsView onValidate={onPropsValidate}
                 {componentInfo}
                 {onPropsChanged} />
-        
+
 
     </div>
 
@@ -155,7 +155,7 @@ const showDialog = () => {
     <div class="uk-modal-dialog">
 
         <div class="uk-modal-header">
-            Delete {name} ? 
+            Delete {name} ?
         </div>
 
         <div class="uk-modal-body">
@@ -164,12 +164,12 @@ const showDialog = () => {
 
         <div class="uk-modal-footer">
             <ButtonGroup>
-                <Button grouped 
+                <Button grouped
                         on:click={confirmDeleteComponent}>
                         OK
                 </Button>
-                <Button grouped 
-                        on:click={hideDialog} 
+                <Button grouped
+                        on:click={hideDialog}
                         color="secondary" >
                         Cancel
                 </Button>
@@ -186,9 +186,7 @@ const showDialog = () => {
     height: 100%;
     display: flex;
     flex-direction: column;
-    border-style: solid;
-    border-width: 1px 0 0 0;
-    border-color: var(--slate);
+
 }
 
 .title {
@@ -213,4 +211,4 @@ const showDialog = () => {
     flex: 1 1 auto;
     overflow-y: auto;
 }
-</style>
+</style>