Merge pull request #4942 from mempool/natsoni/fix-header-color-theme

Fix header color theme

frontend/src/app/components/liquid-master-page/liquid-master-page.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header class="sticky-header">
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <nav class="navbar navbar-expand-md navbar-dark">
   <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
     <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
       <div class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">

frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss

@@ -17,6 +17,7 @@ fa-icon {
 .navbar {
   z-index: 100;
   min-height: 64px;
+  background-color: var(--bg);
 }
 
 li.nav-item {
@@ -152,7 +153,7 @@ nav {
   }
 }
 .navbar-dark .navbar-nav .nav-link {
-  color: #f1f1f1;
+  color: var(--icon);
 }
 
 .current-network-svg {

frontend/src/app/components/master-page/master-page.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header *ngIf="headerVisible" class="sticky-header">
 
-  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <nav class="navbar navbar-expand-md navbar-dark">
   <!-- Hamburger -->
   <ng-container *ngIf="servicesEnabled">
     <div *ngIf="user" class="profile_image_container" [class]="{'anon': !user.imageMd5}" (click)="hamburgerClick($event)">

frontend/src/app/components/master-page/master-page.component.scss

@@ -18,6 +18,7 @@ fa-icon {
   z-index: 100;
   min-height: 64px;
   width: 100%;
+  background-color: var(--bg);
 }
 
 li.nav-item {
@@ -179,7 +180,7 @@ nav {
   }
 }
 .navbar-dark .navbar-nav .nav-link {
-  color: #f1f1f1;
+  color: var(--icon);
 }
 
 .subdomain_logo {

frontend/src/styles.scss

@@ -72,6 +72,7 @@ $dropdown-link-active-bg: $active-bg;
   --tertiary: #{$tertiary};
   --success: #{$success};
   --info: #{$info};
+  --icon: #f1f1f1;
 
   --box-bg: #24273e;
   --stat-box-bg: #181b2d;

frontend/src/theme-contrast.scss

@@ -69,6 +69,7 @@ $dropdown-link-active-bg: $active-bg;
   --tertiary: #{$tertiary};
   --success: #{$success};
   --info: #{$info};
+  --icon: #f1f1f1;
 
   --box-bg: #171c2a;
   --stat-box-bg: #0b1018;

frontend/src/theme-wiz.scss

@@ -69,6 +69,7 @@ $dropdown-link-active-bg: $active-bg;
   --tertiary: #{$tertiary};
   --success: #{$success};
   --info: #{$info};
+  --icon: #f1f1f1;
 
   --box-bg: #171c2a;
   --stat-box-bg: #0b1018;