Top nav redesign

New BB logo added, and sizing changed. Nav items margin changed to reflect designs Nav items color changed to reflect new simplified color scheme Bottom border added Nav background color changed *Global styles is a work in progress.
6 years ago · 5e98c3e9cb
4 changed files with 93 additions and 14 deletions
--- a/packages/builder/assets/bb-logo.svg
+++ b/packages/builder/assets/bb-logo.svg
@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#393C44;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
+		C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
+	<g>
+		<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
+			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
+			c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
+			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
+			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
+			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
+			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
+	</g>
+	<g>
+		<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
+			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
+			c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
+			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
+			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
+			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
+			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
+	</g>
+</g>
+</svg>
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@ -1,5 +1,20 @@

 :root {
+
+    --white: #FFFFFF;
+    
+    --blue: #0055ff;
+    --blue-light: #F1F4FC;
+    --blue-dark: #2F4C9B;
+
+    --ink: #393C44;
+    --ink-light: #808192;
+    --ink-lighter: #ADAEC4;
+    
+    --grey: #F2F2F2;
+    --grey-light: #FBFBFB;
+    --grey-dark: #E6E6E6;
+
    --primary100: #0055ff;
    --primary80: rgba(0, 85, 255, 0.8);
    --primary60: #rgba(0, 85, 255, 0.6);
@ -9,7 +24,7 @@
    --primary5: #rgba(0, 85, 255, 0.05);
    --primarydark: #0044cc;

-    --secondary100:#000333;
+    --secondary100:#393C44;
    --secondary80: rgba(0, 3, 51, 0.8);
    --secondary60: rgba(0, 3, 51, 0.6);
    --secondary40: rgba(0, 3, 51, 0.4);
@ -34,7 +49,7 @@
    --deletion10: #F2545B1A;
    --deletiondark: #CF4046;

-    --white: #FFFFFF;
+    
    --darkslate: #1a202c;
    --slate: #d8d8d8;
    --lightslate: #f9f9f9;
--- a/packages/builder/src/pages/[application]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/_layout.svelte
@ -31,7 +31,7 @@
    <div class="topleftnav">
      <button class="home-logo">
        <img
-          src="/_builder/assets/budibase-emblem-white.svg"
+          src="/_builder/assets/bb-logo.svg"
          alt="budibase icon" />
      </button>

@ -85,13 +85,14 @@

  .top-nav {
    flex: 0 0 auto;
-    height: 48px;
-    background: #0d203b;
+    height: 60px;
+    background: #fff;
    padding: 0px 20px 0 20px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
+    border-bottom: 1px solid var(--grey);
  }

  .content > div {
@ -110,8 +111,8 @@

  .topnavitem {
    cursor: pointer;
-    color: rgb(255, 255, 255, 0.6);
-    margin: 0px 10px;
+    color: var(--ink-lighter);
+    margin: 0px 00px 0px 20px;
    padding-top: 4px;
    font-weight: 500;
    font-size: 1rem;
@ -121,19 +122,19 @@
  }

  .topnavitem:hover {
-    color: rgb(255, 255, 255, 0.8);
+    color: var(--ink-light);
    font-weight: 500;
  }

  .active {
-    color: white;
-    font-weight: 600;
+    color: var(--ink);
+    font-weight: 500;
  }

  .topnavitemright {
    cursor: pointer;
-    color: rgb(255, 255, 255, 0.6);
-    margin: 0px 5px;
+    color: var(--ink-light);
+    margin: 0px 20px 0px 0px;
    padding-top: 4px;
    font-weight: 500;
    font-size: 1rem;
@ -155,7 +156,8 @@
    cursor: pointer;
    outline: none;
    height: 40px;
-    padding: 8px 10px 8px 0;
+    padding: 0px 10px 8px 0;
+    align-items: center;
  }

  .home-logo:hover {
@ -167,7 +169,7 @@
  }

  .home-logo img {
-    height: 100%;
+    height: 40px;
  }
  span:first-letter {
    text-transform: capitalize;
--- a/packages/server/builder/assets/bb-logo.svg
+++ b/packages/server/builder/assets/bb-logo.svg
@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#393C44;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
+		C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
+	<g>
+		<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
+			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
+			c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
+			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
+			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
+			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
+			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
+	</g>
+	<g>
+		<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
+			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
+			c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
+			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
+			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
+			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
+			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
+	</g>
+</g>
+</svg>