Implement basic layout for frontend view.

packages/builder/src/PackageRoot.svelte

@@ -48,6 +48,7 @@ import { fade } from "svelte/transition";
     width:100%;
     display: flex;
     flex-direction: column;
+
 }
 
 .top-nav {
@@ -70,6 +71,7 @@ import { fade } from "svelte/transition";
 .content > div {
     height:100%;
     width:100%;
+
 }
 
 .topnavitem {

packages/builder/src/global.css

@@ -12,7 +12,7 @@
     --secondary50: #162B4D80;
     --secondary25: #162B4D40;
     --secondary10: #162B4D1A;
-    --secondary5: rgba(22, 43, 77, 0.068);
+    --secondary5:#fff;
     --secondarydark: #3F448A;
 
     --tertiary: #F2F5F7;

packages/builder/src/userInterface/UserInterfaceRoot.svelte

@@ -83,19 +83,25 @@ const settings = () => {
 
 .root {
     display: grid;
-    grid-template-columns: 250px 1fr 300px;
+    grid-template-columns: 290px 1fr 300px;
     height: 100%;
     width: 100%;
+    background: #fafafa;
 }
 
 .ui-nav {
     grid-column: 1;
     background-color: var(--secondary5);
     height: 100%;
+    padding: 0 1.5rem 0rem 1.5rem
 }
 
 .preview-pane {
     grid-column: 2;
+    margin: 80px 60px;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0px 6px rgba(0,0,0,0.05)
 }
 
 .components-pane {
@@ -125,7 +131,7 @@ const settings = () => {
 .nav-group-header {
     display:grid;
     grid-template-columns: [icon] auto [title] 1fr [button] auto;
-    padding: 2rem 1rem 0rem 1rem;
+    padding: 2rem 0 0 0;
     font-size: .9rem;
     font-weight: bold;
 }