Improve homepage and add translations in chinese, russian, korean and spanish

3 files changed, 50 insertions, 12 deletions

diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index a5bddc874..d7ebc4ede 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,7 +1,9 @@
 import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -23,24 +25,33 @@ const linkStyle = {
     cursor: 'pointer',
 };
 
-const titleToIcon: { [title: string]: string } = {
-    'Rocket.chat': 'rocketchat.png',
-    Blog: 'medium.png',
-    Twitter: 'twitter.png',
-    Reddit: 'reddit.png',
-    Forum: 'discourse.png',
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
 };
 
 export interface FooterProps {
     translate?: Translate;
+    onLanguageSelected?: (language: Language) => void;
 }
 
-interface FooterState {}
+interface FooterState {
+    selectedLanguage: Language;
+}
 
 export class Footer extends React.Component<FooterProps, FooterState> {
     public static defaultProps: Partial<FooterProps> = {
         translate: new Translate(),
     };
+    constructor(props: FooterProps) {
+        super();
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
     public render() {
         const menuItemsBySection: MenuItemsBySection = {
             [Key.Documentation]: [
@@ -66,7 +77,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                     path: WebsitePaths.Wiki,
                 },
                 {
-                    title: this.props.translate.get(Key.FAQ, Deco.Cap),
+                    title: this.props.translate.get(Key.Faq, Deco.Cap),
                     path: WebsitePaths.FAQ,
                 },
             ],
@@ -115,6 +126,9 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                 },
             ],
         };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
         return (
             <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
                 <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
@@ -133,6 +147,15 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                             >
                                 © ZeroEx, Intl.
                             </div>
+                            <div className="pt4 center">
+                                <DropDownMenu
+                                    labelStyle={{ color: colors.white }}
+                                    value={this.state.selectedLanguage}
+                                    onChange={this._updateLanguage.bind(this)}
+                                >
+                                    {languageMenuItems}
+                                </DropDownMenu>
+                            </div>
                         </div>
                     </div>
                     <div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
@@ -167,6 +190,13 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         );
     }
     private _renderMenuItem(item: FooterMenuItem) {
+        const titleToIcon: { [title: string]: string } = {
+            'Rocket.chat': 'rocketchat.png',
+            [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
+            Twitter: 'twitter.png',
+            Reddit: 'reddit.png',
+            [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
+        };
         const iconIfExists = titleToIcon[item.title];
         return (
             <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
@@ -209,4 +239,12 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
+    private _updateLanguage(e: any, index: number, value: Language) {
+        this.setState({
+            selectedLanguage: value,
+        });
+        if (!_.isUndefined(this.props.onLanguageSelected)) {
+            this.props.onLanguageSelected(value);
+        }
+    }
 }
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 15bfe2a39..43e92bb9b 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -152,7 +152,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         };
         const hoverActiveNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
-                <div style={{ paddingRight: 10 }}>Developers</div>
+                <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
                 <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
                     <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
                 </div>
@@ -295,7 +295,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     </a>
                     <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
                         <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
-                            {this.props.translate.get(Key.FAQ, Deco.Cap)}
+                            {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </MenuItem>
                     </Link>
                 </div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 983050abc..e70381456 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -34,7 +34,7 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                   marginTop: 15,
                   paddingLeft: 9,
                   paddingRight: 9,
-                  width: 77,
+                  minWidth: 77,
               }
             : {};
         const menuItemColor = this.props.isNightVersion ? 'white' : this.props.style.color;