Style improvements (#79)

packages/frontend/src/components/Chain/Filter.css

@@ -6,7 +6,7 @@
   width: 400px;
   font-size: 30px;
   margin-left: -210px;
-  padding: 10px;
+  padding: 10px 10px 10px 60px;
   border-radius: 4px;
   background: #111;
   color: #fff;
@@ -18,10 +18,17 @@
   margin: 0;
   border: none;
   outline: none;
-  width: 400px;
+  width: 350px;
   font-size: 30px;
   background: #111;
   color: #fff;
   font-family: Roboto, Helvetica, Arial, sans-serif;
   font-weight: 300;
 }
+
+.Chain-Filter .Icon {
+  position: absolute;
+  left: 13px;
+  top: 17px;
+  font-size: 30px;
+}

packages/frontend/src/components/Chain/Filter.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { Icon } from '../';
+
+import searchIcon from '../../icons/search.svg';
 
 import './Filter.css';
 
@@ -21,6 +24,7 @@ export class Filter extends React.Component<Filter.Props, {}> {
 
     return (
       <div className="Chain-Filter">
+        <Icon src={searchIcon} />
         <input ref={this.onRef} value={value} onChange={this.onChange} />
       </div>
     );

packages/frontend/src/components/Node/Row.css

@@ -46,6 +46,10 @@
   color: #d64ca8;
 }
 
+.Node-Row:hover {
+  background-color: #161616;
+}
+
 .Node-Row-validator {
   display: block;
   width: 16px;