aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/footer.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-11-19 20:49:16 +0800
committerFabio Berger <me@fabioberger.com>2018-11-19 20:49:16 +0800
commit8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c (patch)
tree587ce5e026674e5665ad164995aac69462290aed /packages/website/ts/components/footer.tsx
parent7d2c975d7335155b85a7549c25b953d0afacf5cf (diff)
parent94de441de744ed53470335122a38e265c3a71aff (diff)
downloaddexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar.gz
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar.bz2
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar.lz
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar.xz
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.tar.zst
dexon-0x-contracts-8175192f60e2c2827f6e7d664fbe8bf2d9ddee9c.zip
Merge branch 'development'
* development: (957 commits) fix(order_utils.py): publish docs to S3, not RTD (#1264) fix: make instant package private feat: refer to map file in postpublish configs feat: add new bundle name to bundle watch fix: tslint ignore rule in wrong place Update blog post feature Fix disclaimer on mobile Add smart contract docs to Developer Home Add Apache license link Fix capitalization in title Remove excess semi-colon Point directly to README for docs link Update icons Update LICENSE Fix disclaimer Add blogpost URL Add disclaimer Add launch kit to Developer home list of tools feat: Deploy contracts to Rinkeby fix: fix exceeds block gas limit error ...
Diffstat (limited to 'packages/website/ts/components/footer.tsx')
-rw-r--r--packages/website/ts/components/footer.tsx116
1 files changed, 50 insertions, 66 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6dcb5a0e9..e10005a0a 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,31 +1,17 @@
-import { colors } from '@0xproject/react-shared';
+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 { Link } from 'react-router-dom';
+
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';
-interface MenuItemsBySection {
- [sectionName: string]: FooterMenuItem[];
-}
-
-interface FooterMenuItem {
- title: string;
- path?: string;
- isExternal?: boolean;
-}
-
const ICON_DIMENSION = 16;
-const linkStyle = {
- color: colors.white,
- cursor: 'pointer',
-};
-
const languageToMenuTitle = {
[Language.English]: 'English',
[Language.Russian]: 'Русский',
@@ -37,6 +23,7 @@ const languageToMenuTitle = {
export interface FooterProps {
translate: Translate;
dispatcher: Dispatcher;
+ backgroundColor?: string;
}
interface FooterState {
@@ -44,6 +31,9 @@ interface FooterState {
}
export class Footer extends React.Component<FooterProps, FooterState> {
+ public static defaultProps = {
+ backgroundColor: colors.darkerGrey,
+ };
constructor(props: FooterProps) {
super(props);
this.state = {
@@ -51,76 +41,74 @@ export class Footer extends React.Component<FooterProps, FooterState> {
};
}
public render(): React.ReactNode {
- const menuItemsBySection: MenuItemsBySection = {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {
[Key.Documentation]: [
{
+ title: 'Developer Home',
+ to: WebsitePaths.Docs,
+ },
+ {
title: '0x.js',
- path: WebsitePaths.ZeroExJs,
+ to: WebsitePaths.ZeroExJs,
},
{
title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
- path: WebsitePaths.SmartContracts,
+ to: WebsitePaths.SmartContracts,
},
{
title: this.props.translate.get(Key.Connect, Deco.Cap),
- path: WebsitePaths.Connect,
+ to: WebsitePaths.Connect,
},
{
title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
- path: WebsitePaths.Whitepaper,
- isExternal: true,
+ to: WebsitePaths.Whitepaper,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Wiki, Deco.Cap),
- path: WebsitePaths.Wiki,
- },
- {
- title: this.props.translate.get(Key.Faq, Deco.Cap),
- path: WebsitePaths.FAQ,
+ to: WebsitePaths.Wiki,
},
],
[Key.Community]: [
{
title: this.props.translate.get(Key.RocketChat, Deco.Cap),
- isExternal: true,
- path: constants.URL_ZEROEX_CHAT,
+ to: constants.URL_ZEROEX_CHAT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Blog, Deco.Cap),
- isExternal: true,
- path: constants.URL_BLOG,
+ to: constants.URL_BLOG,
+ shouldOpenInNewTab: true,
},
{
title: 'Twitter',
- isExternal: true,
- path: constants.URL_TWITTER,
+ to: constants.URL_TWITTER,
+ shouldOpenInNewTab: true,
},
{
title: 'Reddit',
- isExternal: true,
- path: constants.URL_REDDIT,
+ to: constants.URL_REDDIT,
+ shouldOpenInNewTab: true,
},
{
title: this.props.translate.get(Key.Forum, Deco.Cap),
- isExternal: true,
- path: constants.URL_DISCOURSE_FORUM,
+ to: constants.URL_DISCOURSE_FORUM,
+ shouldOpenInNewTab: true,
},
],
[Key.Organization]: [
{
title: this.props.translate.get(Key.About, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.About,
+ to: WebsitePaths.About,
},
{
title: this.props.translate.get(Key.Careers, Deco.Cap),
- isExternal: false,
- path: WebsitePaths.Careers,
+ to: WebsitePaths.Careers,
},
{
title: this.props.translate.get(Key.Contact, Deco.Cap),
- isExternal: true,
- path: 'mailto:team@0xproject.com',
+ to: 'mailto:team@0xproject.com',
+ shouldOpenInNewTab: true,
},
],
};
@@ -128,7 +116,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
});
return (
- <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}>
+ <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 }}>
@@ -160,19 +148,19 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<div className="col lg-col-4 md-col-4 col-12">
<div className="lg-right md-right sm-center">
{this._renderHeader(Key.Documentation)}
- {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
+ {_.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(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
+ {_.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(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
+ {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -187,7 +175,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
- private _renderMenuItem(item: FooterMenuItem): React.ReactNode {
+ private _renderMenuItem(link: ALink): React.ReactNode {
const titleToIcon: { [title: string]: string } = {
[this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
[this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
@@ -195,30 +183,26 @@ export class Footer extends React.Component<FooterProps, FooterState> {
Reddit: 'reddit.png',
[this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
};
- const iconIfExists = titleToIcon[item.title];
+ const iconIfExists = titleToIcon[link.title];
return (
- <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
- {item.isExternal ? (
- <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+ <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">{item.title}</div>
+ <div className="table-cell">{link.title}</div>
</div>
) : (
- item.title
+ link.title
)}
- </a>
- ) : (
- <Link to={item.path} style={linkStyle} className="text-decoration-none">
- <div>
- {!_.isUndefined(iconIfExists) && (
- <div className="pr1">{this._renderIcon(iconIfExists)}</div>
- )}
- {item.title}
- </div>
- </Link>
- )}
+ </div>
+ </Link>
</div>
);
}