new navbar style

src/app/shared/common/domainfilter/domainfilter.component.css

@@ -35,3 +35,7 @@
         max-height: 450px;
         overflow-y: auto;
 }
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
+        background-color: #233354;
+        background-image: unset;
+}

src/app/shared/common/domainfilter/domainfilter.component.html

 <span [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" class="dropdown dropdown-domains">
 		<a class="dropdown-toggle" data-close-others="true" data-toggle="dropdown" href="#">
-			<span style="color: gray;">{{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }}<span class="caret"></span></span>
+			<span style="color: #6D788E;">{{ "FILTER.DOMAIN" | translate }}: {{ getCurrent() }}<span class="caret"></span></span>
 		</a>
 		<ul class="dropdown-menu" [ngClass]="{'long-domain-list': (domains | async)?.length > 16}">
 			<input *ngIf="(domains | async)?.length > 16" class="search" type="text" [(ngModel)]="searchTerm"

src/app/shared/navbar/navbar.component.css

@@ -26,6 +26,10 @@
 .lang-circle-icon{
   height: 26px;
 }
+.navbar-right{
+  display:flex;
+  align-items: center;
+}
 
 @media (max-width: 1199px) {
   .navbar-collapse .nav > .divider-vertical {
@@ -81,10 +85,11 @@
 }
 
 .navbar .divider-vertical {
-  height: 50px;
+  height: 30px;
+  width: 1px;
   margin: 0 5px;
-  border-right: 2px solid #ffffff;
-  border-left: 2px solid #e6e6e6;
+  background-color: #6D788E;
+  border-radius: 99px;
 }
 
 .navbar-inverse .divider-vertical {
@@ -93,8 +98,18 @@
 }
 
 .btn{
+  background: transparent;
   margin-left: 5px;
 }
+.btn:hover:active:focus{
+  color:#142548;
+  background: #D1D1D1;
+}
+.btn:focus{
+  color:#142548;
+  background: #D1D1D1;
+  outline: none;
+}
 
 .navbar-list, .navbar-list:link {
   color: rgb(51, 51, 51);
@@ -141,6 +156,10 @@
   padding-bottom: 10px;
   line-height: 20px;
 }
+.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{
+  background-color: #233354;
+  background-image: unset;
+}
 
 .dropdown-menu>li>span {
   display: block;
@@ -172,3 +191,22 @@
   overflow: hidden;
   border-top: 1px solid #e9ecef;
 }
+.navbar-default{
+  padding: 5px 0;
+  border-top: none;
+  color: #6D788E;
+}
+.navbar-default .navbar-nav>li>a{
+  color: #6D788E;
+}
+.navbar-default .navbar-nav>.active>a{
+  border-radius: 5px;
+  color: #142548;
+  /*font-weight: bold;*/
+  background-color: #D1D1D1;
+}
+.navbar-default .navbar-nav>.open>a{
+  border-radius: 5px;
+  color: #142548;
+  background-color: #D1D1D1;
+}

src/styles.css

@@ -54,3 +54,20 @@
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 14px;
 }
+.btn-primary{
+    background:#233354;
+    border:none;
+}
+.btn-primary:hover{
+    background: #414f6b;
+    border:none;
+}
+.btn-primary[disabled]{
+    text-shadow:none;
+    background: #414f6b;
+    cursor: not-allowed;
+    /*color: #61b4f9;*/
+}
+.btn-primary[disabled]:hover{
+    background: #414f6b;
+}