Restoring SearchBar, adding FontAwesome for icons not designed yet

internal_packages/search-bar/lib/main.cjsx

@@ -1,7 +1,7 @@
 path = require 'path'
 require 'coffee-react/register'
 React = require 'react'
-{Actions} = require 'inbox-exports'
+{ComponentRegistry} = require 'inbox-exports'
 SearchBar = require './search-bar'
 SearchSettingsBar = require './search-settings-bar'
 
@@ -9,25 +9,11 @@ module.exports =
   configDefaults:
     showOnRightSide: false
 
-  # The top-level React component itself
-  item: null
-
   activate: (@state) ->
-    @state.attached ?= true
-    @_createView() if @state.attached
+    ComponentRegistry.register
+      view: SearchBar
+      name: 'SearchBar'
+      role: 'Global:Toolbar'
 
   deactivate: ->
-    React.unmountComponentAtNode(@container)
-    @container.remove()
-
-  serialize: ->
-    ""
-
-  _createView: ->
-    unless @item?
-      @item = document.createElement("div")
-      @item.setAttribute("id", "search-bar")
-      @item.setAttribute("class", "search-bar")
-      atom.workspace.addColumnItem(@item, 'thread-list-column')
-      React.render(<SearchBar /> , @item)
-    @item
+    ComponentRegistry.unregister 'SearchBar'

internal_packages/search-bar/lib/search-bar.cjsx

@@ -44,6 +44,7 @@ SearchBar = React.createClass
       else
         item.label
 
+    <div className="search-bar">
       <Menu ref="menu"
         className={@_containerClasses()}
         headerComponents={headerComponents}
@@ -52,6 +53,7 @@ SearchBar = React.createClass
         itemKey={ (item) -> item.label }
         onSelect={@_onSelectSuggestion}
         />
+    </div>
 
   _containerClasses: ->
     React.addons.classSet

internal_packages/search-bar/stylesheets/search-bar.less

@@ -28,26 +28,30 @@
 
 .search-bar {
   position: relative;
-  order: 1;
+  order: 100;
   overflow: visible;
   z-index: 100;
   -webkit-user-select: none;
+  width:270px;
+  margin-top: (50px - 30px) / 2;
+  margin-left: 12px;
+  margin-right: 12px;
 
   .menu .header-container {
-    padding: 0px 50px 0px 15px;
+    padding:0;
+    height:30px;
     background-color: transparent;
     border:none;
 
     input {
       width: 100%;
-      font-size: 20px;
-      line-height: 1;
-      border: 0;
-      padding-top: 16px;
-      padding-bottom: 15px;
+      height: 30px;
     }
   }
 
+  .menu .footer-container {
+    border:none;
+  }
   .menu .content-container {
     position: absolute;
     z-index: 2;

src/sheet-container.cjsx

@@ -4,6 +4,10 @@ SheetStore = require './sheet-store'
 Flexbox = require './components/flexbox.cjsx'
 ReactCSSTransitionGroup = React.addons.CSSTransitionGroup
 
+ToolbarSpacer = React.createClass
+  render: ->
+    <div style={flex: 1, order:50}></div>
+
 Toolbar = React.createClass
   propTypes:
     type: React.PropTypes.string.isRequired
@@ -22,6 +26,7 @@ Toolbar = React.createClass
     <div className="toolbar" name={@props.type}>
       <Flexbox direction="row">
         {@_buttonComponents()}
+        <ToolbarSpacer />
       </Flexbox>
     </div>
 

static/index.less

@@ -4,9 +4,12 @@
 @import "./variables/ui-mixins";
 @import "ui-mixins";
 
+@import (css) "font-awesome.min.css";
+
 @import "normalize";
 
 @import "type";
+@import "inputs";
 @import "buttons";
 @import "workspace";
 @import "resizable";

static/inputs.less

@@ -0,0 +1,13 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+
+input[type="text"] {
+  width: 100%;
+  padding-left: @padding-xs-horizontal;
+  padding-right: @padding-xs-horizontal;
+  font-size: @font-size-base;
+  line-height: @line-height-computed;
+  border-radius: @border-radius-base;
+  border: 1px solid @input-border;
+}

static/workspace.less

@@ -59,8 +59,8 @@ atom-workspace {
     height:50px;
 
     .btn {
-      height:34px;
-      margin-top: (50px - 34px) / 2;
+      height:30px;
+      margin-top: (50px - 30px) / 2;
 
       background: @btn-toolbar-bg;
       color: @btn-toolbar-color;