From 51c6addf122abf93f54c53702122bb64febee176 Mon Sep 17 00:00:00 2001
From: Ion Dormenco <idormenco@gmail.com>
Date: Tue, 3 Nov 2020 21:23:09 +0200
Subject: [PATCH] Style navbar (#295)

---
 src/_variables.scss                           |  3 ++
 .../components/header/header.component.html   | 12 +++++--
 .../components/header/header.component.scss   | 35 +++++++++++++++++--
 .../observers/observers.component.scss        |  2 +-
 .../base-button/base-button.component.scss    |  2 +-
 src/assets/user-icon.svg                      |  4 +++
 src/environments/environment.local.ts         |  2 +-
 src/environments/environment.prod.ts          |  2 +-
 src/environments/environment.qa.ts            |  2 +-
 src/environments/environment.ts               |  2 +-
 yarn.lock                                     |  7 ++++
 11 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/user-icon.svg

diff --git a/src/_variables.scss b/src/_variables.scss
index 2fe0e7cd..03736590 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -16,3 +16,6 @@ $darker-gray: #454545;
 $primary-purple: #5F288D;
 $delete-color: #F16359;
 
+$font-weight-medium: 500;
+$primary-gray: #707070;
+
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index a80c2ea8..bbbe1cbd 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-warning mb-4">
+<nav class="navbar navbar-expand-lg navbar-light mb-4">
   <a class="navbar-brand" [routerLink]="['/']">
     <img
       src="../../../assets/vote_monitor.png"
@@ -84,10 +84,16 @@
     </ul>
 
     <div *ngIf="isLoggedIn()" class="nav-item" ngbDropdown>
-      <span class="nav-link cursor-pointer" tabindex="0" ngbDropdownToggle id="navbarDropdown2" role="button">
+
+      <span class="nav-link cursor-pointer" tabindex="0" ngbDropdownToggle id="loggedInUser" role="button">
+        <img
+        src="../../../assets/user-icon.svg"
+        width="20"
+        alt=""
+      />
         {{ userName | titlecase }}
       </span>
-      <div ngbDropdownMenu aria-labelledby="navbarDropdown2" class="dropdown-menu dropdown-menu-right">
+      <div ngbDropdownMenu aria-labelledby="loggedInUser" class="dropdown-menu dropdown-menu-right">
         <a ngbDropdownItem class="cursor-pointer" (click)="logout()">{{ "LOGOUT" | translate }}</a>
       </div>
     </div>
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index f05abc3e..9ee5fa65 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -1,3 +1,4 @@
+@import "../../../variables";
 // the `.show` class is added when `ngbCollapse` is `true`
 // and removed when set to `false`
 
@@ -8,14 +9,14 @@
     max-height: 0;
     opacity: 0;
     display: block;
-    transition: max-height .2s;
+    transition: max-height 0.2s;
     pointer-events: none;
   }
 
   .collapse.show {
     max-height: 20rem;
     opacity: 1;
-    transition: max-height .2s, opacity .2s;
+    transition: max-height 0.2s, opacity 0.2s;
     pointer-events: all;
   }
 
@@ -23,4 +24,32 @@
     text-align: center;
     font-size: 1.2rem;
   }
-}
\ No newline at end of file
+}
+
+.navbar {
+  background-color: white;
+
+  .nav-item {
+    font-weight: $font-weight-medium;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    .active {
+      color: $primary-purple;
+      background-color: rgb(95, 40, 141, 10%);
+      border-radius: 2px;
+    }
+  }
+
+  .dropdown-toggle {
+    color: $primary-gray;
+
+    &::after{
+      color: $yellow;
+    } 
+  }
+
+  .user-icon{
+    background-image: '../../../assets/user-icon.svg';
+  }
+}
diff --git a/src/app/components/observers/observers.component.scss b/src/app/components/observers/observers.component.scss
index 87755592..1fb7ada1 100644
--- a/src/app/components/observers/observers.component.scss
+++ b/src/app/components/observers/observers.component.scss
@@ -1,6 +1,6 @@
 @import '../../../variables';
 
-$notif-color: #707070;
+$notif-color: $primary-gray;
 $input-text-color: #A3A3A3;
 $label-color: $darker-gray;
 $filter-zone-height: 2.8rem;
diff --git a/src/app/shared/base-button/base-button.component.scss b/src/app/shared/base-button/base-button.component.scss
index e918311b..2c278634 100644
--- a/src/app/shared/base-button/base-button.component.scss
+++ b/src/app/shared/base-button/base-button.component.scss
@@ -1,6 +1,6 @@
 @import "../../../variables";
 
-$base-foreground-color: #707070;
+$base-foreground-color: $primary-gray;
 
 $bg-yellow: #FFD628;
 $bg-yellow-foreground: #464646;
diff --git a/src/assets/user-icon.svg b/src/assets/user-icon.svg
new file mode 100644
index 00000000..c2990bbe
--- /dev/null
+++ b/src/assets/user-icon.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6667 17.5V15.8333C16.6667 14.9493 16.3155 14.1014 15.6904 13.4763C15.0653 12.8512 14.2174 12.5 13.3334 12.5H6.66671C5.78265 12.5 4.93481 12.8512 4.30968 13.4763C3.68456 14.1014 3.33337 14.9493 3.33337 15.8333V17.5" stroke="#FDDA44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99996 9.16667C11.8409 9.16667 13.3333 7.67428 13.3333 5.83333C13.3333 3.99238 11.8409 2.5 9.99996 2.5C8.15901 2.5 6.66663 3.99238 6.66663 5.83333C6.66663 7.67428 8.15901 9.16667 9.99996 9.16667Z" stroke="#FDDA44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/environments/environment.local.ts b/src/environments/environment.local.ts
index f4d3ffbe..6c6144c3 100644
--- a/src/environments/environment.local.ts
+++ b/src/environments/environment.local.ts
@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: false,
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index bbfad15a..b04eb6d0 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: true,
diff --git a/src/environments/environment.qa.ts b/src/environments/environment.qa.ts
index bbfad15a..b04eb6d0 100644
--- a/src/environments/environment.qa.ts
+++ b/src/environments/environment.qa.ts
@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: true,
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 2a8d2ed3..de0ccb5c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,7 @@
 // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 // The list of which env maps to which file can be found in `angular-cli.json`.
 
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: false,
diff --git a/yarn.lock b/yarn.lock
index 5ebfdefa..cb4e4c48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -235,6 +235,13 @@
   resolved "https://registry.yarnpkg.com/@angular/router/-/router-9.1.12.tgz#4f7fc170e1e7ef72ca1714dbc7a3888aedc33f2d"
   integrity sha512-+qCaXa9y0nsRhzjAYBqmGoQ2YkrdXgftZwuFDf6t4qEi30EXa0oS97KrlFq0M5GKdLIDGrbUm9PcdHSTOI+ZhA==
 
+"@auth0/angular-jwt@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@auth0/angular-jwt/-/angular-jwt-4.2.0.tgz#60f74552fbdd9404aeb55e41fa4d3d514f8465d6"
+  integrity sha512-kxHMztP0scAaKSfWRQ4y3ba5ggcGh2YVapC1UnimyE1I1Vs68gdSlV00bnpAK4aCaNut9IqtdGurgbljHt24Lw==
+  dependencies:
+    url "^0.11.0"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"