Implement header design

6 files changed, 101 insertions, 91 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index f4672c7ec..640524e23 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,14 +1,13 @@
-<div class="container-fluid">
-  <div class="row header">
+<div>
+  <div class="header">
 
     <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <div class="hamburger-block" (click)="toggleMenu()">
-        <span class="glyphicon glyphicon-menu-hamburger"></span>
-      </div>
+      <span class="icon icon-menu" (click)="toggleMenu()"></span>
 
-      <div id="peertube-title">
-        <a [routerLink]="['/videos/list']" title="Homepage"></a>
-      </div>
+      <a id="peertube-title" [routerLink]="['/videos/list']" title="Homepage">
+        <span class="icon icon-logo"></span>
+        PeerTube
+      </a>
     </div>
 
     <div class="header-right">
@@ -16,7 +15,7 @@
     </div>
   </div>
 
-  <div class="row sub-header-container">
+  <div class="sub-header-container">
     <div class="title-menu-left">
 
       <div class="title-menu-left-block menu">
@@ -25,7 +24,7 @@
       </div>
     </div>
 
-    <div class="main-col" [ngClass]="getMainColClasses()">
+    <div class="main-col container-fluid" [ngClass]="getMainColClasses()">
 
       <div class="main-row">
         <router-outlet></router-outlet>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 28e86097c..f245d0563 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -28,8 +28,10 @@
 .header {
   height: $header-height;
   position: fixed;
+  top: 0;
   width: 100%;
   background-color: #fff;
+  z-index: 1000;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
 
@@ -37,33 +39,36 @@
     width: $menu-width;
     z-index: 1001;
     height: $header-height;
-    line-height: $header-height;
-    margin-top: 0;
-    margin-bottom: 0;
     display: flex;
-    padding: 0;
-
-    .hamburger-block {
-      margin-right: 10px;
-      margin-left: 25px;
-
-      .glyphicon {
-        cursor: pointer;
+    align-items: center;
+
+    .icon {
+      cursor: pointer;
+      width: 22px;
+      height: 22px;
+      display: inline-block;
+      background-size: contain;
+
+      &.icon-menu {
+        background-image: url('../assets/header/menu.svg');
+        margin: 0 18px 0 24px;
       }
     }
 
     #peertube-title {
-      a {
-        color: inherit !important;
-        display: block;
+      font-size: 20px;
+      font-weight: $font-bold;
+      color: inherit !important;
+      display: flex;
+      align-items: center;
+
+      @include disable-default-a-behaviour;
+
+      .icon.icon-logo {
+        display: inline-block;
         background: url('../assets/logo.svg') no-repeat;
-        width: 24px;
+        width: 20px;
         height: 24px;
-
-        &:hover {
-          color: inherit !important;
-          text-decoration: none !important;
-        }
       }
     }
 
@@ -71,65 +76,15 @@
       #peertube-title {
         display: none;
       }
-
-      .hamburger-block {
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    @media screen and (min-width: 500px) and (max-width: 600px) {
-      #peertube-title a {
-        width: 80px;
-      }
-    }
-
-    @media screen and (min-width: 600px) and (max-width: 700px) {
-      #peertube-title a {
-        width: 100px;
-      }
-    }
-
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-
-    @media screen and (min-width: 1000px) {
-      #peertube-title a {
-        width: 120px;
-      }
-    }
-
-    @media screen and (min-width: 1200px) {
-      padding-left: 15px;
-
-      .hamburger-block {
-        margin-right: 15px;
-      }
-
-      #peertube-title a {
-        width: 135px;
-      }
-    }
-
-    @media screen and (min-width: 1600px) {
-      .hamburger-block {
-        margin-right: 20px;
-      }
-
-      #peertube-title a {
-        width: 180px;
-      }
     }
   }
 
   .header-right {
-    text-align: right;
     height: $header-height;
-    margin-left: $menu-width;
+    display: flex;
+    align-items: center;
     flex-grow: 1;
+    justify-content: flex-end;
   }
 }
 
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index bb0caaef5..fb31c0734 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -19,7 +19,7 @@
   </div>
 
   <div *ngIf="!isLoggedIn" class="button-block">
-    <a routerLink="/login"class="login-button">Login</a>
+    <a routerLink="/login" class="login-button">Login</a>
     <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="create-account-button">Create an account</a>
   </div>
 
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 8a4910605..2c2106733 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -123,9 +123,6 @@ menu {
     cursor: pointer;
     margin-bottom: 15px;
 
-    &:hover, &:focus {
-      text-decoration: none !important;
-      outline: none !important;
-    }
+    @include disable-default-a-behaviour;
   }
 }
diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html
index 0e3de150c..9bc9bafe4 100644
--- a/client/src/app/shared/search/search.component.html
+++ b/client/src/app/shared/search/search.component.html
@@ -1,6 +1,10 @@
 <input
-  type="text" id="search-video" name="search-video" placeholder="Search"
-  [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
+    type="text" id="search-video" name="search-video" placeholder="Search..."
+    [(ngModel)]="searchCriteria.value" (keyup.enter)="doSearch()"
 >
+<span (click)="doSearch()" class="icon icon-search"></span>
 
-<a routerLink="/videos/upload">Upload</a>
+<a class="upload-button" routerLink="/videos/upload">
+  <span class="icon icon-upload"></span>
+  Upload
+</a>
diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss
index e69de29bb..ffd891904 100644
--- a/client/src/app/shared/search/search.component.scss
+++ b/client/src/app/shared/search/search.component.scss
@@ -0,0 +1,55 @@
+#search-video {
+  display: inline-block;
+  height: $button-height;
+  width: $search-input-width;
+  margin-right: 15px;
+  padding-right: 25px; // For the search icon
+  background: #fff;
+  border: 1px solid #C6C6C6;
+  border-radius: 3px;
+  padding-left: 15px;
+
+  &::placeholder {
+    color: #000;
+  }
+}
+
+.icon.icon-search {
+  display: inline-block;
+  background: url('../../../assets/header/search.svg') no-repeat;
+  background-size: contain;
+  width: 25px;
+  height: 21px;
+  vertical-align: middle;
+  cursor: pointer;
+  // yolo
+  position: absolute;
+  margin-left: -50px;
+  margin-top: 5px;
+}
+
+.upload-button {
+  display: inline-block;
+  color: #fff;
+  font-weight: $font-semibold;
+  font-size: 15px;
+  height: $button-height;
+  line-height: $button-height;
+  border-radius: 3px;
+  text-align: center;
+  margin-right: 25px;
+  background-color: $orange-color;
+  padding: 0 17px 0 13px;
+
+  @include disable-default-a-behaviour;
+
+  .icon.icon-upload {
+    display: inline-block;
+    background: url('../../../assets/header/upload.svg') no-repeat;
+    background-size: contain;
+    width: 22px;
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 6px;
+  }
+}