Use correct HTML in search form and style the button

(cherry picked from commit b52fe957)

aleksis/core/static/style.scss

@@ -179,11 +179,14 @@ ul.sidenav li.logo > a:hover {
   box-shadow: none;
 }
 
-.sidenav li.search .search-wrapper > i.material-icons {
+.sidenav li.search .search-wrapper > button.search-button {
   position: absolute;
-  top: 21px;
+  top: calc(50% - 18px);
   right: 10px;
-  cursor: pointer;
+}
+
+button.btn-flat.search-button:hover {
+  background-color: $button-disabled-background;
 }
 
 a.collection-item.search-item {

aleksis/core/templates/core/base.html

@@ -80,8 +80,10 @@
       <li class="search">
         <form method="get" action="{% url "haystack_search" %}" id="search-form" class="autocomplete">
           <div class="search-wrapper">
-            <input id="search" name="q" placeholder="{% trans "Search" %}">
-            <i class="material-icons">search</i>
+            <input id="search" name="q" type="search" enterkeyhint="search" placeholder="{% trans "Search" %}">
+            <button class="btn btn-flat search-button" type="submit" aria-label="{% trans "Search" %}">
+              <i class="material-icons">search</i>
+            </button>
           </div>
         </form>
       </li>