Merge pull request #886 from poanetwork/869-dai-chain

DAI Chain Theme

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

@@ -8,10 +8,17 @@
   0% {
     flex-basis: 0%;
     width: 0%;
+    opacity: 0;
+    overflow-x: hidden;
   }
   50% {
+    opacity: 0;
+  }
+  100% {
     flex-basis: 25%;
     width: 25%;
+    opacity: 1;
+    overflow-x: auto;
   }
 }
 
@@ -24,10 +31,8 @@
     opacity: 0;
     transform: translateY(10px) scale(0.97);
   }
-  50% {
-    height: 100px;
-  }
   100% {
+    height: 100%;
     opacity: 1;
     transform: translateY(0) scale(1);
   }
@@ -50,11 +55,11 @@
 
 .fade-up-blocks-chain {
   will-change: transform, opacity, width;
-  max-height: 98px;
-  animation: fade-up-blocks-chain 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  white-space: nowrap;
+  animation: fade-up-blocks-chain 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
   @include media-breakpoint-down(md) {
-    animation: none;
+    animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
 }
 

apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@@ -53,16 +53,21 @@
   }
 }
 
+.dashboard-banner-graphic {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+}
+
 .dashboard-banner-chart {
   grid-area: chart;
-  // 15px padding matches the Bootstrap container padding.
   padding: 1rem 1rem 1rem 0;
 }
 
 .dashboard-banner-chart-legend {
   grid-area: legend;
   display: flex;
-  // 15px padding matches the Bootstrap container padding.
   padding: 1rem 1rem;
 
   &-item {
@@ -93,8 +98,7 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-  // 15px padding matches the Bootstrap container padding.
-  padding-right: 15px;
+  padding-right: 1rem;
   background-color: $primary;
   box-shadow: -10px 0 15px 0 rgba($black, 0.14);
 

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

@@ -7,6 +7,30 @@
   }
 }
 
+.navbar-collapse.collapsing,
+.navbar-collapse.collapse.show {
+  display: flex;
+  flex-direction: column;
+
+  .search-form {
+    order: -1;
+    width: 100%;
+    align-items: center;
+
+    form {
+      flex-grow: 1;
+    }
+  }
+
+  .input-group {
+    width: 100%;
+  }
+
+  .navbar-nav {
+    white-space: nowrap;
+  }
+}
+
 .navbar-brand {
   margin-left: 0;
 }
@@ -39,9 +63,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  top: -2px;
-  height: 1em;
-  width: 1em;
+  top: -1px;
   margin-right: 0.5em;
 
   path {
@@ -49,6 +71,10 @@
   }
 }
 
+.navbar .search-form {
+  display: flex;
+}
+
 .navbar .form-control {
   background: transparent;
   width: auto;

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

@@ -11,7 +11,7 @@
     margin-top: 1rem;
   }
 
-  @media (max-width: 767.98px) {
+  @include media-breakpoint-down(md) {
     margin-bottom: 1rem;
   }
 

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

@@ -0,0 +1,58 @@
+$primary:       #fec042;
+$secondary:     #53546a;
+$tertiary:      #1755e4;
+
+.navbar.navbar-primary {
+  background-color: #f2f6f8;
+
+  &.navbar-dark .navbar-nav .nav-link {
+    color: $secondary;
+
+    &:hover,
+    &:focus {
+      color: rgba($secondary, 0.75);
+    }
+  }
+
+  .form-control {
+    color: $secondary;
+    border-color: transparentize($secondary, 0.30);
+
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: transparentize($secondary, 0.5);
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: transparentize($secondary, 0.5);
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: transparentize($secondary, 0.5);
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: transparentize($secondary, 0.5);
+    }
+  }
+
+  .input-group-text {
+    border-color: transparentize($secondary, 0.30);
+  }
+}
+
+.navbar.navbar-dark .navbar-toggler {
+  color: $secondary;
+  border-color: $secondary;
+
+  .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($secondary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); 
+  }
+}
+
+.button.button-secondary {
+  color: $secondary;
+  border-color: $secondary;
+
+  &:hover,
+  &:focus {
+    background-color: $secondary;
+    border-color: $secondary;
+  }
+}

apps/block_scout_web/assets/js/pages/block.js

