feat: make project build by adding back old footer component

10 files changed, 240 insertions, 12 deletions

diff --git a/packages/website/ts/components/layout.tsx b/packages/website/ts/components/layout.tsx
index 770ee159c..9563f80f8 100644
--- a/packages/website/ts/components/layout.tsx
+++ b/packages/website/ts/components/layout.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/@next/constants/utilities';
+import { getCSSPadding, PADDING_SIZES, PaddingInterface } from 'ts/constants/utilities';
 
 interface WrapWidths {
     default: string;
diff --git a/packages/website/ts/components/old_footer.tsx b/packages/website/ts/components/old_footer.tsx
new file mode 100644
index 000000000..6366bf4ea
--- /dev/null
+++ b/packages/website/ts/components/old_footer.tsx
@@ -0,0 +1,228 @@
+import { ALink, colors, Link } from '@0x/react-shared';
+import { ObjectMap } from '@0x/types';
+import * as _ from 'lodash';
+import DropDownMenu from 'material-ui/DropDownMenu';
+import MenuItem from 'material-ui/MenuItem';
+import * as React from 'react';
+
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+const ICON_DIMENSION = 16;
+
+const languageToMenuTitle = {
+    [Language.English]: 'English',
+    [Language.Russian]: 'Русский',
+    [Language.Spanish]: 'Español',
+    [Language.Korean]: '한국어',
+    [Language.Chinese]: '中文',
+};
+
+export interface FooterProps {
+    translate: Translate;
+    dispatcher: Dispatcher;
+    backgroundColor?: string;
+}
+
+interface FooterState {
+    selectedLanguage: Language;
+}
+
+export class Footer extends React.Component<FooterProps, FooterState> {
+    public static defaultProps = {
+        backgroundColor: colors.darkerGrey,
+    };
+    constructor(props: FooterProps) {
+        super(props);
+        this.state = {
+            selectedLanguage: props.translate.getLanguage(),
+        };
+    }
+    public render(): React.ReactNode {
+        const sectionNameToLinks: ObjectMap<ALink[]> = {
+            [Key.Documentation]: [
+                {
+                    title: 'Developer Home',
+                    to: WebsitePaths.Docs,
+                },
+                {
+                    title: '0x.js',
+                    to: WebsitePaths.ZeroExJs,
+                },
+                {
+                    title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
+                    to: WebsitePaths.SmartContracts,
+                },
+                {
+                    title: this.props.translate.get(Key.Connect, Deco.Cap),
+                    to: WebsitePaths.Connect,
+                },
+                {
+                    title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
+                    to: WebsitePaths.Whitepaper,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Wiki, Deco.Cap),
+                    to: WebsitePaths.Wiki,
+                },
+            ],
+            [Key.Community]: [
+                {
+                    title: this.props.translate.get(Key.Discord, Deco.Cap),
+                    to: constants.URL_ZEROEX_CHAT,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Blog, Deco.Cap),
+                    to: constants.URL_BLOG,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: 'Twitter',
+                    to: constants.URL_TWITTER,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: 'Reddit',
+                    to: constants.URL_REDDIT,
+                    shouldOpenInNewTab: true,
+                },
+                {
+                    title: this.props.translate.get(Key.Forum, Deco.Cap),
+                    to: constants.URL_DISCOURSE_FORUM,
+                    shouldOpenInNewTab: true,
+                },
+            ],
+            [Key.Organization]: [
+                {
+                    title: this.props.translate.get(Key.About, Deco.Cap),
+                    to: WebsitePaths.About,
+                },
+                {
+                    title: this.props.translate.get(Key.Careers, Deco.Cap),
+                    to: WebsitePaths.Careers,
+                },
+                {
+                    title: this.props.translate.get(Key.Contact, Deco.Cap),
+                    to: 'mailto:team@0x.org',
+                    shouldOpenInNewTab: true,
+                },
+            ],
+        };
+        const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
+            return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
+        });
+        return (
+            <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
+                <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
+                    <div className="col lg-col-4 md-col-4 col-12 left">
+                        <div className="sm-mx-auto" style={{ width: 148 }}>
+                            <div>
+                                <img src="/images/protocol_logo_white.png" height="30" />
+                            </div>
+                            <div
+                                style={{
+                                    fontSize: 11,
+                                    color: colors.grey,
+                                    paddingLeft: 37,
+                                    paddingTop: 2,
+                                }}
+                            >
+                                © 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">
+                        <div className="col lg-col-4 md-col-4 col-12">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Documentation)}
+                                {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                        <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Community)}
+                                {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                        <div className="col lg-col-4 md-col-4 col-12">
+                            <div className="lg-right md-right sm-center">
+                                {this._renderHeader(Key.Organization)}
+                                {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _renderIcon(fileName: string): React.ReactNode {
+        return (
+            <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
+                <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
+            </div>
+        );
+    }
+    private _renderMenuItem(link: ALink): React.ReactNode {
+        const titleToIcon: { [title: string]: string } = {
+            [this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.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[link.title];
+        return (
+            <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+                <Link
+                    to={link.to}
+                    shouldOpenInNewTab={link.shouldOpenInNewTab}
+                    fontColor={colors.white}
+                    className="text-decoration-none"
+                >
+                    <div>
+                        {!_.isUndefined(iconIfExists) ? (
+                            <div className="inline-block">
+                                <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
+                                <div className="table-cell">{link.title}</div>
+                            </div>
+                        ) : (
+                            link.title
+                        )}
+                    </div>
+                </Link>
+            </div>
+        );
+    }
+    private _renderHeader(key: Key): React.ReactNode {
+        const headerStyle = {
+            color: colors.grey400,
+            letterSpacing: 2,
+            fontFamily: 'Roboto Mono',
+            fontSize: 13,
+        };
+        return (
+            <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
+                {this.props.translate.get(key, Deco.Upper)}
+            </div>
+        );
+    }
+    private _updateLanguage(_event: any, _index: number, value: Language): void {
+        this.setState({
+            selectedLanguage: value,
+        });
+        this.props.dispatcher.updateSelectedLanguage(value);
+    }
+}
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 81a3f59e1..39bbc584f 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -2,7 +2,7 @@ import { colors, Link, Styles } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index c4965e61c..8cde7224e 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -2,7 +2,7 @@ import { colors, Styles } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/instant/config_generator.tsx b/packages/website/ts/pages/instant/config_generator.tsx
index 024d37b51..e43d47119 100644
--- a/packages/website/ts/pages/instant/config_generator.tsx
+++ b/packages/website/ts/pages/instant/config_generator.tsx
@@ -6,13 +6,13 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
-import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
 import { CheckMark } from 'ts/components/ui/check_mark';
 import { Container } from 'ts/components/ui/container';
 import { MultiSelect } from 'ts/components/ui/multi_select';
 import { Spinner } from 'ts/components/ui/spinner';
 import { Text } from 'ts/components/ui/text';
+import { ConfigGeneratorAddressInput } from 'ts/pages/instant/config_generator_address_input';
+import { FeePercentageSlider } from 'ts/pages/instant/fee_percentage_slider';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -21,8 +21,8 @@ import { constants } from 'ts/utils/constants';
 import { Heading } from 'ts/components/text';
 import { Select, SelectItemConfig } from 'ts/pages/instant/select';
 
-import { assetMetaDataMap } from '../../../../../instant/src/data/asset_meta_data_map';
-import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+import { assetMetaDataMap } from '../../../../instant/src/data/asset_meta_data_map';
+import { ERC20AssetMetaData, ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
 export interface ConfigGeneratorProps {
     value: ZeroExInstantBaseConfig;
diff --git a/packages/website/ts/pages/instant/configurator.tsx b/packages/website/ts/pages/instant/configurator.tsx
index c5f7b06a5..a63e1752e 100644
--- a/packages/website/ts/pages/instant/configurator.tsx
+++ b/packages/website/ts/pages/instant/configurator.tsx
@@ -10,7 +10,7 @@ import { Column, FlexWrap } from 'ts/components/newLayout';
 import { Heading } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';
 
-import { ZeroExInstantBaseConfig } from '../../../../../instant/src/types';
+import { ZeroExInstantBaseConfig } from '../../../../instant/src/types';
 
 export interface ConfiguratorState {
     instantConfig: ZeroExInstantBaseConfig;
diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx
index 728e17f9e..872dc6103 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -3,8 +3,8 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 
-import { Footer } from 'ts/components/footer';
 import { MetaTags } from 'ts/components/meta_tags';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Container } from 'ts/components/ui/container';
 import { Benefits } from 'ts/pages/jobs/benefits';
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b75b55edb..aac659fd5 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -2,8 +2,8 @@ import { colors, Link } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
 import { SubscribeForm } from 'ts/components/forms/subscribe_form';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx
index 4ea56dbd4..37794e887 100644
--- a/packages/website/ts/pages/launch_kit/launch_kit.tsx
+++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx
@@ -2,7 +2,7 @@ import { colors, Link } from '@0x/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle from 'react-document-title';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index a7992a8fa..6abd8fc80 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Footer } from 'ts/components/footer';
+import { Footer } from 'ts/components/old_footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { FullscreenMessage } from 'ts/pages/fullscreen_message';
 import { Dispatcher } from 'ts/redux/dispatcher';