From 825fe04b004123cb41d64948f9e96223faeecb29 Mon Sep 17 00:00:00 2001
From: Jan Kuri <jkuri88@gmail.com>
Date: Fri, 3 Nov 2017 20:14:44 +0100
Subject: [PATCH] feat(header): header styles

---
 src/app/assets/public/images/icons/search.svg |  9 +++
 .../app-header/app-header.component.html      |  8 ++-
 src/app/styles/colors.sass                    |  2 +-
 src/app/styles/nav.sass                       | 67 +++++++++++++++----
 4 files changed, 68 insertions(+), 18 deletions(-)
 create mode 100644 src/app/assets/public/images/icons/search.svg

diff --git a/src/app/assets/public/images/icons/search.svg b/src/app/assets/public/images/icons/search.svg
new file mode 100644
index 000000000..1aa4a03d9
--- /dev/null
+++ b/src/app/assets/public/images/icons/search.svg
@@ -0,0 +1,9 @@
+<svg width="74px" height="74px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-13.000000, -1.000000)" fill-rule="nonzero" fill="#D5D6E3">
+            <g id="Group" transform="translate(12.000000, 0.637820)">
+                <path d="M31.998153,0.36039 C14.912952,0.36039 0.998153,14.27506 0.998153,31.36039 C0.998153,48.4455 14.912853,62.3604 31.998153,62.3604 C39.464252,62.3604 46.327052,59.6845 51.685652,55.2666 L69.873152,73.4854 C71.044552,74.6568 72.951647,74.6569 74.123147,73.4854 C75.294747,72.3139 75.294747,70.4069 74.123147,69.2354 L55.904353,51.0479 C60.322253,45.6892 62.998153,38.8265 62.998153,31.36039 C62.998153,14.27505 49.083252,0.36039 31.998153,0.36039 Z M31.998153,6.36039 C45.840652,6.36039 56.998152,17.51773 56.998152,31.36039 C56.998152,45.2028 45.840552,56.3604 31.998152,56.3604 C18.155652,56.3604 6.998152,45.2028 6.998152,31.36039 C6.998152,17.51772 18.155552,6.36039 31.998152,6.36039 L31.998153,6.36039 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/app/components/app-header/app-header.component.html b/src/app/components/app-header/app-header.component.html
index 35a9ef9ec..8feb58430 100644
--- a/src/app/components/app-header/app-header.component.html
+++ b/src/app/components/app-header/app-header.component.html
@@ -4,8 +4,12 @@
       <a class="nav-item nav-logo" routerLink="/">
         <img src="/images/abstruse-text-logo.svg">
       </a>
+      <div class="nav-search-container">
+        <input type="text" placeholder="Search commits, builds by number, ...">
+        <img src="/images/icons/search.svg" class="icon">
+      </div>
     </div>
-    <div class="nav-center">
+    <div class="nav-right">
       <a class="nav-item is-hidden-mobile" routerLink="/dashboard" routerLinkActive="is-active" name="dashboard" *ngIf="user || demo">
         <span>Dashboard</span>
       </a>
@@ -18,8 +22,6 @@
       <a class="nav-item is-hidden-mobile" routerLink="/images" routerLinkActive="is-active" *ngIf="user">
         <span>Images</span>
       </a>
-    </div>
-    <div class="nav-right">
       <!-- <a class="nav-item notification-item is-hidden-mobile" *ngIf="user" (click)="toggleNotify()">
         <img src="//images/icons/notification.svg">
         <div class="notify-num-container" *ngIf="notifications?.length">
diff --git a/src/app/styles/colors.sass b/src/app/styles/colors.sass
index 9ff89a8c0..3ebc00b6a 100644
--- a/src/app/styles/colors.sass
+++ b/src/app/styles/colors.sass
@@ -1,4 +1,4 @@
-$background: #F5F7FA
+$background: #FAFBFB
 $background-secondary: #222C3C
 $background-button: #F1F5F7
 $color: #354052
diff --git a/src/app/styles/nav.sass b/src/app/styles/nav.sass
index 7b56bdae9..e08fb3fae 100644
--- a/src/app/styles/nav.sass
+++ b/src/app/styles/nav.sass
@@ -53,7 +53,7 @@ a.nav-item:not(.button)
 .nav-left,
 .nav-right
   +overflow-touch
-  align-items: stretch
+  align-items: center
   display: flex
   flex-grow: 1
   flex-shrink: 0
@@ -70,7 +70,7 @@ a.nav-item:not(.button)
   justify-content: flex-end
 
 .nav-center
-  align-items: stretch
+  align-items: center
   display: flex
   flex-grow: 0
   flex-shrink: 0
@@ -79,23 +79,24 @@ a.nav-item:not(.button)
   margin-right: auto
 
 .nav
-  align-items: stretch
-  background-color: $white
+  align-items: center
   display: flex
   position: relative
   text-align: center
   z-index: 10
   & > .container
-    align-items: stretch
     display: flex
     width: 100%
+    height: 50px
+    align-items: center
 
 .nav
-  height: 75px
+  height: 50px
   width: 100%
   z-index: 90 !important
-  background-color: $white
+  background-color: #F9FAFB
   position: relative
+  border-bottom: 1px solid #E0E0EA
 
   .nav-logo
     margin-left: -10px
@@ -105,9 +106,8 @@ a.nav-item:not(.button)
 
   .nav-item:not(.nav-logo)
     color: $color !important
-    font-size: 14px
-    margin-right: 15px
-    font-weight: 700
+    font-size: 12px
+    margin-right: 8px
     font-family: $font-family-semibold
 
     .icon
@@ -190,7 +190,7 @@ a.nav-item:not(.button)
             background: $background
 
     &.user-item
-      margin-top: 17px
+      margin-top: 2px
       height: 40px
       min-height: 40px
       display: inline-flex
@@ -231,12 +231,13 @@ a.nav-item:not(.button)
       float: left
       margin-left: 10px
       color: $color
+      margin-top: -10px
 
   .nav-dropdown
     position: absolute
     z-index: 100
     width: 200px
-    top: 65px
+    top: 55px
     right: -8px
     padding-top: 12px
     background: $white
@@ -300,8 +301,6 @@ a.nav-item:not(.button)
     display: flex
     align-items: center
     z-index: 80 !important
-    box-shadow: 1px 2px 5px rgba($black, 0.1)
-    border-bottom: none
     height: 50px
 
     +mobile
@@ -351,3 +350,43 @@ a.nav-item:not(.button)
       float: left
       margin-top: 10px
       margin-left: 5px
+
+
+.nav-search-container
+  width: 500px
+  background: $white
+  height: 30px
+  border-radius: 3px
+  border: 1px solid #E0E0EA
+  margin-left: 30px
+  position: relative
+
+  .icon
+    position: absolute
+    right: 10px
+    top: 2px
+    width: 15px
+
+  input
+    padding-top: 4px
+    height: 26px
+    width: 100%
+    margin: 0
+    padding-right: 40px
+    padding-left: 10px
+    font-size: 12px
+    outline: none
+    border: none
+    color: #D5D6E3
+
+    &::-webkit-input-placeholder
+      color: #D5D6E3
+
+    &::-moz-placeholder
+      color: #D5D6E3
+
+    &:-ms-input-placeholder
+      color: #D5D6E3
+
+    &:-moz-placeholder
+      color: #D5D6E3