Redesign docs header

6 files changed, 106 insertions, 113 deletions

diff --git a/content/assets/images/gitlab-logo.svg b/content/assets/images/gitlab-logo.svg
index ff82f711..441db27f 100644
--- a/content/assets/images/gitlab-logo.svg
+++ b/content/assets/images/gitlab-logo.svg
@@ -1,53 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="700px" height="700px" viewBox="0 0 700 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>logo-extra-whitespace</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="logo-extra-whitespace" sketch:type="MSArtboardGroup">
-            <g id="logo-no-bg" sketch:type="MSLayerGroup" transform="translate(98.000000, 118.000000)">
-                <g id="Page-1" sketch:type="MSShapeGroup">
-                    <g id="gitlab_logo">
-                        <g id="g10" transform="translate(248.000000, 228.833300) scale(1, -1) translate(-248.000000, -228.833300) translate(0.000000, 0.333300)">
-                            <g id="g16">
-                                <g id="g18-Clipped">
-                                    <g id="g18">
-                                        <g>
-                                            <g id="Group" transform="translate(0.666658, 0.666658)">
-                                                <g id="g44" transform="translate(0.532000, 0.774933)" fill="#FC6D26">
-                                                    <path d="M491.999988,194.666662 L464.441322,279.481326 L409.82399,447.578655 C407.014656,456.226655 394.778657,456.226655 391.96799,447.578655 L337.349325,279.481326 L155.982663,279.481326 L101.362664,447.578655 C98.5533309,456.226655 86.3173312,456.226655 83.5066646,447.578655 L28.8893326,279.481326 L1.33199997,194.666662 C-1.18266664,186.930662 1.57199996,178.455996 8.1519998,173.674662 L246.665327,0.385333324 L485.179988,173.674662 C491.759988,178.455996 494.513321,186.930662 491.999988,194.666662" id="path46"></path>
-                                                </g>
-                                                <g id="g48" transform="translate(156.197863, 1.160267)" fill="#E24329">
-                                                    <path d="M90.9999977,0 L90.9999977,0 L181.683995,279.095993 L0.31599997,279.095993 L90.9999977,0 L90.9999977,0 Z" id="path50"></path>
-                                                </g>
-                                                <g id="g56" transform="translate(28.531199, 1.160800)" fill="#FC6D26">
-                                                    <path d="M218.666661,0 L127.982663,279.09466 L0.890666644,279.09466 L218.666661,0 L218.666661,0 Z" id="path58"></path>
-                                                </g>
-                                                <g id="g64" transform="translate(0.088533, 0.255867)" fill="#FCA326">
-                                                    <path d="M29.3333326,279.999993 L29.3333326,279.999993 L1.77466662,195.185328 C-0.738666648,187.449329 2.01466662,178.974662 8.59599979,174.194662 L247.109327,0.905333311 L29.3333326,279.999993 L29.3333326,279.999993 Z" id="path66"></path>
-                                                </g>
-                                                <g id="g72" transform="translate(29.421866, 280.255593)" fill="#E24329">
-                                                    <path d="M0,0 L127.091997,0 L72.4733315,168.097329 C69.6626649,176.746662 57.4266652,176.746662 54.617332,168.097329 L0,0 L0,0 Z" id="path74"></path>
-                                                </g>
-                                                <g id="g76" transform="translate(247.197860, 1.160800)" fill="#FC6D26">
-                                                    <path d="M0,0 L90.6839977,279.09466 L217.775995,279.09466 L0,0 L0,0 Z" id="path78"></path>
-                                                </g>
-                                                <g id="g80" transform="translate(246.307061, 0.255867)" fill="#FCA326">
-                                                    <path d="M218.666661,279.999993 L218.666661,279.999993 L246.225327,195.185328 C248.73866,187.449329 245.985327,178.974662 239.403994,174.194662 L0.890666644,0.905333311 L218.666661,279.999993 L218.666661,279.999993 Z" id="path82"></path>
-                                                </g>
-                                                <g id="g84" transform="translate(336.973725, 280.255593)" fill="#E24329">
-                                                    <path d="M127.999997,0 L0.907999977,0 L55.5266653,168.097329 C58.3373319,176.746662 70.5733316,176.746662 73.3826648,168.097329 L127.999997,0 L127.999997,0 Z" id="path86"></path>
-                                                </g>
-                                            </g>
-                                        </g>
-                                    </g>
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.33334 9.33332L7.58668 15.3333V9.33332L4.92001 1.14666C4.78334 0.725325 4.13601 0.725325 4.00001 1.14666L1.33334 9.33332Z" fill="#E24329"/>
+<path d="M22.6667 9.33332L16.4133 15.3333V9.33332L19.08 1.14666C19.2167 0.725325 19.864 0.725325 20 1.14666L22.6667 9.33332Z" fill="#E24329"/>
+<path d="M12 22.92L2 9.33334H22L12 22.92Z" fill="#E24329"/>
+<path d="M12 22.92L7.58668 9.33334H1.33334L4.00001 16.6667L12 22.92Z" fill="#FC6D26"/>
+<path d="M12 22.92L16.4133 9.33334H22.6667L20 16.6667L12 22.92Z" fill="#FC6D26"/>
+<path d="M1.33333 9.33334L0.0666658 13.44C-0.0533342 13.8167 0.0666659 14.24 0.399999 14.48L12.0133 22.92L1.33333 9.33334Z" fill="#FCA326"/>
+<path d="M22.6667 9.33334L23.9333 13.44C24.0533 13.8167 23.9333 14.24 23.6 14.48L12 22.92L22.6667 9.33334Z" fill="#FCA326"/>
+</svg>
diff --git a/content/assets/images/icon_search_white.svg b/content/assets/images/icon_search_white.svg
new file mode 100644
index 00000000..e8a0177e
--- /dev/null
+++ b/content/assets/images/icon_search_white.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.47653 10.8907C8.49572 11.5892 7.29583 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6C12 7.29583 11.5892 8.49572 10.8907 9.47653L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L9.47653 10.8907ZM10 6C10 8.20914 8.20914 10 6 10C3.79086 10 2 8.20914 2 6C2 3.79086 3.79086 2 6 2C8.20914 2 10 3.79086 10 6Z" fill="#F1F1FF"/>
+</svg>
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index f39f8138..d562aa6e 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -3,7 +3,7 @@ $medium-width: 1100px;
 $mobile-width: 900px;
 
 // Border radius
