Add search icon to player finder

assets/css/app.scss

@@ -50,6 +50,7 @@
 @import "components/move-list";
 @import "components/game-state";
 @import "components/player-finder";
+@import "components/search-input";
 
 // 7. Utilities – utilities and helper classes with ability to override
 //    anything which goes before in the triangle, eg. hide helper class

assets/css/components/_search-input.scss

@@ -0,0 +1,6 @@
+.search-input {
+  background-image: url("/images/search-icon.svg");
+  background-position: center right 0.5rem;
+  background-repeat: no-repeat;
+  border: 1px solid $base-border-color;
+}

assets/js/components/opponent-finder.js

@@ -145,6 +145,7 @@ class OpponentFinder extends React.Component {
         <input
           id="query-string"
           ref={(input) => { this.queryStringInput = input; }}
+          className="search-input"
           name="q"
           value={this.state.queryString}
           onChange={this.handleChange.bind(this)}

assets/static/images/search-icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>search-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="search-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval" stroke="#000000" stroke-width="2" fill-rule="nonzero" cx="13" cy="13" r="11"></circle>
+        <path d="M30.5,30.5 L21,21" id="Path-2" stroke="#000000" stroke-width="3" fill-rule="nonzero"></path>
+    </g>
+</svg>