fix(composer): fix to tabbing field with test

Summary: Fixes in tabbing and css updates in composer

Test Plan: new tests

Reviewers: bengotow

Reviewed By: bengotow

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

internal_packages/onboarding/stylesheets/onboarding.less

@@ -232,7 +232,7 @@
 
   form.settings {
     padding: 0 20px;
-    padding-bottom: 40px;
+    padding-bottom: 20px;
 
     input {
       padding: 8px;
@@ -305,7 +305,7 @@
 
 .page.account-choose {
   width: 388px;
-  height: 602px;
+  height: 615px;
   img.logo.content-mask {
     background-color: rgba(255,255,255,0.4);
   }
@@ -333,7 +333,7 @@
       height: 50px;
       display: inline-block;
       box-sizing: content-box;
-      padding: 10px 25px;
+      padding: 10px 25px 12px 25px;
     }
   }
   .provider:hover{

spec-nylas/components/tokenizing-text-field-spec.cjsx

@@ -270,10 +270,18 @@ describe 'TokenizingTextField', ->
 
     it "shouldn't handle the event in the input is empty", ->
       # We ignore on empty input values
+      # NOTE, we still preventDefault
+      ReactTestUtils.Simulate.change(@renderedInput, {target: {value: ' '}})
+      ReactTestUtils.Simulate.keyDown(@renderedInput, @tabDownEvent)
+      expect(@propAdd).not.toHaveBeenCalled()
+      expect(@tabDownEvent.preventDefault).toHaveBeenCalled()
+
+    it "should NOT stop the propagation if the input is empty.", ->
+      # This is to allow tabs to propagate up to controls that might want
+      # to change the focus later.
       ReactTestUtils.Simulate.change(@renderedInput, {target: {value: ' '}})
       ReactTestUtils.Simulate.keyDown(@renderedInput, @tabDownEvent)
       expect(@propAdd).not.toHaveBeenCalled()
-      expect(@tabDownEvent.preventDefault).not.toHaveBeenCalled()
       expect(@tabDownEvent.stopPropagation).not.toHaveBeenCalled()
 
     it "should add the raw input value if there are no completions", ->

src/components/tokenizing-text-field.cjsx

@@ -384,8 +384,8 @@ class TokenizingTextField extends React.Component
 
     else if event.key in ["Tab", "Enter"] or event.keyCode is 188 # comma
       event.preventDefault()
-      event.stopPropagation()
       return if (@state.inputValue ? "").trim().length is 0
+      event.stopPropagation()
       if @state.completions.length > 0
         @_addToken(@refs.completions.getSelectedItem() || @state.completions[0])
       else