From 347e68f1200ad819e3e7fff7bd8e96d00e4ed4f4 Mon Sep 17 00:00:00 2001
From: Victor Baranov <baranov.viktor.27@gmail.com>
Date: Wed, 30 Sep 2020 17:02:38 +0300
Subject: [PATCH] Various dark theme fixes

---
 CHANGELOG.md                                  |  1 +
 .../css/components/_custom_tooltips.scss      |  2 +-
 .../assets/css/components/_label.scss         |  4 +-
 .../assets/css/components/_navbar.scss        |  2 +-
 .../assets/css/theme/_dark-theme.scss         | 56 ++++++++++++++++++-
 5 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2fc97213d1..f5b06ed8ac 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@
 - [#3256](https://github.com/poanetwork/blockscout/pull/3256) - Fix for invisible validator address at block page and wrong alert text color at xDai
 
 ### Chore
+- [#3325](https://github.com/poanetwork/blockscout/pull/3325) - Dark theme improvements
 - [#3316](https://github.com/poanetwork/blockscout/pull/3316), [#3317](https://github.com/poanetwork/blockscout/pull/3317) - xDai smile logo
 - [#3315](https://github.com/poanetwork/blockscout/pull/3315) - Environment variable to disable Bridge market cap updater
 - [#3308](https://github.com/poanetwork/blockscout/pull/3308) - Fixate latest stable release of Elixir, Node, Postgres
diff --git a/apps/block_scout_web/assets/css/components/_custom_tooltips.scss b/apps/block_scout_web/assets/css/components/_custom_tooltips.scss
index 6a1b6fa382..fcce524a60 100644
--- a/apps/block_scout_web/assets/css/components/_custom_tooltips.scss
+++ b/apps/block_scout_web/assets/css/components/_custom_tooltips.scss
@@ -13,7 +13,7 @@ $tooltip-background-color: $btn-line-color !default;
 .tooltip-inversed-color {
     .tooltip-inner {
         background-color: #fff !important;
-        color: $btn-line-color !important;
+        color: #333 !important;
     }
 }
 
diff --git a/apps/block_scout_web/assets/css/components/_label.scss b/apps/block_scout_web/assets/css/components/_label.scss
index 20dd9fa3d5..1cc4516cc8 100644
--- a/apps/block_scout_web/assets/css/components/_label.scss
+++ b/apps/block_scout_web/assets/css/components/_label.scss
@@ -10,10 +10,10 @@
     }
     &.omni {
         background: $primary;
-        color: white;
+        color: #fff;
     }
     &.amb {
         background: $secondary;
-        color: white;
+        color: #fff;
     }
 }
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss
index 0feaf72195..1690a5ec23 100644
--- a/apps/block_scout_web/assets/css/components/_navbar.scss
+++ b/apps/block_scout_web/assets/css/components/_navbar.scss
@@ -152,7 +152,7 @@ $navbar-logo-width: auto !default;
     }
 
     @include media-breakpoint-up(xl) {
-      width: 310px;
+      width: 290px;
     }
     @media (min-width: 1366px) {
       width: 380px;
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
index 35ae9b1937..eec7d31561 100644
--- a/apps/block_scout_web/assets/css/theme/_dark-theme.scss
+++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -780,7 +780,59 @@ $labels-dark: #8a8dba; // header nav, labels
 	}
 
 	.logo-text {
-		color: white;
+		color: #fff;
+	}
+
+	.bridged-token-label.omni {
+		background-color: $labels-dark;
+	}
+
+	.dropdown-item {
+		.external-link-icon {
+			path {
+			  fill: #fff;
+			}
+		}
+
+		& {
+			&.active,
+			&:hover,
+			&:focus {
+			  .external-link-icon {
+				path {
+				  fill: #fff;
+				}
+			  }
+			}
+		  }
+	}
+
+	.tooltip-inversed-color {
+		.tooltip-inner {
+			background-color: $btn-line-color !important;
+			color: #fff !important;
+		}
+	}
+
+	.tooltip-inversed-color.bs-tooltip-top .arrow::before,
+	.tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+		border-top-color: $btn-line-color !important;
+	}
+		
+	.tooltip-inversed-color.bs-tooltip-right .arrow::before,
+	.tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+		border-right-color: $btn-line-color !important;
+	}
+		
+	.tooltip-inversed-color.bs-tooltip-bottom .arrow::before,
+	.tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+		border-bottom-color: $btn-line-color !important;
+	}
+		
+		
+	.tooltip-inversed-color.bs-tooltip-left .arrow::before,
+	.tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+		border-left-color: $btn-line-color !important;
 	}
 }
 
@@ -791,7 +843,7 @@ $labels-dark: #8a8dba; // header nav, labels
 
 .dark-theme-applied .dropdown-item {
 	background-color: $dark-light!important;
-    color: #fff!important;
+	color: #fff !important;
 }
 
 .dark-theme-applied .dropdown-item.active:not(.header), .dark-theme-applied .dropdown-item:not(.header):hover, .dark-theme-applied .dropdown-item:not(.header):focus {