fix(packages): Update other packages to new UI

internal_packages/calendar-bar/lib/main.cjsx

@@ -2,21 +2,10 @@ React = require "react"
 CalendarBar = require "./calendar-bar"
 
 module.exports =
-  item: null # The DOM item the main React component renders into
 
   activate: (@state) ->
-    unless @item?
-      @item = document.createElement("div")
-      @item.setAttribute("id", "calendar-bar")
-      @item.setAttribute("class", "calendar-bar")
-
-      React.render(<CalendarBar /> , @item)
-
-      atom.workspace.addRow(@item)
+    # Package turned off for now
     
   deactivate: ->
-    React.unmountComponentAtNode(@item)
-    @item.remove()
-    @item = null
 
   serialize: -> @state

internal_packages/message-templates/lib/main.cjsx

@@ -7,11 +7,10 @@ module.exports =
 
   activate: (@state={}) ->
     # Register our menu item in the composer footer
-    ComponentRegistry.register
-      name: 'TemplatePicker'
-      role: 'Composer:Footer'
-      view: TemplatePicker
-
+    # ComponentRegistry.register
+    #   name: 'TemplatePicker'
+    #   role: 'Composer:Footer'
+    #   view: TemplatePicker
 
   deactivate: ->
 

internal_packages/notifications/lib/main.cjsx

@@ -1,32 +1,24 @@
 React = require "react"
 Notifications = require "./notifications"
 NotificationsStickyBar = require "./notifications-sticky-bar"
+{ComponentRegistry} = require("inbox-exports")
 
 module.exports =
   item: null # The DOM item the main React component renders into
 
   activate: (@state={}) ->
-    unless @item?
-      @item = document.createElement("div")
-      @item.setAttribute("id", "notifications-wrap")
-      @item.setAttribute("class", "notifications-wrap")
-      atom.workspace.addColumnItem(@item, "thread-list-column")
-      React.render(<Notifications /> , @item)
+    ComponentRegistry.register
+      view: Notifications
+      name: 'Notifications'
+      role: 'ThreadList:Center'
 
-    unless @stickyItem?
-      @stickyItem = document.createElement("div")
-      @stickyItem.setAttribute("id", "notifications-sticky-bar")
-      @stickyItem.setAttribute("class", "notifications-sticky-bar")
-      atom.workspace.addRow(@stickyItem)
-      React.render(<NotificationsStickyBar /> , @stickyItem)
+    ComponentRegistry.register
+      view: NotificationsStickyBar
+      name: 'NotificationsStickyBar'
+      role: 'ThreadList:Top'
 
   deactivate: ->
-    React.unmountComponentAtNode(@item)
-    @item.remove()
-    @item = null
-
-    React.unmountComponentAtNode(@stickyItem)
-    @stickyItem.remove()
-    @stickyItem = null
+    ComponentRegistry.unregister('NotificationsStickyBar')
+    ComponentRegistry.unregister('Notifications')
 
   serialize: -> @state

internal_packages/notifications/lib/notifications-sticky-bar.cjsx

@@ -41,7 +41,7 @@ NotificationStickyBar = React.createClass
     @
 
   render: ->
-    <div>
+    <div className="notifications-sticky">
       {@_notificationComponents()}
     </div>
 

internal_packages/notifications/lib/notifications.cjsx

@@ -14,12 +14,17 @@ Notifications = React.createClass
     @unsubscribeStore() if @unsubscribeStore
 
   render: ->
-    <div className="notifications">{
-      for notification in @state.notifications
-        <div className={"notification-item notification-#{notification.type}"}>
-          {notification.message}
-        </div>
-    }</div>
+    <div className="notifications-momentary">
+      <div className="inner">
+        {@_notificationComponents()}
+      </div>
+    </div>
+
+  _notificationComponents: ->
+    @state.notifications.map (notification) ->
+      <div className={"notification-item notification-#{notification.type}"}>
+        {notification.message}
+      </div>
 
   _onStoreChange: ->
     @setState

internal_packages/notifications/stylesheets/notifications.less

@@ -2,35 +2,13 @@
 @import "ui-mixins";
 
 // Notification Colors
-.notifications-wrap, .notifications-sticky-bar {
+.notifications-momentary,
+.notifications-sticky {
   .notification-info { background: @background-color-info; }
   .notification-error { background: @background-color-error; }
   .notification-success { background: @background-color-success; }
-}
 
-// Notifications Above Threads
-.notifications-wrap {
-  position: absolute;
-  width: 100%;
-  order: 1;
-  z-index: 400;
-
-  .notifications {
-    text-align: center;
-    font-size: @font-size-small;
-    height: 19px;
-    overflow: auto;
-  }
-
-  .notification-item {
-    color: @text-color-inverse;
-    padding: 0px 15px 2px 1px;
-  }
-}
-
-// Notifications Across Top Bar
-.notifications-sticky-bar {
-    order: -1;
+  order: -1;
 
   .notifications-sticky-item {
       height: 25px;
@@ -65,3 +43,22 @@
       }
   }
 }
+
+// Notifications Above Threads
+.notifications-momentary {
+  position: absolute;
+  order: 1;
+  z-index: 400;
+  width:100%;
+
+  .inner {
+    text-align: center;
+    font-size: @font-size-small;
+    overflow: auto;
+
+    .notification-item {
+      color: @text-color-inverse;
+      padding: 3px 15px 2px 1px;
+    }
+  }
+}

internal_packages/sidebar-fullcontact/lib/main.cjsx

@@ -1,29 +1,17 @@
 _ = require 'underscore-plus'
 React = require "react"
 SidebarFullContact = require "./sidebar-fullcontact.cjsx"
-
 {ComponentRegistry} = require("inbox-exports")
 
 module.exports =
   item: null
 
   activate: (@state={}) ->
-    unless @item?
-      @item = document.createElement("div")
-      @item.setAttribute("id", "sidebar-fullcontact")
-      @item.setAttribute("class", "sidebar-fullcontact")
-
-      atom.workspace.addColumnItem(@item, "message-and-composer")
-
-      ComponentRegistry.register
-        name: 'SidebarFullContact'
-        view: SidebarFullContact
-
-      React.render(<SidebarFullContact />, @item)
+    ComponentRegistry.register
+      name: 'SidebarFullContact'
+      view: SidebarFullContact
 
   deactivate: ->
-    React.unmountComponentAtNode(@item)
-    @item.remove()
-    @item = null
+    ComponentRegistry.unregister('SidebarFullContact')
 
   serialize: -> @state

src/components/flexbox.cjsx

@@ -13,6 +13,7 @@ Flexbox = React.createClass
   render: ->
     style = _.extend (@props.style || {}),
       'flexDirection': @props.direction,
+      'position':'relative'
       'display': 'flex'
       'height':'100%'