-$border-radius: 3px;
+$border-radius: 4px;
 
 // Border colors
 $introduced-in-border-color: #e3e3e3;
@@ -23,7 +23,7 @@ $h-margin-bottom: 10px;
 $nav-item-padding: 7px;
 
 // Heights
-$page-header-height: 53px;
+$page-header-height: 40px;
 $banner-height: 31px;
 
 // GitLab colors
@@ -67,7 +67,13 @@ $gds-blue-600: #1b69b6;
 $gds-blue-700: #17599c;
 $gds-blue-800: #134a81;
 
+// Purple palatte
+$gds-purple-50: #f4f0ff;
+$gds-purple-900: #2f2a6b;
+
 // Indigo palatte
+$gds-indigo-100: #dbdbf8;
+$gds-indigo-600: #5252b5;
 $gds-indigo-800: #393982;
 //// end of GitLab Design System's colors ////
 
@@ -78,6 +84,8 @@ $gds-indigo-800: #393982;
 $body-color: $gds-gray-950; //font color
 $body-background-color: rgba($gds-gray-50, .3); //body background
 $main-background-color: $gds-white; // content background
+$header-background-color: $gds-purple-900;
+$header-font-color: $gds-indigo-100;
 
 // Link colors
 $link-color: $gds-blue-600;
@@ -313,8 +321,6 @@ $container-large-desktop: 1200px;
 
 $body-bg: #f9f9f9;
 
-$border-radius-large: 3px;
-
 $grid-float-breakpoint: 992px;
 $screen-sm-min: 768px;
 
@@ -330,8 +336,10 @@ $dropdown-bg: #019875;
 $dropdown-link-color: #fff;
 $dropdown-link-hover-color: #18be97;
 
