UI: Add search button to search bar (#4706)

Closes issue 529

assets/css/default.css

@@ -278,7 +278,14 @@ div.thumbnail > .bottom-right-overlay {
   display: inline;
 }
 
-.searchbar .pure-form fieldset { padding: 0; }
+.searchbar .pure-form {
+  display: flex;
+}
+
+.searchbar .pure-form fieldset {
+  padding: 0;
+  flex: 1;
+}
 
 .searchbar input[type="search"] {
 	width: 100%;
@@ -310,6 +317,16 @@ input[type="search"]::-webkit-search-cancel-button {
   background-size: 14px;
 }
 
+.searchbar #searchbutton {
+  border: none;
+  background: none;
+  margin-top: 0;
+}
+
+.searchbar #searchbutton:hover {
+  color: rgb(0, 182, 240);
+}
+
 .user-field {
   display: flex;
   flex-direction: row;

src/invidious/views/components/search_box.ecr

@@ -6,4 +6,7 @@
 		title="<%= translate(locale, "search") %>"
 		value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
 	</fieldset>
+	<button type="submit" id="searchbutton" aria-label="<%= translate(locale, "search") %>">
+		<i class="icon ion-ios-search"></i>
+	</button>
 </form>