Merge pull request #3325 from poanetwork/vb-dark-theme-fix

Dark theme improvements

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

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;
     }
 }
 

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;
     }
 }

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;

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 {