-$search-input-font-color: #333;
+$search-input-font-color: $white;
+$search-placeholder-font-color: $gds-indigo-100;
 $search-border-color: #bcbcbc;
+$search-background-color: #4b4c7b;
 
 $reseller-divider-color: $navbar-default-border;
 $reseller-hero-bg-color: #35393d;
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 99f6d77e..ec0a3f08 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -362,7 +362,7 @@ li {
   }
 
   p {
-    margin: 0 0 1.25em;    
+    margin: 0 0 1.25em;
   }
 
   ul, ol {
@@ -905,37 +905,47 @@ a.global-nav-link {
 
 .header {
   z-index: 10;
-  background: $main-background-color;
+  background: $header-background-color;
+  color: $header-font-color;
   position: fixed;
   width: 100%;
   height: $page-header-height;
-  padding: 6px 24px;
-  border-bottom: 1px solid $border-color;
+  padding: 4px 16px;
   text-align: left;
   display: flex;
   justify-content: space-between;
   white-space: nowrap;
 
   .logo-container {
-    margin-right: 24px;
+    margin-right: 32px;
+
+    @media (max-width: $medium-width) {
+      margin-right: 16px;
+    }
   }
 
   @media all and (max-width: $mobile-width) {
     height: auto;
-    padding-left: 5px;
   }
 
   img {
-    height: 40px;
+    height: 24px;
+    margin-right: 10px;
   }
 
   p {
     font-size: 16px;
-    color: $black;
+    color: $white;
     display: inline-block;
     margin: 0 0 0 4px;
   }
 
+  .header-company-name {
+    @media (max-width: $medium-width) {
+      display: none;
+    }
+  }
+
   ul {
     text-align: right;
     list-style-type: none;
@@ -945,6 +955,10 @@ a.global-nav-link {
     }
   }
 
+  .nav-item a {
+    color: $header-font-color;
+  }
+
   @media all and (max-width: $mobile-width) {
     &.active {
       display: block;
@@ -968,6 +982,21 @@ a.global-nav-link {
     margin: 0 10px;
   }
 
+  .version-dropdown-desktop {
+    display: flex;
+    align-items: center;
+
+    @media all and (max-width: $mobile-width) {
+      display: none;
+    }
+  }
+
+  .dropdown {
+    height: $page-header-height;
+    display: flex;
+    align-items: center;
+  }
+
   .dropdown-menu {
     li {
       display: block;
@@ -975,7 +1004,8 @@ a.global-nav-link {
   }
 
   .choose-version {
-    padding: 10px;
+    margin-left: 32px;
+    font-size: 14px;
 
     @media(max-width:$mobile-width) {
       display: none;
@@ -983,16 +1013,16 @@ a.global-nav-link {
   }
 
   .btn-versions {
-    color: $black;
-    font-size: 16px;
-    border: 1px solid $color-tanuki-medium;
-
-    &:hover {
-      opacity: .8;
-    }
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: inherit;
+    color: $header-font-color;
+    margin-left: 4px;
+    border: 0;
 
     &:active {
-      opacity: .8;
       box-shadow: none;
     }
   }
@@ -1003,6 +1033,7 @@ a.global-nav-link {
     li {
       display: block;
       margin: 5px 0;
+      text-align: left;
 
       a {
         color: $versions-link-color;
@@ -1041,25 +1072,27 @@ a.global-nav-link {
 
   input {
     box-sizing: content-box;
-    border: 1px solid $search-border;
     border-radius: $border-radius;
     -webkit-appearance: none;
-    padding: 7px 11px 7px 28px;
-    width: 260px;
-    background: $white url("<%= @items['/assets/images/icon_search.svg'].path %>") 9px 12px / 14px no-repeat;
+    border: 0;
+    padding: 4px 12px;
+    width: 355px;
+    color: $search-input-font-color;
+    background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 355px 9px / 14px no-repeat;
     outline: 0;
 
-    @media(max-width:$medium-width) {
+    @media(max-width: $medium-width) {
       width: 210px;
+      background: $search-background-color url("<%= @items['/assets/images/icon_search_white.svg'].path %>") 210px 9px / 14px no-repeat;
     }
+  }
 
-    @media(max-width:$mobile-width) {
-      display: none;
-    }
+  input::placeholder {
+    color: $search-placeholder-font-color;
   }
 
   input:focus {
-    border: 1px solid $search-border-dark;
+    border: 0;
   }
 
   input:visited {
@@ -1070,32 +1103,27 @@ a.global-nav-link {
   .nav-container {
     margin: auto 0;
 
-    .docsearch-mobile {
+    .version-dropdown-mobile {
       display: none;
-      width: 100%;
-      outline: 0;
-      margin-top: 12px;
 
       @media all and (max-width: $mobile-width) {
         display: block;
       }
-
     }
-
-    .docsearch-mobile:focus {
-      border: 1px solid $search-border-dark;
-    }
-
   }
 
   .nav-toggle {
     display: none;
 
     @media all and (max-width: $mobile-width) {
-      display: inline-block;
+      display: flex;
+      height: $page-header-height;
+      align-items: center;
       position: absolute;
-      top: 15px;
-      right: 15px;
+      padding: 0 15px;
+      cursor: pointer;
+      top: 0;
+      right: 0;
       color: $link-color-nav;
     }
   }
@@ -1103,9 +1131,10 @@ a.global-nav-link {
   // Override bootstrap
   .nav > li > a {
     text-decoration: none;
-    color: $black;
     padding: 10px;
-    font-size: 16px;
+    font-size: 14px;
+    font-weight: bold;
+    color: $header-font-color;
   }
 
   // Override bootstrap
@@ -1266,8 +1295,8 @@ a.global-nav-link {
     }
 
     .logo {
-      height: 40px;
-      margin-right: 6px;
+      height: 24px;
+      margin-right: 10px;
     }
 
     .logo-container {
diff --git a/layouts/header.html b/layouts/header.html
index 6f4919a5..a666fb10 100644
--- a/layouts/header.html
+++ b/layouts/header.html
@@ -2,31 +2,28 @@
   <div class="flex-container align-center">
     <a class="header-link logo-container flex-container justify-center align-center" href="/">
       <img src="<%= @items['/assets/images/gitlab-logo.svg'].path %>" class="logo" />
-      <p>GitLab <strong>Docs</strong></p>
+      <p><span class="header-company-name">GitLab </span><strong>Docs</strong></p>
     </a>
     <% if @item[:searchbar].nil? %>
       <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
       <form id="search-form" action="/search/" method="get">
-        <input type="text" name="q" class="docsearch" placeholder="Search" required/>
+        <input type="text" name="q" class="docsearch" placeholder="Search our docs" required/>
         <input type="submit" style="visibility: hidden; position:absolute;" />
       </form>
       <% end %>
     <% end %>
-    <%= render '/versions_dropdown.*' %>
+    <div class="version-dropdown-desktop">
+      <%= render '/versions_dropdown.*' %>
+    </div>
   </div>
   <div class="nav-container">
     <a class="nav-toggle" id="docs-nav-toggle">
       <i class="fa fa-bars" aria-hidden="true"></i>
     </a>
     <ul class="nav">
-      <% unless @item.identifier.to_s.split('/')[1] == 'search' %>
-      <li class="nav-item">
-        <form id="mobile-search-form" action="/search/" method="get">
-          <input type="text" name="q" class="docsearch docsearch-mobile" placeholder="Search" required/>
-          <input type="submit" style="visibility: hidden; position:absolute;" />
-        </form>
-      </li>
-      <% end %>
+      <div class="version-dropdown-mobile">
+        <%= render '/versions_dropdown.*' %>
+      </div>
       <% if ENV['NANOC_ENV'] == 'production' %>
         <% @config[:products].each do |name, product| %>
           <% if product[:expose] == true %>
diff --git a/layouts/versions_dropdown.html b/layouts/versions_dropdown.html
index 3a090a4b..6decfec3 100644
--- a/layouts/versions_dropdown.html
+++ b/layouts/versions_dropdown.html
@@ -1,6 +1,6 @@
 <!-- versions dropdown-->
 <div class="choose-version">
-Choose version
+Version
 </div>
 <div class="dropdown">
   <a role="button" class="btn btn-versions dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="versions" href="#">