diff options
| -rw-r--r-- | packages/website/ts/components/layout.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/components/old_footer.tsx | 228 | ||||
| -rw-r--r-- | packages/website/ts/pages/about/about.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/faq/faq.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/config_generator.tsx | 8 | ||||
| -rw-r--r-- | packages/website/ts/pages/instant/configurator.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/launch_kit/launch_kit.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/not_found.tsx | 2 |
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'; |