Merge pull request #2524 from maxgrapps/dark-theme-ui-issues

Totally? fix dark theme

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Fixes
 - [#2543](https://github.com/poanetwork/blockscout/pull/2543) - do not hide search input during logs search
+- [#2524](https://github.com/poanetwork/blockscout/pull/2524) - fix dark theme validator data styles
 - [#2532](https://github.com/poanetwork/blockscout/pull/2532) - don't show empty token transfers on the transaction overview page
 - [#2528](https://github.com/poanetwork/blockscout/pull/2528) - fix coin history chart data
 - [#2520](https://github.com/poanetwork/blockscout/pull/2520) - Hide loading message when fetching is failed

apps/block_scout_web/assets/css/theme/_dai_variables.scss

@@ -38,6 +38,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
 
 //links & tile
 $tile-body-a-color: $secondary;

apps/block_scout_web/assets/css/theme/_dark-theme.scss

@@ -234,7 +234,7 @@ $labels-dark: #8a8dba; // header nav, labels
 		}
 	}
 
-	.btn-copy-icon, .btn-qr-icon {
+	.btn-copy-icon, .btn-qr-icon, .btn-address-card-icon {
 		border-color: $dark-primary;
 		path {
 			fill: $dark-primary;
@@ -578,9 +578,41 @@ $labels-dark: #8a8dba; // header nav, labels
 			}
 		}
 	}
-	.verify-other-explorers-cell {
-		.exp-logo {
-			color: #333 !important;
+
+	#explorersModal {
+		.modal-title {
+			color: #fff;
+		}
+
+		.text-muted {
+			color: $labels-dark;
+		}
+
+		.modal-footer {
+			border-top-color: darken($labels-dark, 30);
+		}
+
+		.modal-content {
+			background-color: $dark-light-bg;
+
+			.btn-primary {
+				background-color: $dark-primary;
+				border-color: $dark-primary;
+				&:hover {
+					background-color: $dark-primary;
+					border-color: $dark-primary;
+				}
+			}
+		}
+
+		.verify-other-explorers-cell {
+			.exp-logo {
+				color: #fff;
+			}
+		}
+
+		.close {
+			color: #fff;
 		}
 	}
 
@@ -681,8 +713,69 @@ $labels-dark: #8a8dba; // header nav, labels
 		border-right-color: #3f436b !important;
 	}
 
-	// alert link
+	// 'text dark' label
+	.text-dark {
+		color: #fff;
+	}
+
+	// validator info
+	#validatorModal {
+		.modal-title {
+			color: #fff;
+		}
+
+		.text-muted {
+			color: $labels-dark;
+		}
+
+		.modal-footer {
+			border-top-color: darken($labels-dark, 30);
+		}
+
+		.modal-content {
+			background-color: $dark-light-bg;
+
+			.btn-primary {
+				background-color: $dark-primary;
+				border-color: $dark-primary;
+				&:hover {
+					background-color: $dark-primary;
+					border-color: $dark-primary;
+				}
+			}
+		}
+
+		.close {
+			color: #fff;
+		}
+	}
+    
+	// alerts
 	.alert-link {
-		color: $dark-secondary;
+		color: $labels-dark;
+	}
+
+	.alert-danger {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		.alert-link {
+			color: $alert-danger-color;
+		}
+	}
+
+	.tile .alert {
+		background: rgba(#000, .1);
+	}
+
+	// primary buttons
+	.btn-full-primary, .button-primary {
+		background: $dark-primary;
+		border-color: $dark-primary;
+		color: #fff;
+		&:hover {
+			background: darken($dark-primary, 6);
+			border-color: darken($dark-primary, 6);
+			color: #fff;
+		}
 	}
 }

apps/block_scout_web/assets/css/theme/_ethereum_classic_variables.scss

@@ -34,6 +34,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $tertiary; // button border and font color && hover bg color
 $btn-copy-color: $tertiary; // btn copy
 $btn-qr-color: $tertiary; // btn qr-code
+$btn-address-card-icon-color: $tertiary; // btn address color
 
 //links & tile
 $tile-body-a-color: $tertiary;

apps/block_scout_web/assets/css/theme/_ethereum_variables.scss

@@ -37,6 +37,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
 
 //links & tile
 $tile-body-a-color: $secondary;

apps/block_scout_web/assets/css/theme/_goerli_variables.scss

@@ -43,6 +43,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $sub-accent-color; // button border and font color && hover bg color
 $btn-copy-color: $sub-accent-color; // btn copy
 $btn-qr-color: $sub-accent-color; // btn qr-code
+$btn-address-card-icon-color: $sub-accent-color; // btn address color
 
 //links & tile
 $tile-body-a-color: $sub-accent-color;

apps/block_scout_web/assets/css/theme/_kovan_variables.scss

@@ -38,6 +38,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $tertiary; // button border and font color && hover bg color
 $btn-copy-color: $tertiary; // btn copy
 $btn-qr-color: $tertiary; // btn qr-code
+$btn-address-card-icon-color: $tertiary; // btn address color
 
 //links & tile
 $tile-body-a-color: $tertiary;

apps/block_scout_web/assets/css/theme/_lukso_variables.scss

@@ -44,6 +44,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $primary; // button border and font color && hover bg color
 $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
 
 // card
 $card-background-1: $primary;

apps/block_scout_web/assets/css/theme/_neutral_variables.scss

@@ -40,6 +40,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $primary; // button border and font color && hover bg color
 $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
 
 //links & tile
 $tile-body-a-color: $primary;

apps/block_scout_web/assets/css/theme/_poa_variables.scss

@@ -40,6 +40,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $primary; // button border and font color && hover bg color
 $btn-copy-color: $primary; // btn copy
 $btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
 
 //links & tile
 $tile-body-a-color: $primary;

apps/block_scout_web/assets/css/theme/_rinkeby_variables.scss

@@ -37,6 +37,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
 
 //links & tile
 $tile-body-a-color: $secondary;

apps/block_scout_web/assets/css/theme/_ropsten_variables.scss

@@ -37,6 +37,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
 
 //links & tile
 $tile-body-a-color: $secondary;

apps/block_scout_web/assets/css/theme/_rsk_variables.scss

@@ -38,6 +38,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $secondary; // button border and font color && hover bg color
 $btn-copy-color: $secondary; // btn copy
 $btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
 
 // card
 $card-background-1: $secondary;

apps/block_scout_web/assets/css/theme/_sokol_variables.scss

@@ -49,6 +49,7 @@ $btn-line-bg: #fff; // button bg
 $btn-line-color: $sub-accent-color; // button border and font color && hover bg color
 $btn-copy-color: $sub-accent-color; // btn copy
 $btn-qr-color: $sub-accent-color; // btn qr-code
+$btn-address-card-icon-color: $sub-accent-color; // btn address color
 
 //links & tile
 $tile-body-a-color: $sub-accent-color;