[Ivan Diaz] - Add dropdown to the header

src/app/main/main-layout-header.js

@@ -1,21 +1,37 @@
 import React              from 'react/addons';
-import Button             from 'core-components/button';
+
-import CommonActions      from 'actions/common-actions';
 import i18n               from 'lib/i18n';
+import CommonActions      from 'actions/common-actions';
+
+import Button             from 'core-components/button';
+import DropDown           from 'core-components/drop-down';
 
 var MainLayoutHeader = React.createClass({
 
+    languageList: ['English', 'Spanish', 'Portuguese', 'German'],
+
     render() {
         return (
             <div className="main-layout-header">
                 <div className="main-layout-header--login-links">
-                   <Button type="clean" route={{to:'/app'}}>{i18n('LOG_IN')}</Button>
+                    <Button type="clean" route={{to:'/app'}}>{i18n('LOG_IN')}</Button>
-                   <Button type="clean" route={{to:'/app/signup'}}>{i18n('SIGN_UP')}</Button>
+                    <Button type="clean" route={{to:'/app/signup'}}>{i18n('SIGN_UP')}</Button>
-                   <Button type="clean" onClick={function () {CommonActions.changeLanguage('es');}}>Spanish</Button>
-                   <Button type="clean" onClick={function () {CommonActions.changeLanguage('en');}}>English</Button>
                 </div>
+                <DropDown className="main-layout-header--languages" items={this.languageList} onChange={this.changeLanguage}/>
             </div>
         );
+    },
+
+    changeLanguage(event) {
+        var codeLanguages = {
+            'English': 'en',
+            'Spanish': 'es',
+            'Portuguese': 'pt',
+            'German': 'de'
+        };
+        var language = this.languageList[event.index];
+
+        CommonActions.changeLanguage(codeLanguages[language]);
     }
 });
 

src/app/main/main-layout-header.scss

@@ -13,4 +13,11 @@
         height: 32px;
         padding: 5px 20px 0 10px;
     }
+
+    &--languages {
+        float: right;
+        position: relative;
+        top: 5px;
+        left: -6px;
+    }
 }