Merge branch 'master' into value-ticker-gaps

CHANGELOG.md

@@ -10,7 +10,8 @@
 - [#2403](https://github.com/poanetwork/blockscout/pull/2403) - Return gasPrice field at the result of gettxinfo method
 
 ### Fixes
-- [#2509](https://github.com/poanetwork/blockscout/pull/2509) - value-ticker gaps fix
+- [#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
@@ -18,7 +19,9 @@
 - [#2519](https://github.com/poanetwork/blockscout/pull/2519) - enable `First` page button in pagination
 - [#2517](https://github.com/poanetwork/blockscout/pull/2517) - remove duplicate indexes
 - [#2515](https://github.com/poanetwork/blockscout/pull/2515) - do not aggregate NFT token transfers
+- [#2514](https://github.com/poanetwork/blockscout/pull/2514) - Isolating of staking dapp css && extracting of non-critical css
 - [#2512](https://github.com/poanetwork/blockscout/pull/2512) - alert link fix
+- [#2509](https://github.com/poanetwork/blockscout/pull/2509) - value-ticker gaps fix
 - [#2508](https://github.com/poanetwork/blockscout/pull/2508) - logs view columns fix
 - [#2506](https://github.com/poanetwork/blockscout/pull/2506) - fix two active tab in the top menu
 - [#2503](https://github.com/poanetwork/blockscout/pull/2503) - Mitigate autocompletion library influence to page loading performance

apps/block_scout_web/assets/css/app.scss

@@ -24,7 +24,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/reboot";
 @import "node_modules/bootstrap/scss/grid";
 @import "node_modules/bootstrap/scss/code";
-@import "node_modules/bootstrap/scss/modal";
 @import "node_modules/bootstrap/scss/close";
 @import "node_modules/bootstrap/scss/buttons";
 @import "node_modules/bootstrap/scss/forms";
@@ -50,7 +49,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "node_modules/bootstrap/scss/navbar";
 @import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/tooltip";
 @import "node_modules/bootstrap/scss/transitions";
 
 // Code highlight
@@ -75,8 +73,11 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/filter";
 @import "components/button";
 @import "components/table";
-@import "components/qr-code";
 @import "components/navbar";
+@import "components/alerts";
+
+@import "theme/dark-theme";
+
 @import "components/animations";
 @import "components/card";
 @import "components/tile";
@@ -93,42 +94,30 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/transaction-input";
 @import "components/coin-balance-tile";
 @import "components/highlight";
-@import "components/copy_icon";
 @import "components/btn_full";
 @import "components/btn_line";
-@import "components/stakes";
 @import "components/check";
+@import "components/stakes_variables";
 @import "components/stakes_table";
 @import "components/i_tooltip";
 @import "components/check_tooltip";
 @import "components/tooltip";
-@import "components/progress_from_to";
-@import "components/stakes_empty_content";
-@import "components/stakes_btn_remove_pool";
-@import "components/modal";
-@import "components/modal_validator_info";
 @import "components/form";
-@import "components/stakes_progress";
-@import "components/modal_status";
-@import "components/modal_bottom_disclaimer";
-@import "components/modal_become_candidate";
-@import "components/modal_stake";
 @import "components/btn_copy";
 @import "components/btn_qr";
 @import "components/btn_address_card";
 @import "components/btn_dropdown_line";
 @import "components/transaction";
 @import "components/api";
-@import "components/alerts";
 @import "components/verify_other_explorers";
 @import "components/errors";
 @import "components/log-search";
 @import "components/radio";
+@import "components/modal_variables";
 @import "components/network-selector";
 @import "components/new_smart_contract";
 @import "components/radio_big";
 @import "components/btn_no_border";
-@import "theme/dark-theme";
 
 :export {
   dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;

apps/block_scout_web/assets/css/components/_modal.scss

@@ -1,9 +1,3 @@
-$modal-overlay-color: rgba($primary, 0.9) !default;
-$modal-horizontal-padding: 30px !default;
-$modal-vertical-padding: 25px !default;
-$modal-border-radius: 10px !default;
-$modal-gray-background: #f6f7f9 !default;
-
 .modal-backdrop {
   background-color: $modal-overlay-color;
 

apps/block_scout_web/assets/css/components/_modal_variables.scss

@@ -0,0 +1,5 @@
+$modal-overlay-color: rgba($primary, 0.9) !default;
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+$modal-border-radius: 10px !default;
+$modal-gray-background: #f6f7f9 !default;

apps/block_scout_web/assets/css/components/_stakes_variables.scss

@@ -0,0 +1,2 @@
+$stakes-banned-background: #fff3f7 !default;
+$stakes-banned-color: #ff7986 !default;

apps/block_scout_web/assets/css/components/stakes/_stakes.scss

@@ -1,8 +1,6 @@
 $stakes-dashboard-copy-icon-color: $copy-icon-color !default;
 $stakes-address-color: $primary !default;
 $stakes-control-color: $primary !default;
-$stakes-banned-color: #ff7986 !default;
-$stakes-banned-background: #fff3f7 !default;
 $stakes-stats-item-color: #fff !default;
 $stakes-stats-item-border-color: #fff !default;
 

apps/block_scout_web/assets/css/non-critical.scss

@@ -0,0 +1,13 @@
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+
+@import "components/qr-code";
+@import "components/modal_variables";
+@import "components/modal";
+@import "components/modal_status";

apps/block_scout_web/assets/css/stakes.scss

@@ -0,0 +1,20 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "components/stakes_variables";
+@import "components/stakes/copy_icon";
+@import "components/stakes/stakes";
+@import "components/stakes/progress_from_to";
+@import "components/stakes/stakes_empty_content";
+@import "components/stakes/stakes_btn_remove_pool";
+@import "components/modal_variables";
+@import "components/stakes/stakes_progress";
+@import "components/stakes/modal_stake";
+@import "components/stakes/modal_become_candidate";
+@import "components/stakes/modal_validator_info";
+@import "components/stakes/modal_bottom_disclaimer";

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;

apps/block_scout_web/assets/js/pages/address/logs.js

@@ -45,7 +45,7 @@ const elements = {
   },
   '[data-search]': {
     render ($el, state) {
-      if (state.emptyResponse) {
+      if (state.emptyResponse && !state.isSearch) {
         return $el.hide()
       }
 

apps/block_scout_web/assets/js/pages/stakes.js

@@ -0,0 +1 @@
+import '../../css/stakes.scss'

apps/block_scout_web/assets/webpack.config.js

@@ -69,9 +69,13 @@ const awesompleteJs = {
 
 const appJs =
   {
-    entry: './js/app.js',
+    entry: {
+      app: './js/app.js',
+      stakes: './js/pages/stakes.js',
+      'non-critical': './css/non-critical.scss',
+    },
     output: {
-      filename: 'app.js',
+      filename: '[name].js',
       path: path.resolve(__dirname, '../priv/static/js')
     },
     optimization: {
@@ -120,7 +124,7 @@ const appJs =
     },
     plugins: [
       new MiniCssExtractPlugin({
-        filename: '../css/app.css'
+        filename: '../css/[name].css'
       }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
+    <link rel="preload" href="/css/non-critical.css" as="style" onload="this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="/css/non-critical.css"></noscript>
 
     <link rel="apple-touch-icon" sizes="180x180" href="<%= static_path(@conn, "/apple-touch-icon.png") %>">
     <link rel="icon" type="image/png" sizes="32x32" href="<%= static_path(@conn, "/favicon-32x32.png") %>">

apps/block_scout_web/priv/gettext/default.pot

@@ -62,7 +62,7 @@ msgid "(query)"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:36
+#: lib/block_scout_web/templates/layout/app.html.eex:38
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:53
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -184,7 +184,7 @@ msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:52
 msgid "Blocks Indexed"
 msgstr ""
 
@@ -457,7 +457,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -489,7 +489,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Less than"
 msgstr ""
 
@@ -510,7 +510,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -629,7 +629,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:55
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Price"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -62,7 +62,7 @@ msgid "(query)"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:36
+#: lib/block_scout_web/templates/layout/app.html.eex:38
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:53
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -184,7 +184,7 @@ msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:52
 msgid "Blocks Indexed"
 msgstr ""
 
@@ -376,7 +376,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address/_balance_card.html.eex:15
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:21
-#: lib/block_scout_web/templates/layout/app.html.eex:56
+#: lib/block_scout_web/templates/layout/app.html.eex:58
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:20
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:30
 #: lib/block_scout_web/templates/transaction/overview.html.eex:179
@@ -457,7 +457,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -489,7 +489,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Less than"
 msgstr ""
 
@@ -510,7 +510,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 #: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
@@ -629,7 +629,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:55
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Price"
 msgstr ""