improved ui

client/assets/scss/components/lookup.scss

@@ -9,8 +9,23 @@
     li {
       padding: 8px;
       padding-left: 15px;
-
-      cursor: pointer;
+    }
+}
+
+
+.lookup-help {
+    margin: 30px 20px;
+
+    h3 {
+        font-weight: bold;
+        color: #337ab7;
+        margin-top: 15px;
+        font-size: 14px;
+        text-transform: uppercase;
+    }
+
+    b {
+
     }
 }
 

client/components/lookup/index.jsx

@@ -11,20 +11,53 @@ import {loadResults} from './actions'
 import LookupResults from './results'
 import SearchInput from 'components/search-input/debounced'
 
+
+class LookupHelp extends React.Component {
+  render() {
+    if(this.props.query != '') {
+      return null;
+    }
+
+    return (
+      <div className="lookup-help">
+        <h3>Did you know?</h3>
+        <p>You can search for</p>
+        <ul>
+          <li><b>Network Addresses</b>,</li>
+          <li><b>Peers</b> by entering their name and</li>
+          <li><b>ASNs</b> by prefixing them with 'AS'</li>
+        </ul>
+        <p>Just start typing!</p>
+      </div>
+    );
+  }
+}
+
+
 class Lookup extends React.Component {
   doLookup(q) {
     this.props.dispatch(loadResults(q));
   }
 
+  componentDidMount() {
+    // this is yucky but the debounced
+    // search input seems to kill the ref=
+    let input = document.getElementById('lookup-search-input');
+    input.focus();
+  }
+
   render() {
     return (
       <div className="lookup-container">
         <div className="card">
           <SearchInput
-            placeholder="Search for prefixes by entering a network address"
+            id="lookup-search-input"
+            placeholder="Search for prefixes on all routeservers"
             onChange={(e) => this.doLookup(e.target.value)}  />
         </div>
 
+        <LookupHelp query={this.props.query} />
+
         <LookupResults />
       </div>
     )
@@ -34,6 +67,7 @@ class Lookup extends React.Component {
 export default connect(
   (state) => {
     return {
+        query: state.lookup.query,
         isLoading: state.lookup.isLoading,
         error: state.lookup.error
     }