feat(salesforce): new UI for Salesforce

Summary:
style opportunity picker and placeholder on tokenizing text fields

UI for synced opportunities

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://phab.nylas.com/D1655

internal_packages/composer/stylesheets/composer.less

@@ -203,8 +203,9 @@ body.is-blurred .composer-inner-wrap .tokenizing-field .token {
   .composer-inner-wrap {
 
     .composer-action-bar-wrap {
-      background: @background-secondary;
-      border-top:1px solid @border-color-divider;
+      background: #fcfcfc;
+      border-top: 1px solid #eaeaea;
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.03);
     }
 
     .composer-action-bar-content {

internal_packages/message-templates/lib/template-picker.cjsx

@@ -22,7 +22,7 @@ class TemplatePicker extends React.Component
     @unsubscribe() if @unsubscribe
 
   render: =>
-    button = <button className="btn btn-toolbar" style={padding: "2px 9px"}>
+    button = <button className="btn btn-toolbar narrow">
       <RetinaImg name="icon-composer-templates.png" mode={RetinaImg.Mode.ContentIsMask}/>
       &nbsp;
       <RetinaImg name="icon-composer-dropdown.png" mode={RetinaImg.Mode.ContentIsMask}/>

internal_packages/onboarding/lib/external-auth-webview-page.cjsx

@@ -57,7 +57,7 @@ class ExternalAuthWebviewPage extends Page
     , 20
 
     @_listeners =
-     "new-window": (e) ->
+      "new-window": (e) ->
         require('shell').openExternal(e.url)
       "did-start-loading": (e) =>
         @_setUserAgent(e, webview)

internal_packages/onboarding/lib/page.cjsx

@@ -30,7 +30,7 @@ class Page extends React.Component
 
     <RetinaImg ref="spinner"
                style={styles}
-               name="setup-spinner.gif"
+               name="Setup-Spinner.gif"
                mode={RetinaImg.Mode.ContentPreserve}/>
 
 module.exports = Page

internal_packages/sidebar-fullcontact/lib/sidebar-fullcontact.cjsx

@@ -28,6 +28,7 @@ class SidebarFullContact extends React.Component
       <SidebarFullContactDetails contact={@state.focusedContact ? {}}
                                  fullContact={@_fullContact()}/>
       <InjectedComponentSet matching={role: "sidebar:focusedContactInfo"}
+                            direction="column"
                             exposedProps={focusedContact: @state.focusedContact}/>
     </div>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nylas",
   "productName": "Nylas",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "An email OS",
   "main": "./src/browser/main.js",
   "repository": {

src/components/generated-form.cjsx

@@ -171,8 +171,8 @@ class FormItem extends React.Component
       React.createElement("input", inputProps)
     else if @props.type is "select"
       options = (@props.selectOptions ? []).map (optionData) ->
-        <option {...optionData} key={optionData.value} >{optionData.label}</option>
-      options.unshift(<option key={"blank-option"}></option>)
+        <option {...optionData} key={"#{Utils.generateTempId()}-optionData.value"} >{optionData.label}</option>
+      options.unshift(<option key={"#{Utils.generateTempId()}-blank-option"}></option>)
       <select {...inputProps}>{options}</select>
     else if @props.type is "textarea"
       React.createElement("textarea", inputProps)

src/components/tokenizing-text-field.cjsx

@@ -226,6 +226,8 @@ TokenizingTextField = React.createClass
     <div key="field-component" onClick={@focus} {...@dropTargetFor('token')}>
       {@_renderPrompt()}
       <div className="tokenizing-field-input">
+        {@_placeholder()}
+
         {@_fieldTokenComponents()}
 
         {@_inputEl()}
@@ -263,6 +265,12 @@ TokenizingTextField = React.createClass
              tabIndex={@props.tabIndex}
              value={@state.inputValue} />
 
+  _placeholder: ->
+    if not @state.focus and @props.placeholder?
+      return <div className="placeholder">{@props.placeholder}</div>
+    else
+      return <span></span>
+
   _atMaxTokens: ->
     if @props.maxTokens
       @props.tokens.length >= @props.maxTokens

static/buttons.less

@@ -102,8 +102,11 @@ button, html input[type="button"] {
 }
 
 .btn-toolbar {
-  min-height: 24px;
+  height: 24px;
   padding: 2px 13px;
+  &.narrow {
+    padding: 2px 9px;
+  }
 }
 
 .btn-gradient {

static/components/tokenizing-text-field.less

@@ -116,6 +116,15 @@
       box-shadow: none;
     }
   }
+
+  .placeholder {
+    color: fade(@text-color, 50%);
+    position: absolute;
+    top: 50%;
+    margin-top: -0.8em;
+    left: 1em;
+    font-size: 12px;
+  }
 }
 
 body.is-blurred .tokenizing-field .token {