aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/footer.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/footer.tsx')
-rw-r--r--packages/website/ts/components/footer.tsx368
1 files changed, 154 insertions, 214 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 6366bf4ea..3765a32ca 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,228 +1,168 @@
-import { ALink, colors, Link } from '@0x/react-shared';
-import { ObjectMap } from '@0x/types';
+import { Link as SmartLink } from '@0x/react-shared';
import * as _ from 'lodash';
-import DropDownMenu from 'material-ui/DropDownMenu';
-import MenuItem from 'material-ui/MenuItem';
import * as React from 'react';
+import MediaQuery from 'react-responsive';
+import styled from 'styled-components';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { Logo } from 'ts/components/logo';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { NewsletterForm } from 'ts/components/newsletter_form';
+import { 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 LinkInterface {
+ text: string;
+ url: string;
+ shouldOpenInNewTab?: boolean;
+}
+
+interface LinkRows {
+ heading: string;
+ isOnMobile?: boolean;
+ links: LinkInterface[];
}
-interface FooterState {
- selectedLanguage: Language;
+interface LinkListProps {
+ links: LinkInterface[];
}
-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(),
- };
+const linkRows: LinkRows[] = [
+ {
+ heading: 'Products',
+ isOnMobile: true,
+ links: [
+ { url: WebsitePaths.Instant, text: '0x Instant' },
+ { url: WebsitePaths.LaunchKit, text: '0x Launch Kit' },
+ ],
+ },
+ {
+ heading: 'Developers',
+ links: [
+ { url: WebsitePaths.Docs, text: 'Documentation' },
+ { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true },
+ { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protocol Spec', shouldOpenInNewTab: true },
+ ],
+ },
+ {
+ heading: 'About',
+ isOnMobile: true,
+ links: [
+ { url: WebsitePaths.AboutMission, text: 'Mission' },
+ { url: WebsitePaths.AboutTeam, text: 'Team' },
+ { url: WebsitePaths.AboutJobs, text: 'Jobs' },
+ { url: WebsitePaths.AboutPress, text: 'Press' },
+ { url: WebsitePaths.Ecosystem, text: 'Grant Program' },
+ ],
+ },
+ {
+ heading: 'Community',
+ isOnMobile: true,
+ links: [
+ { url: constants.URL_TWITTER, text: 'Twitter', shouldOpenInNewTab: true },
+ { url: constants.URL_ZEROEX_CHAT, text: 'Discord Chat', shouldOpenInNewTab: true },
+ { url: constants.URL_FACEBOOK, text: 'Facebook', shouldOpenInNewTab: true },
+ { url: constants.URL_REDDIT, text: 'Reddit', shouldOpenInNewTab: true },
+ ],
+ },
+];
+
+export const Footer: React.StatelessComponent = () => (
+ <FooterWrap>
+ <FlexWrap>
+ <FooterColumn width="35%">
+ <Logo />
+ <NewsletterForm />
+ </FooterColumn>
+
+ <FooterColumn width="55%">
+ <WrapGrid isCentered={false} isWrapped={true}>
+ {_.map(linkRows, (row: LinkRows, index) => (
+ <MediaQuery minWidth={row.isOnMobile ? 0 : 768} key={`fc-${index}`}>
+ <FooterSectionWrap>
+ <RowHeading>{row.heading}</RowHeading>
+
+ <LinkList links={row.links} />
+ </FooterSectionWrap>
+ </MediaQuery>
+ ))}
+ </WrapGrid>
+ </FooterColumn>
+ </FlexWrap>
+ </FooterWrap>
+);
+
+const LinkList = (props: LinkListProps) => (
+ <List>
+ {_.map(props.links, (link, index) => (
+ <li key={`fl-${index}`}>
+ <Link to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
+ {link.text}
+ </Link>
+ </li>
+ ))}
+ </List>
+);
+
+const FooterWrap = styled.footer`
+ padding: 40px 30px 30px 30px;
+ margin-top: 30px;
+ background-color: ${props => props.theme.footerBg};
+ color: ${props => props.theme.footerColor};
+
+ path {
+ fill: ${props => props.theme.footerColor};
+ }
+
+ @media (min-width: 768px) {
+ height: 350px;
}
- 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>
- );
+`;
+
+const FooterColumn = styled(Column)`
+ @media (min-width: 768px) {
+ width: ${props => props.width};
}
- 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>
- );
+
+ @media (max-width: 768px) {
+ text-align: left;
}
- 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>
- );
+`;
+
+const FooterSectionWrap = styled(FooterColumn)`
+ @media (max-width: 768px) {
+ width: 50%;
+
+ & + & {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
}
- 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>
- );
+`;
+
+const RowHeading = styled.h3`
+ color: inherit;
+ font-weight: 700;
+ font-size: 16px;
+ margin-bottom: 1.25em;
+ opacity: 0.75;
+`;
+
+const List = styled.ul`
+ li + li {
+ margin-top: 8px;
}
- private _updateLanguage(_event: any, _index: number, value: Language): void {
- this.setState({
- selectedLanguage: value,
- });
- this.props.dispatcher.updateSelectedLanguage(value);
+`;
+
+const Link = styled(SmartLink)`
+ color: inherit;
+ opacity: 0.5;
+ display: block;
+ font-size: 16px;
+ line-height: 20px;
+ transition: opacity 0.25s;
+ text-decoration: none;
+
+ &:hover {
+ opacity: 0.8;
}
-}
+`;