Style navbar (#295)

src/_variables.scss

@@ -16,3 +16,6 @@ $darker-gray: #454545;
 $primary-purple: #5F288D;
 $delete-color: #F16359;
 
+$font-weight-medium: 500;
+$primary-gray: #707070;
+

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>

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,19 +9,47 @@
     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;
   }
 
   .nav-item {
     text-align: center;
     font-size: 1.2rem;
   }
-}
+}
+
+.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';
+  }
+}

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;

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;

src/environments/environment.local.ts

@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: false,

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: true,

src/environments/environment.qa.ts

@@ -1,4 +1,4 @@
-import { EnvironmentConfig } from 'src/typings';
+import { EnvironmentConfig } from '../typings';
 
 export const environment: EnvironmentConfig = {
   production: true,

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,

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"