styling

src/containers/FindBar.css

@@ -1,31 +1,33 @@
-.root {
-  width: 350px;
+:root {
+  --foregroundColor: #222;
+  --backgroundColor: #eaeaea;
+  --highlightFGColor: #000;
+  --highlightBGColor: #d2dee4;
 }
 
 .inputArea {
   display: table;
   width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
+  color: var(--foregroundColor);
+  border: 1px solid var(--backgroundColor);
 }
 
 .inputScope {
   display: table-cell;
   width: 1%;
-  padding-right: 6px;
-  padding-left: 8px;
+  padding: 6px 6px 6px 8px;
   color: #767676;
+  font-size: 16px;
   white-space: nowrap;
   vertical-align: middle;
-  border-right: 1px solid #eee;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-right: 1px solid var(--backgroundColor);
 }
 
 .inputField {
   display: table-cell;
   width: 99%;
+  padding: 6px;
+  font-size: 16px;
   background: none transparent;
   border: 0 none;
   box-shadow: none;
@@ -34,34 +36,43 @@
 }
 
 .menu {
-  border-radius: 3px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  background: rgba(255, 255, 255, 0.9);
-  padding: 2px 0;
-  width: 350px;
+  display: table;
+  width: 100%;
+  background: var(--backgroundColor);
+  font-size: 13px;
+  padding: 10px;
   height: 100%;
 }
 
+.suggestions {
+  display: table-cell;
+  width: 50%;
+  padding-right: 10px;
+}
+
+.hitory {
+  display: table-cell;
+  width: 50%;
+}
+
 .command {
-  padding: 2px 6px;
+  padding: 6px;
   cursor: default;
 }
 
 .command .faded {
-  font-style: italic;
   font-weight: lighter;
   color: #555;
 }
 
 .highlightedCommand {
-  color: white;
-  background: hsl(200, 50%, 50%);
-  padding: 2px 6px;
+  color: var(--highlightFGColor);
+  background: var(--highlightBGColor);
+  padding: 6px;
   cursor: default;
 }
 
 .highlightedCommand .faded {
-  font-style: italic;
   font-weight: lighter;
-  color: #ddd;
+  color: #282c34;
 }

src/containers/FindBar.js

@@ -13,7 +13,7 @@ class FindBar extends Component {
   constructor(props) {
     super(props);
     this._compiledCommands = [];
-    this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' } };
+    this._searchCommand = { search: true, regexp:`(?:${SEARCH})?(.*)`, param:{ name:'searchTerm', display:'' }, token: SEARCH };
     this.state = {
       value: '',
       placeholder: PLACEHOLDER,
@@ -102,7 +102,8 @@ class FindBar extends Component {
         activeScope: SEARCH,
         placeholder: ''
       });
-      this.props.dispatch(runCommand('search', { searchTerm: enteredParamValue }));
+
+      enteredParamValue && this.props.dispatch(runCommand('search', { searchTerm: enteredParamValue }));
     } else if (command.param && !enteredParamValue) {
       // Partial Match
       // Command was partially matched: It requires a param, but param wasn't entered
@@ -143,14 +144,10 @@ class FindBar extends Component {
       extract: el => el.token
     });
 
-    let returnResults;
-    if (value.length > 0) {
-      returnResults = results.slice(0, 4).map(result => Object.assign({}, result.original, { string:result.string }));
+    const returnResults = results.slice(0, 4).map(result => (
+      Object.assign({}, result.original, { string:result.string }
+    )));
     returnResults.push(this._searchCommand);
-    }
-    else {
-      returnResults = results.slice(0, 5).map(result => Object.assign({}, result.original, { string:result.string }));
-    }
 
     return returnResults;
   }
@@ -270,7 +267,21 @@ class FindBar extends Component {
 
   renderMenu() {
     const commands = this.getSuggestions().map((command, index) => {
+      let children;
       if (!command.search) {
+        children = (
+          <span><Icon type="right-open-mini"/><span dangerouslySetInnerHTML={{__html: command.string}} /></span>
+        );
+      } else {
+        children = (
+          <span>
+          {this.state.value.length === 0 ?
+            <span><Icon type="search"/>Search... </span> :
+            <span className={styles.faded}><Icon type="search"/>Search for: </span>
+          }
+          {this.state.value}</span>
+        );
+      }
       return (
         <div
             className={this.state.highlightedIndex === index ? styles.highlightedCommand : styles.command}
@@ -279,26 +290,20 @@ class FindBar extends Component {
             onMouseEnter={() => this.highlightCommandFromMouse(index)}
             onClick={() => this.selectCommandFromMouse(command)}
         >
-            <Icon type="right-open-mini"/>
-            <span dangerouslySetInnerHTML={{__html: command.string}} />
+          {children}
         </div>
       );
-      } else {
-        return (
-          <div
-              className={this.state.highlightedIndex === index ? styles.highlightedCommand : styles.command}
-              key='builtin-search'
-              onMouseDown={() => this.setIgnoreBlur(true)}
-              onMouseEnter={() => this.highlightCommandFromMouse(index)}
-              onClick={() => this.selectCommandFromMouse(command)}
-          >
-            <span className={styles.faded}><Icon type="search"/> Search for: </span>{this.state.value}
-          </div>
-        );
-      }
     });
-
-    return commands.length > 0 ? <div className={styles.menu} children={commands} /> : null;
+    return commands.length === 0 ? null : (
+      <div className={styles.menu}>
+        <div className={styles.suggestions}>
+          { commands }
+        </div>
+        <div className={styles.history}>
+          Your past searches and commands
+        </div>
+      </div>
+    );
   }
 
   renderActiveScope() {
@@ -313,7 +318,7 @@ class FindBar extends Component {
     const menu = this.state.isOpen && this.renderMenu();
     const scope = this.state.activeScope && this.renderActiveScope();
     return (
-      <div className={styles.root}>
+      <div>
         <label className={styles.inputArea}>
           {scope}
           <input

src/containers/stories/FindBar.js

@@ -13,10 +13,17 @@ const commands = [
   { pattern: 'Go to Settings' },
 ];
 
+const style = {
+  width: 800,
+  margin: 20
+};
+
 storiesOf('FindBar', module)
   .add('Default View', () => (
+    <div style={style}>
       <FindBar
           commands={commands}
           dispatch={action('DISPATCH')}
       />
+    </div>
   ));