Implement refreshed design for the top nav.

packages/builder/src/PackageRoot.svelte

@@ -11,9 +11,10 @@ import { fade } from "svelte/transition";
 <div class="root">
 
     <div class="top-nav">
-        <IconButton icon="home" 
+        <button class="home-logo"><img src="/assets/budibase-logo-only.png"/></button>
+        <!-- <IconButton icon="home"
                     color="var(--slate)"
-                    hoverColor="var(--secondary75)"/>
+                    hoverColor="var(--secondary75)"/> -->
         <span class:active={$store.isBackend}
               class="topnavitem"
               on:click={store.showBackend}>
@@ -51,10 +52,13 @@ import { fade } from "svelte/transition";
 
 .top-nav {
     flex: 0 0 auto;
-    height: 25px;
+    height: 48px;
     background: white;
-    padding: 5px;
+    padding: 0px 15px;
     width: 100%;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
 }
 
 .content {
@@ -71,9 +75,14 @@ import { fade } from "svelte/transition";
 .topnavitem {
     cursor: pointer;
     color: var(--secondary50);
-    padding: 0px 15px;
+    margin: 0px 15px;
+    padding-top: 4px;
     font-weight: 600;
-    font-size: .9rem;
+    font-size: 1rem;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
 }
 
 .topnavitem:hover {
@@ -84,8 +93,31 @@ import { fade } from "svelte/transition";
 
 .active {
     color: var(--primary100);
-    font-weight: 900;
+    font-weight: 600;
+    border-bottom: 2px solid var(--primary100);
+    border-top: 2px solid transparent;
+}
+
+.home-logo {
+    border-style: none;
+    background-color: rgba(0,0,0,0);
+    cursor: pointer;
+    outline: none;
+    height: 40px;
+    padding: 8px 10px;
+}
+
+.home-logo:hover {
+    color: var(--hovercolor);
+}
+
+.home-logo:active {
+    outline:none;
 }
 
 
+.home-logo img {
+    height: 100%;
+}
+
 </style>

packages/builder/src/global.css

@@ -1,5 +1,5 @@
 :root {
-    --primary100: #454CA0FF;
+    --primary100: #173157FF;
     --primary75: #454CA0BF;
     --primary50: #454CA080;
     --primary25: #454CA040;