(add) topbar search and network dropdown

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

@@ -3,6 +3,11 @@
     box-shadow: $box-shadow;
     padding: 0;
     width: 100%;
+
+    &.right {
+        left: auto;
+        right: 0;
+    }
 }
 
 .dropdown-item {

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

@@ -76,6 +76,10 @@
     path {
         fill: $secondary;
     }
+
+    &.m-r-0 {
+      margin-right: 0;
+    }
 }
 
 .navbar {
@@ -85,53 +89,83 @@
 }
 
 .navbar {
+    .search-form {
+      @include media-breakpoint-up(xl) {
+        height: 57px;
+        margin-bottom: -8px;
+        margin-top: -8px;
+      }
+    }
+
+    .form-inline {
+      height: 100%;
+    }
+
+    .input-group {
+      height: 100%;
+      position: relative;
+    }
+
     .form-control {
-        background: transparent;
-        border-color: transparentize($white, 0.30);
-        border-right: none;
-        color: $white;
-        font-size: 12px;
-        padding-right: 0;
-        width: auto;
+        background: #f5f6fa;
+        border-color: #f5f6fa;
+        color: #a3a9b5;
+        font-size: 14px;
+        height: 100%;
+        padding-left: 38px;
+        padding-right: 8px;
+        position: relative;
+        width: 100%;
+        z-index: 1;
 
         &::-webkit-input-placeholder {
             /* Chrome/Opera/Safari */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &::-moz-placeholder {
             /* Firefox 19+ */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:-ms-input-placeholder {
             /* IE 10+ */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:-moz-placeholder {
             /* Firefox 18- */
-            color: transparentize($white, 0.5);
+            color: #a3a9b5;
         }
         &:focus {
             box-shadow: none;
         }
-        @include media-breakpoint-up(xl) {
-            width: calc(41ch + #{$input-padding-x});
-        }
-    }
-}
 
-.navbar {
-    .input-group-text {
-        background: none;
-        border-color: transparentize($white, 0.30);
-        border-left: none;
+        @include media-breakpoint-up(xl) {
+            width: 280px;
         }
     }
 
     .input-group-append {
-    margin-left: 0;
+        height: 38px;
+        left: 0;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 38px;
+        z-index: 5;
 
         path {
-        fill: $secondary;
+            fill: #a3a9b5;
+        }
+    }
+
+    .input-group-text {
+      align-items: center;
+      background: none;
+      border-color: transparent;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      padding: 0;
+      width: 100%;
   }
 }
 

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

@@ -16,7 +16,6 @@ $tertiary:      #1755e4;
 
   .form-control {
     color: $secondary;
-    border-color: transparentize($secondary, 0.30);
 
     &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
       color: transparentize($secondary, 0.5);
@@ -32,9 +31,6 @@ $tertiary:      #1755e4;
     }
   }
 
-  .input-group-text {
-    border-color: transparentize($secondary, 0.30);
-  }
 }
 
 .navbar-logo {

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

@@ -128,22 +128,23 @@
               </button>
             </div>
           </div>
-          <button class="btn btn-outline-success my-2 my-sm-0 sr-only" type="submit"><%= gettext "Search" %></button>
+          <button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
         <% end %>
-        <ul class="navbar-nav">
+      </div>
+      <ul class="navbar-nav mr-auto">
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle pl-lg-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <!-- ICON FOR MAINNET -->
-              <span class="nav-link-icon">
+            <span class="nav-link-icon m-r-0">
               <%= 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() %>
+            <!-- <%= subnetwork_title() %> -->
           </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+          <div class="dropdown-menu right" aria-labelledby="navbarDropdown">
             <%= for %{url: url, title: title} <- other_networks() do %>
               <a class="dropdown-item" href="<%= url%>"><%= title %></a>
             <% end %>
@@ -152,5 +153,4 @@
       </ul>
     </div>
   </div>
-  </div>
 </nav>