Add search icon to navbar searchbar

assets/css/default.css

@@ -168,6 +168,18 @@ img.thumbnail {
     color: #3E4446;
     background: transparent;
     font-size: 1.1em;
+
+
+}
+
+.search-button:hover {
+    color: #090909;
+}
+
+#right-overlap-search-button {
+    float: right;
+    position: relative;
+    bottom: 1.8em;
 }
 
 /*
@@ -429,12 +441,14 @@ body.dark-theme {
 }
 
 .dark-theme .search-button {
-    border: none;
     color: #B0ADA4;
-    background: transparent;
-    font-size: 1.1em;
 }
 
+.dark-theme .search-button:hover {
+    color: #CFCBC1;
+}
+
+
 .dark-theme .pure-menu-link:hover, .dark-theme .pure-menu-link:active {
   background-color: rgb(34, 36, 38)
 }

src/invidious/views/template.ecr

@@ -36,6 +36,7 @@
                         <form class="pure-form" action="/search" method="get">
                             <fieldset>
                                 <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+                                <button class="search-button" id="right-overlap-search-button"><i class="icon ion-md-search"></i></button>
                             </fieldset>
                         </form>
                     </div>