Implement header design

2 files changed, 62 insertions, 3 deletions

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;
+  }
+}