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

@@ -120,7 +120,7 @@ $: {
 
 </script>
 
-<div class="root" style={`padding-left: calc(10px * ${pathPartsThisLevel})`}>
+<div class="root">
 
     {#each subfolders as folder}
     <div class="hierarchy-item folder"
@@ -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-weight: 500;
-    font-size: .9rem;
+    font-size: 0.9rem;
-    font-weight: bold;
+    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);
+    color: var(--button-text);
-    font-weight: bold;
+    background: var(--background-button)!important;
 }
 
 .title {

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}/>
+                                on:click={settings}/> -->
-                    <IconButton icon="plus"
+                    <!-- <IconButton icon="plus"
-                                on:click={newComponent}/>
+                                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;
+    display: flex;
-    grid-template-columns: [icon] auto [title] 1fr [button] auto;
     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) {