Style search bar

assets/css/components/_header.scss

@@ -18,6 +18,36 @@
       flex-direction: row-reverse;
       padding-right: explorer-size(0);
     }
+    &--search {
+      @include explorer-typography("body1");
+      padding-left: explorer-size(0);
+    }
+
+    &--search-form {
+      position: relative;
+    }
+
+    &--search-glass {
+      height: 16px;
+      width: 16px;
+      position: absolute;
+      top: 14px;
+      left: 16px;
+      opacity: 0.5;
+    }
+
+    &--search-input {
+      width: 100%;
+      border: none;
+      background-color: transparent;
+      height: explorer-size(1);
+      padding-left: explorer-size(1);
+      padding-right: explorer-size(-1);
+    }
+
+    &--search-input[placeholder] {
+      text-overflow: ellipsis;
+    }
   }
 
   &__logo-link {

assets/static/images/mgi.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="490" height="490">
+<path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round"
+d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
+</svg>

lib/explorer_web/templates/layout/_header.html.eex

@@ -7,8 +7,9 @@
         </a>
       </td>
       <td class="header__cell header__cell--search">
-        <%= form_for @conn, chain_path(@conn, :search, Gettext.get_locale), [class: "search-box", method: :get, enforce_utf8: false], fn f -> %>
-          <%= search_input f, :q, class: 'search-box__input' %>
+        <%= form_for @conn, chain_path(@conn, :search, Gettext.get_locale), [class: "header__cell--search-form", method: :get, enforce_utf8: false], fn f -> %>
+          <%= img_tag :svg, src: static_path(@conn, "/images/mgi.svg"), class: "header__cell--search-glass" %>
+          <%= search_input f, :q, class: 'header__cell--search-input', placeholder: gettext "Search by address, transaction hash, or block number" %>
         <% end %>
       </td>
       <td class="header__cell header__cell--links" align="right">

test/explorer_web/features/contributor_browsing_test.exs

@@ -23,7 +23,7 @@ defmodule ExplorerWeb.UserListTest do
 
     session
     |> visit("/")
-    |> fill_in(css(".search-box__input"), with: "42")
+    |> fill_in(css(".header__cell--search-input"), with: "42")
     |> send_keys([:enter])
     |> assert_has(css(".block__item", text: "mittens"))
   end
@@ -33,7 +33,7 @@ defmodule ExplorerWeb.UserListTest do
 
     session
     |> visit("/")
-    |> fill_in(css(".search-box__input"), with: "0xdeadbeef000000000000000000000000000000000")
+    |> fill_in(css(".header__cell--search-input"), with: "0xdeadbeef000000000000000000000000000000000")
     |> send_keys([:enter])
     |> assert_has(css(".transaction__item", text: "socks"))
   end
@@ -43,7 +43,7 @@ defmodule ExplorerWeb.UserListTest do
 
     session
     |> visit("/")
-    |> fill_in(css(".search-box__input"), with: "0xBAADF00D00000000000000000000000000000000")
+    |> fill_in(css(".header__cell--search-input"), with: "0xBAADF00D00000000000000000000000000000000")
     |> send_keys([:enter])
     |> assert_has(css(".address__subheading", text: "0xBAADF00D00000000000000000000000000000000"))
   end