@@ -110,12 +110,11 @@ if ($blockListPage.length) {
 
 function placeHolderBlock (blockNumber) {
   return `
-    <div class="my-3" style="height: 98px;">
+    <div class="my-3">
       <div
         class="tile tile-type-block d-flex align-items-center fade-up"
         data-selector="place-holder"
         data-block-number="${blockNumber}"
-        style="height: 98px;"
       >
         <span class="loading-spinner-small ml-1 mr-4">
           <span class="loading-spinner-block-1"></span>

apps/block_scout_web/assets/js/pages/chain.js

@@ -200,7 +200,7 @@ if ($chainDetailsPage.length) {
 
 function newBlockHtml (blockHtml) {
   return `
-    <div class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0">
+    <div class="col-lg-3 fade-up-blocks-chain">
       ${blockHtml}
     </div>
   `
@@ -209,14 +209,14 @@ function newBlockHtml (blockHtml) {
 function placeHolderBlock (blockNumber) {
   return `
     <div
-      class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0"
-      style="min-height: 98px;"
+      class="col-lg-3 fade-up-blocks-chain"
+      style="min-height: 100px;"
     >
       <div
         class="tile tile-type-block d-flex align-items-center fade-up"
         data-selector="place-holder"
         data-block-number="${blockNumber}"
-        style="height: 98px;"
+        style="height: 100px;"
       >
         <span class="loading-spinner-small ml-1 mr-4">
           <span class="loading-spinner-block-1"></span>

apps/block_scout_web/assets/static/images/dai_logo.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 43.5" style="enable-background:new 0 0 128 43.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#a);}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#D6191E;}
+	.st3{fill:url(#SVGID_1_);}
+	.st4{fill:#53546A;}
+</style>
+<filter  filterUnits="userSpaceOnUse" height="49" id="a" width="43" x="0" y="0">
+	<feOffset  dy="3" in="SourceAlpha"></feOffset>
+	<feGaussianBlur  result="blurOut" stdDeviation="2.236"></feGaussianBlur>
+	<feFlood  flood-color="#ABBAC7" result="floodOut"></feFlood>
+	<feComposite  in="floodOut" in2="blurOut" operator="atop"></feComposite>
+	<feComponentTransfer>
+		<feFuncA  slope=".2" type="linear"></feFuncA>
+	</feComponentTransfer>
+	<feMerge>
+		<feMergeNode></feMergeNode>
+		<feMergeNode  in="SourceGraphic"></feMergeNode>
+	</feMerge>
+</filter>
+<g class="st0">
+	<path class="st1" d="M17.2,38.8L6,32.1c-2-1.3-2-3.4-2-3.4l0-15.8c0,0,0-2.3,2-3.4l11.2-6.7c3.8-2.3,3.8-2.3,7.7,0L36,9.4
+		c2,1.2,2,3.4,2,3.4v15.8c0,0,0,2.2-2,3.4l-11.1,6.7C21,41.1,21,41.1,17.2,38.8z"/>
+</g>
+<path class="st2" d="M21.2,30.5l-9.8-9.8l9.8-9.8l9.8,9.8L21.2,30.5z M15.2,20.1h4.1l2-2.1l2.1,2.1h4l-6.1-6.8L15.2,20.1z"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-545.0159" y1="511.0359" x2="-545.0159" y2="512.0359" gradientTransform="matrix(19.502 0 0 -19.508 10650.1484 9999.791)">
+	<stop  offset="0" style="stop-color:#FEC141"/>
+	<stop  offset="1" style="stop-color:#FFD065"/>
+</linearGradient>
+<path class="st3" d="M21.2,30.5l-9.8-9.8l9.8-9.8l9.8,9.8L21.2,30.5z M15.2,20.1h4.1l2-2.1l2.1,2.1h4l-6.1-6.8L15.2,20.1z"/>
+<path class="st4" d="M127.8,27.8c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.3,0-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4v-5c0-0.9-0.2-1.5-0.5-1.9
+	c-0.3-0.4-0.9-0.6-1.7-0.6c-0.9,0-1.6,0.3-2.1,0.8s-0.8,1.2-0.8,2.1v4.6c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2
+	c-0.2,0-0.3,0-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4v-7.9c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0,0.4,0.1
+	c0.1,0.1,0.2,0.2,0.1,0.4v1.1c0.3-0.5,0.7-1,1.2-1.3c0.5-0.3,1.1-0.4,1.8-0.4c2.1,0,3.2,1.1,3.2,3.4v5.1
+	C128,27.5,127.9,27.7,127.8,27.8L127.8,27.8z M117.3,16.9c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.1-0.2-0.3-0.2-0.6c0-0.2,0.1-0.4,0.2-0.6
+	c0.2-0.1,0.4-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.2,0.3,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6C117.7,16.8,117.5,16.9,117.3,16.9z
+	 M113.3,27.9c-0.1,0-0.3,0-0.4-0.2c-0.1-0.1-0.2-0.3-0.1-0.4v-1.1c-0.2,0.5-0.6,1-1.1,1.3c-0.5,0.3-1,0.4-1.7,0.4
+	c-0.5,0-1.1-0.1-1.6-0.3c-0.4-0.2-0.8-0.5-1.1-1c-0.3-0.4-0.4-0.9-0.4-1.4c0-0.6,0.2-1.2,0.5-1.5c0.3-0.4,0.9-0.6,1.7-0.8
+	c0.8-0.2,1.9-0.2,3.3-0.2h0.4v-0.7c0-0.8-0.2-1.4-0.5-1.7c-0.3-0.4-0.8-0.5-1.5-0.5c-0.9,0-1.7,0.2-2.5,0.7l-0.3,0.2
+	c-0.2,0.1-0.3,0.2-0.4,0.2c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.2-0.1-0.3c0-0.3,0.2-0.5,0.6-0.8c0.4-0.2,0.9-0.4,1.4-0.6
+	c0.5-0.1,1-0.2,1.5-0.2c1.1,0,1.8,0.3,2.4,0.8c0.5,0.6,0.8,1.4,0.8,2.5v5.1c0,0.1,0,0.3-0.1,0.4C113.6,27.9,113.5,27.9,113.3,27.9z
+	 M112.8,23.6h-0.3c-1.2,0-2,0-2.7,0.1c-0.6,0.1-1,0.3-1.3,0.5c-0.3,0.2-0.4,0.6-0.4,1c0,0.5,0.2,0.9,0.6,1.3
+	c0.4,0.3,0.9,0.5,1.4,0.5c0.8,0,1.4-0.3,1.9-0.8c0.5-0.5,0.7-1.2,0.7-2C112.8,24.2,112.8,23.6,112.8,23.6z M103.8,27.9
+	c-0.2,0-0.3,0-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4v-5c0-0.9-0.2-1.5-0.5-1.9c-0.3-0.4-0.9-0.6-1.7-0.6c-0.9,0-1.6,0.3-2.1,0.8
+	s-0.8,1.2-0.8,2.1v4.6c0,0.1,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.2,0-0.3,0-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4V15.6
+	c0-0.2,0-0.3,0.2-0.4c0.1-0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.1,0.4v5c0.3-0.5,0.7-1,1.2-1.2
+	c0.5-0.3,1.1-0.4,1.8-0.4c2.1,0,3.2,1.1,3.2,3.4v5.1c0,0.1,0,0.3-0.1,0.4C104.1,27.9,104,28,103.8,27.9z M90.4,27
+	c0.7,0,1.3-0.1,1.9-0.3s1.1-0.6,1.8-1.1c0.2-0.1,0.3-0.2,0.4-0.2s0.2,0,0.3,0.1s0.1,0.2,0.1,0.3c0,0.2-0.1,0.4-0.3,0.5
+	c-0.5,0.5-1.2,0.9-1.8,1.2C92,27.9,91.2,28,90.4,28c-1.2,0-2.2-0.3-3.1-0.8c-0.9-0.5-1.5-1.3-2-2.3s-0.7-2.1-0.7-3.5
+	c0-1.3,0.2-2.5,0.7-3.5c0.5-1,1.1-1.7,2-2.2c0.9-0.5,1.9-0.8,3.1-0.8c0.8,0,1.6,0.1,2.3,0.4c0.7,0.2,1.3,0.6,1.8,1.2
+	c0.2,0.2,0.3,0.3,0.3,0.5c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.3-0.1-0.4-0.2c-0.6-0.5-1.2-0.9-1.8-1.1
+	c-0.5-0.2-1.1-0.3-1.9-0.3c-1.5,0-2.6,0.5-3.4,1.4c-0.8,1-1.2,2.3-1.2,4.1c0,1.8,0.4,3.1,1.2,4.1C87.8,26.5,88.9,27,90.4,27z
+	 M76.3,28c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.5-0.3-0.8V16.2c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3
+	c0.4,0,0.6,0.1,0.9,0.3c0.2,0.2,0.3,0.5,0.3,0.8v10.6c0,0.3-0.1,0.6-0.3,0.8C76.9,27.9,76.7,28,76.3,28z M72.3,27.9
+	c-0.2,0-0.4-0.1-0.5-0.2c-0.2-0.1-0.3-0.3-0.4-0.5l-1.1-2.4h-6.3l-1.1,2.4c-0.1,0.2-0.2,0.4-0.4,0.5c-0.2,0.1-0.4,0.2-0.6,0.2
+	c-0.3,0-0.5-0.1-0.8-0.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.2,0-0.3,0.1-0.5l5-10.7c0.1-0.2,0.3-0.4,0.5-0.6c0.2-0.1,0.5-0.2,0.7-0.2
+	s0.5,0.1,0.7,0.2c0.2,0.1,0.4,0.3,0.5,0.6l5,10.7c0.1,0.2,0.1,0.3,0.1,0.5c0,0.3-0.1,0.5-0.3,0.7C72.9,27.8,72.6,27.9,72.3,27.9z
+	 M67.1,17.7l-2.4,5.4h4.8C69.5,23.1,67.1,17.7,67.1,17.7z M53.2,27.9h-3.6c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.5-0.3-0.8V16.2
+	c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3h3.6c2.1,0,3.7,0.6,4.8,1.7s1.7,2.7,1.7,4.7c0,2-0.6,3.6-1.7,4.7
+	C56.9,27.3,55.3,27.9,53.2,27.9z M53,17h-2.2V26H53c2.9,0,4.4-1.5,4.4-4.5C57.4,18.5,56,17,53,17z M117.3,18.9c0.2,0,0.3,0,0.4,0.1
+	c0.1,0.1,0.1,0.2,0.1,0.4v7.9c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.1c-0.1,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.2-0.2-0.4v-7.9
+	c0-0.2,0.1-0.3,0.2-0.4C117,19,117.2,18.9,117.3,18.9z"/>
+</svg>

apps/block_scout_web/assets/static/images/icons/transactions.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" width="16" height="14">
-    <path fill="#7DD79F" fill-rule="evenodd" d="M15 8H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zm0-6H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM3 14H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm4 10h8a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="14">
+    <path fill="#53546A" fill-rule="evenodd" d="M15.5 5h-4.519l1.224 1.224a1.037 1.037 0 0 1-1.465 1.465L7.811 4.76a1.017 1.017 0 0 1-.24-.409 1 1 0 0 1-.065-.324C7.505 4.018 7.5 4.01 7.5 4v-.001a1.026 1.026 0 0 1 .295-.775L10.724.295a1.037 1.037 0 0 1 1.465 1.465L10.948 3H15.5a1 1 0 0 1 0 2zm-6.016 5c0 .009-.004.016-.004.024a1.077 1.077 0 0 1-.064.316 1.02 1.02 0 0 1-.242.42l-2.925 2.929a1.033 1.033 0 0 1-1.462 0 1.037 1.037 0 0 1 0-1.465L6.009 11H1.5a1 1 0 0 1 0-2h4.541L4.803 7.76a1.037 1.037 0 0 1 0-1.465 1.033 1.033 0 0 1 1.462 0L9.19 9.224c.213.214.306.496.294.776z"/>
 </svg>

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -1,4 +1,5 @@
 <div class="dashboard-banner-container d-none d-md-block" data-page="chain-details">
+  <img src="<%= static_path(@conn, "/images/cube.svg") %>" alt="cube_graphic" class="dashboard-banner-graphic">
   <div class="container">
     <div class="dashboard-banner">
       <div class="dashboard-banner-chart">
@@ -56,7 +57,7 @@
       <h2 class="card-title"><%= gettext "Blocks" %></h2>
       <div class="row" data-selector="chain-block-list">
         <%= for block <- @blocks do %>
-          <div class="col-lg-3 fade-up-blocks-chain mb-3 mb-lg-0">
+          <div class="col-lg-3 fade-up-blocks-chain">
             <%= render BlockScoutWeb.ChainView, "_block.html", block: block %>
           </div>
         <% end %>

apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg" width="16" height="14">
-    <path fill="#7DD79F" fill-rule="evenodd" d="M15 8H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zm0-6H7a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2zM3 14H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm0-6H1a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zm4 10h8a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z"/>
+<svg viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg" width="17" height="14">
+    <path fill="#53546A" fill-rule="evenodd" d="M15.5 5h-4.519l1.224 1.224a1.037 1.037 0 0 1-1.465 1.465L7.811 4.76a1.017 1.017 0 0 1-.24-.409 1 1 0 0 1-.065-.324C7.505 4.018 7.5 4.01 7.5 4v-.001a1.026 1.026 0 0 1 .295-.775L10.724.295a1.037 1.037 0 0 1 1.465 1.465L10.948 3H15.5a1 1 0 0 1 0 2zm-6.016 5c0 .009-.004.016-.004.024a1.077 1.077 0 0 1-.064.316 1.02 1.02 0 0 1-.242.42l-2.925 2.929a1.033 1.033 0 0 1-1.462 0 1.037 1.037 0 0 1 0-1.465L6.009 11H1.5a1 1 0 0 1 0-2h4.541L4.803 7.76a1.037 1.037 0 0 1 0-1.465 1.033 1.033 0 0 1 1.462 0L9.19 9.224c.213.214.306.496.294.776z"/>
 </svg>

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

@@ -41,36 +41,38 @@
           <% end %>
         </li>
       </ul>
-      <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
-        <div class="input-group">
-          <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search"), "data-test": "search_input" %>
-          <div class="input-group-append">
-            <button class="input-group-text" id="search-icon">
-              <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>
-            </button>
+      <div class="search-form">
+        <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
+          <div class="input-group">
+            <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search"), "data-test": "search_input" %>
+            <div class="input-group-append">
+              <button class="input-group-text" id="search-icon">
+                <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>
+              </button>
+            </div>
           </div>
-        </div>
-        <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit"><%= gettext "Search" %></button>
-      <% end %>
-      <ul class="navbar-nav">
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <!-- ICON FOR MAINNET -->
-            <span class="nav-link-icon">
-              <%= render BlockScoutWeb.IconsView, network_icon_partial() %>
-            </span>
-            <!-- ICON FOR TESTNET -->
-            <!-- <span class="nav-link-icon">
-              <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
-            </span> -->
-            <%= subnetwork_title() %>
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="https://sokol.blockscout.com/"><%= gettext("POA Sokol") %></a>
-            <a class="dropdown-item" href="https://poa.blockscout.com/"><%= gettext("POA Core") %></a>
-          </div>
-        </li>
-      </ul>
+          <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit"><%= gettext "Search" %></button>
+        <% end %>
+        <ul class="navbar-nav">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle pl-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <!-- ICON FOR MAINNET -->
+              <span class="nav-link-icon">
+                <%= render BlockScoutWeb.IconsView, network_icon_partial() %>
+              </span>
+              <!-- ICON FOR TESTNET -->
+              <!-- <span class="nav-link-icon">
+                <%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
+              </span> -->
+              <%= subnetwork_title() %>
+            </a>
+            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item" href="https://sokol.blockscout.com/"><%= gettext("POA Sokol") %></a>
+              <a class="dropdown-item" href="https://poa.blockscout.com/"><%= gettext("POA Core") %></a>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </nav>

apps/block_scout_web/priv/gettext/default.pot

@@ -83,7 +83,7 @@ msgid "All"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:26
+#: lib/block_scout_web/templates/chain/show.html.eex:27
 msgid "Average block time"
 msgstr ""
 
@@ -126,7 +126,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/index.html.eex:10
-#: lib/block_scout_web/templates/chain/show.html.eex:56
+#: lib/block_scout_web/templates/chain/show.html.eex:57
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Blocks"
 msgstr ""
@@ -465,7 +465,7 @@ msgid "Logs"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:17
+#: lib/block_scout_web/templates/chain/show.html.eex:18
 #: lib/block_scout_web/templates/layout/app.html.eex:36
 #: lib/block_scout_web/views/address_view.ex:102
 msgid "Market Cap"
@@ -500,7 +500,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:19
-#: lib/block_scout_web/templates/chain/show.html.eex:71
+#: lib/block_scout_web/templates/chain/show.html.eex:72
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/transaction/index.html.eex:48
 msgid "More transactions have come in"
@@ -582,12 +582,12 @@ msgid "Owner Address"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:71
 msgid "POA Core"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:69
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
 msgid "POA Sokol"
 msgstr ""
 
@@ -624,7 +624,7 @@ msgid "Pending Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:10
+#: lib/block_scout_web/templates/chain/show.html.eex:11
 #: lib/block_scout_web/templates/layout/app.html.eex:37
 msgid "Price"
 msgstr ""
@@ -676,13 +676,13 @@ msgid "Responses"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:53
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:54
 msgid "Search"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
@@ -870,7 +870,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:34
+#: lib/block_scout_web/templates/chain/show.html.eex:35
 msgid "Total transactions"
 msgstr ""
 
@@ -896,7 +896,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:26
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:35
-#: lib/block_scout_web/templates/chain/show.html.eex:75
+#: lib/block_scout_web/templates/chain/show.html.eex:76
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:24
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:56
 #: lib/block_scout_web/templates/transaction/index.html.eex:56
@@ -959,12 +959,12 @@ msgid "Verify & publish"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:55
+#: lib/block_scout_web/templates/chain/show.html.eex:56
 msgid "View All Blocks →"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:74
+#: lib/block_scout_web/templates/chain/show.html.eex:75
 msgid "View All Transactions →"
 msgstr ""
 
@@ -989,7 +989,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:42
+#: lib/block_scout_web/templates/chain/show.html.eex:43
 msgid "Wallet addresses"
 msgstr ""
 

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

@@ -83,7 +83,7 @@ msgid "All"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:26
+#: lib/block_scout_web/templates/chain/show.html.eex:27
 msgid "Average block time"
 msgstr ""
 
@@ -126,7 +126,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/block/index.html.eex:10
-#: lib/block_scout_web/templates/chain/show.html.eex:56
+#: lib/block_scout_web/templates/chain/show.html.eex:57
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:16
 msgid "Blocks"
 msgstr ""
@@ -465,7 +465,7 @@ msgid "Logs"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:17
+#: lib/block_scout_web/templates/chain/show.html.eex:18
 #: lib/block_scout_web/templates/layout/app.html.eex:36
 #: lib/block_scout_web/views/address_view.ex:102
 msgid "Market Cap"
@@ -500,7 +500,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/address_transaction/index.html.eex:19
-#: lib/block_scout_web/templates/chain/show.html.eex:71
+#: lib/block_scout_web/templates/chain/show.html.eex:72
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:48
 #: lib/block_scout_web/templates/transaction/index.html.eex:48
 msgid "More transactions have come in"
@@ -582,12 +582,12 @@ msgid "Owner Address"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:71
 msgid "POA Core"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:69
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:70
 msgid "POA Sokol"
 msgstr ""
 
@@ -624,7 +624,7 @@ msgid "Pending Transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:10
+#: lib/block_scout_web/templates/chain/show.html.eex:11
 #: lib/block_scout_web/templates/layout/app.html.eex:37
 msgid "Price"
 msgstr ""
@@ -676,13 +676,13 @@ msgid "Responses"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:53
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:54
 msgid "Search"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:46
+#: lib/block_scout_web/templates/layout/_topnav.html.eex:47
 msgid "Search by address, transaction hash, or block number"
 msgstr ""
 
@@ -870,7 +870,7 @@ msgid "Total Supply"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:34
+#: lib/block_scout_web/templates/chain/show.html.eex:35
 msgid "Total transactions"
 msgstr ""
 
@@ -896,7 +896,7 @@ msgstr ""
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:23
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:26
 #: lib/block_scout_web/templates/block_transaction/index.html.eex:35
-#: lib/block_scout_web/templates/chain/show.html.eex:75
+#: lib/block_scout_web/templates/chain/show.html.eex:76
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:24
 #: lib/block_scout_web/templates/pending_transaction/index.html.eex:56
 #: lib/block_scout_web/templates/transaction/index.html.eex:56
@@ -959,12 +959,12 @@ msgid "Verify & publish"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:55
+#: lib/block_scout_web/templates/chain/show.html.eex:56
 msgid "View All Blocks →"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:74
+#: lib/block_scout_web/templates/chain/show.html.eex:75
 msgid "View All Transactions →"
 msgstr ""
 
@@ -989,7 +989,7 @@ msgid "WEI"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/chain/show.html.eex:42
+#: lib/block_scout_web/templates/chain/show.html.eex:43
 msgid "Wallet addresses"
 msgstr ""