From e978e38ae9cef9d95a63ebd1034d4aaf8cde054b Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Mon, 20 Jan 2020 13:45:00 +0000
Subject: [PATCH] Implement refreshed design for the top nav.

---
 packages/builder/src/PackageRoot.svelte | 50 ++++++++++++++++++++-----
 packages/builder/src/global.css         | 10 ++---
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte
index cd424156cf..dc208a7de3 100644
--- a/packages/builder/src/PackageRoot.svelte
+++ b/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}>
@@ -37,7 +38,7 @@ import { fade } from "svelte/transition";
         </div>
         {/if}
     </div>
-    
+
 </div>
 
 <style>
@@ -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;
 }
 
 
-</style>
\ No newline at end of file
+.home-logo img {
+    height: 100%;
+}
+
+</style>
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 0541eb03a1..08f4174ec8 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -1,12 +1,12 @@
 :root {
-    --primary100: #454CA0FF;
+    --primary100: #173157FF;
     --primary75: #454CA0BF;
     --primary50: #454CA080;
     --primary25: #454CA040;
     --primary10: #454CA01A;
     --primary5: #454ca00c;
     --primarydark: #3F448A;
-    
+
     --secondary100: #162B4DFF;
     --secondary75: #162B4DBF;
     --secondary50: #162B4D80;
@@ -16,14 +16,14 @@
     --secondarydark: #3F448A;
 
     --tertiary: #F2F5F7;
-    
+
     --success100: #49C39EFF;
     --success75: #49C39EBF;
     --success50: #49C39E80;
     --success25: #49C39E40;
     --success10: #49C39E1A;
     --successdark: #44B492;
-    
+
     --deletion100: #F2545BFF;
     --deletion75: #F2545BBF;
     --deletion50: #F2545B80;
@@ -97,4 +97,4 @@ h5 {
     font-family: var(--fontblack);
     font-size: 12pt;
     color: var(--darkslate);
-}
\ No newline at end of file
+}