улучшена оформление главной

src/search.js

@@ -1,19 +1,35 @@
 import React, { Component } from 'react';
 
 import SearchResults from './search-results'
+import TextField from 'material-ui/TextField';
+import RaisedButton from 'material-ui/RaisedButton';
 
 export default class Search extends Component {
+  search() {
+    console.log(this.searchValue);
+    window.torrentSocket.emit('search', this.searchValue, (torrents) => {
+      this.searchData = torrents;
+      this.forceUpdate();
+    });
+  }
   render() {
     return (
-      <div className="column">
-        <div className='row'>
-          <input type='text' ref='searchInput' onKeyPress={(e) => {
-            if (e.key === 'Enter') {
-              window.torrentSocket.emit('search', e.target.value, (torrents) => {
-                this.searchData = torrents;
-                this.forceUpdate();
-              });
-            }
+      <div className="column w100p center">
+        <div className='row inline w100p pad0-75' style={{maxWidth: '30em'}}>
+          <TextField
+              hintText="Search torrent or file"
+              floatingLabelText="What to search?"
+              fullWidth={true}
+              ref='searchInput'
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') {
+                  this.search();
+                }
+             }}
+             onChange={e => {this.searchValue = e.target.value}}
+          />
+          <RaisedButton style={{marginTop: '15px', marginLeft: '10px'}} label="Search" primary={true} onClick={() =>{
+            this.search()
           }} />
         </div>
         <SearchResults results={this.searchData} />