Basic implementation of sidebar design.

packages/builder/src/global.css

@@ -7,7 +7,7 @@
     --primary5: #454ca00c;
     --primarydark: #3F448A;
 
-    --secondary100: #162B4DFF;
+    --secondary100:#828fa5;
     --secondary75: #162B4DBF;
     --secondary50: #162B4D80;
     --secondary25: #162B4D40;
@@ -52,6 +52,9 @@
     --heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
     --quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
     --smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
+
+    --background-button: #e6eeff;
+    --button-text: #0055ff;
 }
 
 html, body {

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -1,9 +1,9 @@
 <script>
 
-import { 
-    last, 
-    sortBy, 
-    filter, 
+import {
+    last,
+    sortBy,
+    filter,
     map,
     uniqWith,
     isEqual,
@@ -36,22 +36,22 @@ const normalizedName = name => pipe(name, [
     ]);
 
 
-const isOnThisLevel = (c) => 
+const isOnThisLevel = (c) =>
     normalizedName(c.name).split("/").length === pathPartsThisLevel
     &&
     (!thisLevel || normalizedName(c.name).startsWith(normalizedName(thisLevel)));
 
 const notOnThisLevel = (c) => !isOnThisLevel(c);
 
-const isInSubfolder = (subfolder, c) => 
+const isInSubfolder = (subfolder, c) =>
     normalizedName(c.name).startsWith(
         trimCharsStart("/")(
             joinPath([thisLevel, subfolder])));
 
-const isOnNextLevel = (c) => 
+const isOnNextLevel = (c) =>
     normalizedName(c.name).split("/").length === pathPartsThisLevel + 1
 
-const lastPartOfName = (c) => 
+const lastPartOfName = (c) =>
     last(c.name.split("/"))
 
 const subFolder = (c) => {
@@ -84,32 +84,32 @@ const expandFolder = folder => {
         1,
         expandedFolder);
     subfolders = newFolders;
-     
+
 }
 
 const isComponentSelected = (type, current,c) =>
     type==="screen"
-    && current 
+    && current
     && current.name === c.name
 
-const isFolderSelected = (current, folder) => 
+const isFolderSelected = (current, folder) =>
     isInSubfolder(current, folder)
 
 
 
 $: {
-    pathPartsThisLevel = !thisLevel 
+    pathPartsThisLevel = !thisLevel
                             ? 1
                             : normalizedName(thisLevel).split("/").length + 1;
 
-    componentsThisLevel = 
+    componentsThisLevel =
         pipe(components, [
             filter(isOnThisLevel),
             map(c => ({component:c, title:lastPartOfName(c)})),
             sortBy("title")
         ]);
 
-    subfolders = 
+    subfolders =
         pipe(components, [
             filter(notOnThisLevel),
             sortBy("name"),
@@ -120,15 +120,15 @@ $: {
 
 </script>
 
-<div class="root" style={`padding-left: calc(10px * ${pathPartsThisLevel})`}>
- 
+<div class="root">
+
     {#each subfolders as folder}
     <div class="hierarchy-item folder"
          on:click|stopPropagation={() => expandFolder(folder)}>
         <span>{@html getIcon(folder.isExpanded ? "chevron-down" : "chevron-right", "16")}</span>
         <span class="title" class:currentfolder={$store.currentFrontEndItem && isInSubfolder(folder.name, $store.currentFrontEndItem)}>{folder.name}</span>
         {#if folder.isExpanded}
-        <svelte:self components={subComponents(folder.name)} 
+        <svelte:self components={subComponents(folder.name)}
                      thisLevel={folder.path} />
         {/if}
     </div>
@@ -137,7 +137,7 @@ $: {
     {#each componentsThisLevel as component}
     <div class="hierarchy-item component" class:selected={isComponentSelected($store.currentFrontEndType, $store.currentFrontEndItem, component.component)}
          on:click|stopPropagation={() => store.setCurrentScreen(component.component.name)}>
-        <span>{@html getIcon("circle", "7")}</span>
+        <!-- <span>{@html getIcon("circle", "7")}</span> -->
         <span class="title">{component.title}</span>
     </div>
     {/each}
@@ -147,31 +147,33 @@ $: {
 <style>
 
 .root {
-    color: var(--secondary50);
-    font-size: .9rem;
-    font-weight: bold;
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: #828fa5;
 }
 
 .hierarchy-item {
     cursor: pointer;
-    padding: 5px 0px;
+    padding: 11px 7px;
+
+    margin: 5px 0;
+    border-radius: 5px;
 }
 
 .hierarchy-item:hover {
-    color: var(--secondary);
+    /* color: var(--secondary); */
+    background: #fafafa;
 }
 
-.component {
-    margin-left: 5px;
-}
+
 
 .currentfolder {
     color: var(--secondary100);
 }
 
 .selected {
-    color: var(--primary100);
-    font-weight: bold;
+    color: var(--button-text);
+    background: var(--background-button)!important;
 }
 
 .title {
@@ -179,4 +181,4 @@ $: {
 }
 
 
-</style>
+</style>

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -41,14 +41,15 @@ const settings = () => {
 
         <div class="components-list-container">
             <div class="nav-group-header">
-                <div>{@html getIcon("sidebar","18")}</div>
+
                 <span class="components-nav-header">Screens</span>
                 <div>
-                    <IconButton icon="settings"
+                    <!-- <IconButton icon="settings"
                                 size="14px"
-                                on:click={settings}/>
-                    <IconButton icon="plus"
-                                on:click={newComponent}/>
+                                on:click={settings}/> -->
+                    <!-- <IconButton icon="plus"
+                                on:click={newComponent}/> -->
+                    <button on:click={newComponent}>+</button>
                 </div>
             </div>
             <div class="nav-items-container">
@@ -80,6 +81,25 @@ const settings = () => {
 
 
 <style>
+button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: var(--background-button);
+
+    width: 1.8rem;
+    height: 1.8rem;
+    padding-bottom: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--button-text);
+}
 
 .root {
     display: grid;
@@ -112,7 +132,9 @@ const settings = () => {
 }
 
 .components-nav-header {
-    font-size: .9rem;
+    font-size: 0.75rem;
+    color: #999;
+    text-transform: uppercase;
 }
 
 .nav-group-header {
@@ -125,11 +147,12 @@ const settings = () => {
 }
 
 .nav-group-header {
-    display:grid;
-    grid-template-columns: [icon] auto [title] 1fr [button] auto;
+    display: flex;
     padding: 2rem 0 0 0;
     font-size: .9rem;
     font-weight: bold;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .nav-group-header>div:nth-child(1) {