From 0018b19dca45d1d2dbf89e74a292f79a309739e6 Mon Sep 17 00:00:00 2001
From: maxgrapps <maxgrapps@gmail.com>
Date: Sat, 20 Jul 2019 12:35:49 +0300
Subject: [PATCH] dark theme

---
 apps/block_scout_web/assets/css/app.scss      |   1 +
 .../assets/css/theme/_base_variables.scss     |   3 +
 .../assets/css/theme/_dark-theme.scss         | 423 ++++++++++++++++++
 .../assets/css/theme/_neutral_variables.scss  |   7 +-
 .../assets/css/theme/_poa_variables.scss      |   7 +-
 apps/block_scout_web/assets/js/app.js         |   1 +
 .../assets/js/pages/dark-mode-switcher.js     |  10 +
 .../templates/layout/_topnav.html.eex         |  22 +-
 .../templates/layout/app.html.eex             |   5 +
 apps/block_scout_web/priv/gettext/default.pot |  52 +--
 10 files changed, 502 insertions(+), 29 deletions(-)
 create mode 100644 apps/block_scout_web/assets/css/theme/_dark-theme.scss
 create mode 100644 apps/block_scout_web/assets/js/pages/dark-mode-switcher.js

diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
index cf79ee46e8..d9c42e564e 100644
--- a/apps/block_scout_web/assets/css/app.scss
+++ b/apps/block_scout_web/assets/css/app.scss
@@ -128,6 +128,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @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;
diff --git a/apps/block_scout_web/assets/css/theme/_base_variables.scss b/apps/block_scout_web/assets/css/theme/_base_variables.scss
index 9f1b82c887..2238327bd4 100644
--- a/apps/block_scout_web/assets/css/theme/_base_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_base_variables.scss
@@ -70,7 +70,10 @@ $colors: map-merge(
 );
 
 $primary: $indigo !default;
+$dark-primary: #9b62ff !default;
+$dark-primary-alternate: #9b62ff !default;
 $secondary: #7dd79f !default;
+$dark-secondary: #87e1a9 !default;
 $tertiary: $purple !default;
 $success: $green !default;
 $info: $cyan !default;
diff --git a/apps/block_scout_web/assets/css/theme/_dark-theme.scss b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
new file mode 100644
index 0000000000..a0884e6348
--- /dev/null
+++ b/apps/block_scout_web/assets/css/theme/_dark-theme.scss
@@ -0,0 +1,423 @@
+$body-dark: #1c1d31; // body background
+$dark-bg: #22223a; // hero shade
+$dark-light-bg: #282945; // pills bg shade
+$dark-light: #313355; // tile light top share
+$labels-dark: #8a8dba; // header nav, labels
+
+// Switcher
+.dark-mode-changer {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	margin-right: 5px;
+	outline: none !important;
+	box-shadow: none !important;
+	transition: .2s ease-in;
+	&:hover {
+		opacity: .8;
+	}
+	svg path {
+		fill: #828ba0;
+	}
+	&--dark {
+		svg path {
+			fill: $dark-primary;
+		}
+	}
+}
+
+.dark-theme-applied {
+	color: #fff;
+
+	// navbar
+	.navbar.navbar-primary {
+		background-color: $dark-light-bg;
+	}
+	.navbar-brand .navbar-logo {
+		filter: brightness(0) invert(1);
+	}
+	.navbar.navbar-primary .navbar-nav .nav-link {
+		color: $labels-dark;
+		.nav-link-icon {
+			svg path {
+				fill: $labels-dark;
+			}
+		}
+		&.active, &:hover {
+			.nav-link-icon {
+				svg path {
+					fill: $dark-primary;
+				}
+			}
+			&:before {
+				background-color: $dark-primary;
+			}
+		}
+	}
+	.navbar.navbar-primary .form-control {
+		background-color: $dark-bg;
+		border-color: $dark-bg;
+		color: #fff;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+
+	// footer
+	.footer {
+		background: $dark-light-bg;
+		color: $labels-dark;
+	}
+	.footer-social-icon,
+	.footer-link {
+		color: $labels-dark;
+	}
+	.footer-social-icon:hover,
+	.footer-link:hover {
+		color: #fff;
+	}
+	.footer-list ul li::before {
+		background-color: $dark-secondary;
+	}
+
+	// hero stats
+
+	.layout-container .dashboard-banner-container {
+		background-image: none;
+		background-color: $dark-bg;
+	}
+	.dashboard-banner-network-plain-container,
+	.dashboard-banner-network-plain-container::after {
+		background-color: $dark-light-bg;
+	}
+	.dashboard-banner-network-stats-label,
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-label {
+		color: $labels-dark;
+	}
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(1)::before {
+		background-color: $dark-primary;
+	}
+	.dashboard-banner-network-stats-item::before {
+		background-color: $dark-secondary;
+	}
+	.dashboard-banner-chart-legend .dashboard-banner-chart-legend-item:nth-child(2)::before {
+		background-color: $dark-secondary;
+	}
+
+	// main container, layout, cards
+	.layout-container main {
+		background-color: $body-dark;
+	}
+
+	.card {
+		background-color: $dark-light-bg;
+		box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5);
+	}
+
+	.card-header {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+
+	.address-detail-hash-title {
+		color: #fff;
+	}
+
+	.card-tabs {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+
+	.card-tab {
+		background-color: transparent;
+		&:hover:not(.active) {
+			background-color: rgba($dark-primary, .15);
+			color: $dark-primary;
+		}
+		&.active {
+			background-color: $dark-primary-alternate;
+			color: #fff;
+		}
+	}
+
+	.card-background-1 {
+		background-color: $dark-primary-alternate;
+	}
+
+	// Components
+	a {
+		color: $dark-primary;
+	}
+
+	.tile {
+		border-top-color: $dark-light;
+		border-bottom-color: $dark-light;
+		border-right-color: $dark-light;
+		background-color: $dark-light;
+		color: $labels-dark;
+		&:not([class^="tile tile-type"]) {
+			border-left-color: $dark-light;
+		}
+		&.tile-type-coin-balance {
+			border-left-color: $dark-light;
+		}
+		.tile-title {
+			color: #fff;
+		}
+		.tile-transaction-type-block {
+			background-color: transparent;
+		}
+	}
+	.tile-bottom-contents {
+		background-color: $dark-bg;
+	}
+	a.tile-title {
+		color: #fff !important;
+	}
+	.tile.tile-type-block .tile-transaction-type-block a {
+		color: #fff;
+	}
+	.fade-up-blocks-chain .tile-type-block-animation {
+		background-color: $dark-light;
+		border-top-color: $dark-light;
+		border-right-color: $dark-light;
+		border-bottom-color: $dark-light;
+	}
+	.fade-up-blocks-chain .tile-type-block-animation:after {
+		background-color: $dark-light;
+	}
+	.cube-animation-title {
+		color: $labels-dark;
+	}
+	.tile .tile-body a,
+	.tile span[data-address-hash] { color: $dark-primary; }
+	.fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
+		background-color: $dark-primary;
+	}
+	.tile.tile-type-block {
+		border-left-color: $dark-primary
+	}
+	.tile.tile-type-block .tile-status-label {
+		color: $dark-primary;
+	}
+	.tile.tile-type-block .tile-transaction-type-block {
+		border-right-color: $dark-primary;
+		border-top-color: $dark-primary;
+		border-bottom-color: $dark-primary;
+	}
+	.tile .progress {
+		background-color: rgba(#fff, .2);
+	}
+	.tile .progress .progress-bar {
+		background-color: $dark-primary;
+	}
+	.tile .tile-title-lg:not([data-balance-change-sign]) {
+		color: $dark-primary;
+	}
+
+	// btns
+
+	.btn-line {
+		background-color: transparent;
+		border-color: $dark-primary;
+		color: $dark-primary;
+		&:hover {
+			border-color: $dark-primary;
+			background-color: $dark-primary;
+			color: #fff;
+		}
+	}
+
+	.btn-copy-icon, .btn-qr-icon {
+		border-color: $dark-primary;
+		path {
+			fill: $dark-primary;
+		}
+		&:hover {
+			background-color: $dark-primary;
+			path {
+				fill: #fff;
+			}
+		}
+	}
+
+	// pagination
+	.pagination-container .pagination .page-link {
+		color: $labels-dark;
+		border-color: $dark-light;
+		background-color: $dark-light;
+		&:not(.no-hover):hover {
+			color: #fff;
+			background-color: $dark-primary;
+			path {
+				fill: #fff;
+			}
+		}
+		&[disabled] {
+			color: $labels-dark;
+			border-color: $dark-light;
+			background-color: $dark-light;
+		}
+	}
+
+	// dropdown
+	.dropdown-menu {
+		background-color: $dark-light;
+		border-left-color: $dark-light;
+		border-right-color: $dark-light;
+		border-bottom-color: $dark-light;
+	}
+
+	.dropdown-item {
+		color: #fff;
+		&:hover {
+			background-color: rgba(#fff, .1);
+		}
+	}
+	.dropdown-item.active {
+		background-color: $dark-primary;
+	}
+
+	.btn-dropdown-line {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		color: $labels-dark;
+	}
+
+	// table
+	.stakes-table-th {
+		background-color: $dark-light;
+		color: $labels-dark;
+	}
+	.stakes-td {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.table th, .table td {
+		border-top-color: darken($labels-dark, 30);
+	}
+	hr {
+		border-top-color: darken($labels-dark, 30);
+	}
+
+	// api's
+	.api-anchors-list {
+		background-color: $dark-light;
+	}
+	.api-doc-list-item {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.card-subtitle,
+	.api-anchors-list-item-title,
+	.api-doc-list-item-title {
+		color: #fff;
+	}
+	.api-text-monospace {
+		color: $dark-primary;
+	}
+	.api-text-monospace-background {
+		background-color: rgba($dark-primary, .15);
+	}
+	.badge.badge-neutral {
+		background-color: rgba($dark-primary, .15);
+		color: $dark-primary;
+	}
+
+	// download csv button
+	.download-all-transactions .download-all-transactions-link svg path {
+		fill: $dark-primary;
+	}
+
+	// tooltips
+	// .tooltip-inner {
+	// 	background-color: $dark-primary;
+	// }
+	// .tooltip-arrow {
+	// 	border-top-color: $dark-primary;
+	// }
+
+	//network select
+	.network-selector-overlay {
+		background-color: rgba($dark-primary, .9);
+	}
+	.network-selector {
+		background-color: $dark-light-bg;
+	}
+	.network-selector-title {
+		color: #fff;
+	}
+	.network-selector-text {
+		color: $labels-dark;
+	}
+	.network-selector-close path {
+		fill: #fff;
+	}
+	.network-selector-search-container {
+		background-color: $dark-light;
+	}
+	.network-selector-search-container path {
+		fill: $labels-dark;
+	}
+	.network-selector-search-input {
+		color: #fff !important;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+	.network-selector-tab {
+		color: $labels-dark;
+		&:hover, &.active {
+			color: #fff;
+		}
+		&.active {
+			&:after {
+				background-color: $dark-primary;
+			}
+		}
+	}
+	.network-selector-item,
+	.network-selector-tabs-container {
+		border-bottom-color: darken($labels-dark, 30);
+	}
+	.network-selector-item-title {
+		color: #fff;
+	}
+	.network-selector-item-type {
+		color: $labels-dark;
+	}
+	.radio .radio-icon {
+		border-color: $labels-dark
+	}
+	.network-selector-item-url:hover .network-selector-item-type {
+		color: #fff;
+	}
+
+	//coin dropdown
+	.token-balance-dropdown.dropdown-menu {
+		border-color: $dark-light !important;
+		box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important;
+	}
+	.token-balance-dropdown .dropdown-search-icon path {
+		fill: $labels-dark;
+	}
+	.token-balance-dropdown .dropdown-search-field {
+		background-color: $dark-light;
+		border-color: $dark-light;
+		color: #fff;
+		&::placeholder {
+			color: $labels-dark;
+		}
+	}
+	.token-balance-dropdown[aria-labelledby="dropdown-tokens"] .dropdown-items .dropdown-item:hover {
+		color: #fff !important;
+	}
+	.dropdown-header {
+		color: $labels-dark;
+	}
+	.border-bottom {
+		border-bottom-color: darken($labels-dark, 30) !important;
+	}
+
+}
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
index 4033934dd6..266f8b83af 100644
--- a/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_neutral_variables.scss
@@ -71,4 +71,9 @@ $api-text-monospace-color: $primary;
   .dropdown-items .dropdown-item:hover {
     color: $primary !important;
   }
-} 
\ No newline at end of file
+}
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #9b62ff; 
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
index 4033934dd6..266f8b83af 100644
--- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss
+++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss
@@ -71,4 +71,9 @@ $api-text-monospace-color: $primary;
   .dropdown-items .dropdown-item:hover {
     color: $primary !important;
   }
-} 
\ No newline at end of file
+}
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #9b62ff; 
\ No newline at end of file
diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js
index 25de7b2688..89059dd306 100644
--- a/apps/block_scout_web/assets/js/app.js
+++ b/apps/block_scout_web/assets/js/app.js
@@ -35,6 +35,7 @@ import './pages/favorites'
 import './pages/network-search'
 import './pages/layout'
 import './pages/verification_form'
+import './pages/dark-mode-switcher'
 
 import './pages/admin/tasks.js'
 
diff --git a/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js
new file mode 100644
index 0000000000..c1127e0f31
--- /dev/null
+++ b/apps/block_scout_web/assets/js/pages/dark-mode-switcher.js
@@ -0,0 +1,10 @@
+import $ from 'jquery'
+
+$('.dark-mode-changer').click(function () {
+  if (localStorage.getItem('current-color-mode') === 'dark') {
+    localStorage.setItem('current-color-mode', 'light')
+  } else {
+  	localStorage.setItem('current-color-mode', 'dark')
+  }
+  document.location.reload(true)
+})
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
index f152ec6bf9..f6578a715b 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
@@ -1,4 +1,9 @@
-<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar">
+<nav class="navbar navbar-dark navbar-expand-lg navbar-primary" data-selector="navbar" id="top-navbar">
+  <script>
+    if (localStorage.getItem("current-color-mode") === "dark") {
+      document.getElementById("top-navbar").style.backgroundColor = "#282945";
+    }
+  </script>
   <div class="container-fluid navbar-container">
     <%= link to: chain_path(@conn, :show), class: "navbar-brand", "data-test": "header_logo" do %>
       <img class="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
@@ -90,6 +95,12 @@
           </a>
         </li>
       </ul>
+      <!-- Dark mode changer -->
+      <button class="dark-mode-changer" id="dark-mode-changer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
+            <path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
+        </svg>
+      </button>
       <!-- Search navbar -->
       <div class="search-form d-lg-flex d-inline-block">
         <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
@@ -122,4 +133,11 @@
     </div>
   </div>
 </nav>
-<%= render BlockScoutWeb.LayoutView, "_network_selector.html" %>
\ No newline at end of file
+<%= render BlockScoutWeb.LayoutView, "_network_selector.html" %>
+<script>
+  if (localStorage.getItem("current-color-mode") === "dark") {
+    var modeChanger = document.getElementById("dark-mode-changer");
+    modeChanger.className += " " + "dark-mode-changer--dark";
+    document.body.className += " " + "dark-theme-applied";
+  }
+</script> 
\ No newline at end of file
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex
index b3b6ba0665..c3b0fe2ff1 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex
@@ -24,6 +24,11 @@
   </head>
 
   <body>
+    <script>
+      if (localStorage.getItem("current-color-mode") === "dark") {
+        document.body.style.backgroundColor = "#1c1d31";
+      }
+    </script>
     <div class="layout-container">
       <%= if not Explorer.Chain.finished_indexing?() do %>
         <div class="alert alert-warning text-center mb-0 p-3" data-selector="indexed-status">
diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
index 8217a39d9c..df0fab4aa1 100644
--- a/apps/block_scout_web/priv/gettext/default.pot
+++ b/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:35
+#: lib/block_scout_web/templates/layout/app.html.eex:40
 msgid "- We're indexing this chain right now. Some of the counts may be inaccurate."
 msgstr ""
 
@@ -87,7 +87,7 @@ msgid "API for the %{subnetwork} - BlockScout"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:56
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:61
 msgid "Accounts"
 msgstr ""
 
@@ -157,7 +157,7 @@ msgid "Block Height: %{height}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:50
+#: lib/block_scout_web/templates/layout/app.html.eex:55
 msgid "Block Mined, awaiting import..."
 msgstr ""
 
@@ -178,13 +178,13 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:87
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:16
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:20
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:21
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:25
 msgid "Blocks"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:49
+#: lib/block_scout_web/templates/layout/app.html.eex:54
 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:55
+#: lib/block_scout_web/templates/layout/app.html.eex:60
 #: 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:196
@@ -400,7 +400,7 @@ msgid "Fetching tokens..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:26
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:31
 msgid "Forked Blocks (Reorgs)"
 msgstr ""
 
@@ -454,7 +454,7 @@ msgid "IN"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:51
+#: lib/block_scout_web/templates/layout/app.html.eex:56
 msgid "Indexing Tokens"
 msgstr ""
 
@@ -486,7 +486,7 @@ msgid "Inventory"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/app.html.eex:52
+#: lib/block_scout_web/templates/layout/app.html.eex:57
 msgid "Less than"
 msgstr ""
 
@@ -507,13 +507,15 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:31
-#: lib/block_scout_web/templates/layout/app.html.eex:53
+#: lib/block_scout_web/templates/layout/app.html.eex:58
+#: lib/block_scout_web/views/address_view.ex:121
 #: lib/block_scout_web/views/address_view.ex:121
 msgid "Market Cap"
 msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/views/transaction_view.ex:129
+#: lib/block_scout_web/views/transaction_view.ex:129
 msgid "Max of"
 msgstr ""
 
@@ -602,7 +604,7 @@ msgid "Parent Hash"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:49
 #: lib/block_scout_web/views/transaction_view.ex:143
 #: lib/block_scout_web/views/transaction_view.ex:177
 msgid "Pending"
@@ -620,7 +622,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/chain/show.html.eex:24
-#: lib/block_scout_web/templates/layout/app.html.eex:54
+#: lib/block_scout_web/templates/layout/app.html.eex:59
 msgid "Price"
 msgstr ""
 
@@ -667,8 +669,8 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_logs/index.html.eex:14
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:102
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:119
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:113
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:130
 msgid "Search"
 msgstr ""
 
@@ -772,7 +774,7 @@ msgid "To"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:6
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:11
 msgid "Toggle navigation"
 msgstr ""
 
@@ -871,7 +873,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:10
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:18
 #: lib/block_scout_web/templates/chain/show.html.eex:108
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:35
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:40
 #: lib/block_scout_web/views/address_view.ex:305
 msgid "Transactions"
 msgstr ""
@@ -898,7 +900,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/overview.html.eex:80
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:23
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:28
 msgid "Uncles"
 msgstr ""
 
@@ -913,7 +915,7 @@ msgid "Used"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:39
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:44
 msgid "Validated"
 msgstr ""
 
@@ -1067,12 +1069,12 @@ msgid "Loading...."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:64
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:69
 msgid "APIs"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:68
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:73
 msgid "GraphQL"
 msgstr ""
 
@@ -1082,7 +1084,7 @@ msgid "Loading"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:73
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
 msgid "RPC"
 msgstr ""
 
@@ -1481,8 +1483,8 @@ msgid "Error: Could not determine contract creator."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:96
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:100
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:107
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:111
 msgid "Search by address, token symbol name, transaction hash, or block number"
 msgstr ""
 
@@ -1708,7 +1710,7 @@ msgid "ETH RPC API Documentation"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:78
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:83
 msgid "Eth RPC"
 msgstr ""