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.tsx169
1 files changed, 61 insertions, 108 deletions
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 5e3c0479a..a0f1a0c96 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,14 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
-import {
- Link,
-} from 'react-router-dom';
-import {HashLink} from 'react-router-hash-link';
-import {
- Link as ScrollLink,
-} from 'react-scroll';
-import {Styles, WebsitePaths} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
interface MenuItemsBySection {
[sectionName: string]: FooterMenuItem[];
@@ -18,7 +13,6 @@ interface FooterMenuItem {
title: string;
path?: string;
isExternal?: boolean;
- fileName?: string;
}
enum Sections {
@@ -28,9 +22,6 @@ enum Sections {
}
const ICON_DIMENSION = 16;
-const CUSTOM_DARK_GRAY = '#393939';
-const CUSTOM_LIGHT_GRAY = '#CACACA';
-const CUSTOM_LIGHTEST_GRAY = '#9E9E9E';
const menuItemsBySection: MenuItemsBySection = {
Documentation: [
{
@@ -63,26 +54,27 @@ const menuItemsBySection: MenuItemsBySection = {
{
title: 'Rocket.chat',
isExternal: true,
- path: constants.ZEROEX_CHAT_URL,
- fileName: 'rocketchat.png',
+ path: constants.URL_ZEROEX_CHAT,
},
{
title: 'Blog',
isExternal: true,
- path: constants.BLOG_URL,
- fileName: 'medium.png',
+ path: constants.URL_BLOG,
},
{
title: 'Twitter',
isExternal: true,
- path: constants.TWITTER_URL,
- fileName: 'twitter.png',
+ path: constants.URL_TWITTER,
},
{
title: 'Reddit',
isExternal: true,
- path: constants.REDDIT_URL,
- fileName: 'reddit.png',
+ path: constants.URL_REDDIT,
+ },
+ {
+ title: 'Forum',
+ isExternal: true,
+ path: constants.URL_DISCOURSE_FORUM,
},
],
Organization: [
@@ -94,7 +86,7 @@ const menuItemsBySection: MenuItemsBySection = {
{
title: 'Careers',
isExternal: true,
- path: constants.ANGELLIST_URL,
+ path: constants.URL_ANGELLIST,
},
{
title: 'Contact',
@@ -104,34 +96,40 @@ const menuItemsBySection: MenuItemsBySection = {
],
};
const linkStyle = {
- color: 'white',
+ color: colors.white,
cursor: 'pointer',
};
-const titleToIcon: {[title: string]: string} = {
+const titleToIcon: { [title: string]: string } = {
'Rocket.chat': 'rocketchat.png',
- 'Blog': 'medium.png',
- 'Twitter': 'twitter.png',
- 'Reddit': 'reddit.png',
+ Blog: 'medium.png',
+ Twitter: 'twitter.png',
+ Reddit: 'reddit.png',
+ Forum: 'discourse.png',
};
-export interface FooterProps {
- location: Location;
-}
+export interface FooterProps {}
interface FooterState {}
export class Footer extends React.Component<FooterProps, FooterState> {
public render() {
return (
- <div className="relative pb4 pt2" style={{backgroundColor: CUSTOM_DARK_GRAY}}>
- <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{color: 'white'}}>
+ <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 }}>
<div className="col lg-col-4 md-col-4 col-12 left">
- <div className="sm-mx-auto" style={{width: 148}}>
+ <div className="sm-mx-auto" style={{ width: 148 }}>
<div>
<img src="/images/protocol_logo_white.png" height="30" />
</div>
- <div style={{fontSize: 11, color: CUSTOM_LIGHTEST_GRAY, paddingLeft: 37, paddingTop: 2}}>
+ <div
+ style={{
+ fontSize: 11,
+ color: colors.grey,
+ paddingLeft: 37,
+ paddingTop: 2,
+ }}
+ >
© ZeroEx, Intl.
</div>
</div>
@@ -139,20 +137,20 @@ export class Footer extends React.Component<FooterProps, FooterState> {
<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(Sections.Documentation)}
- {_.map(menuItemsBySection[Sections.Documentation], this.renderMenuItem.bind(this))}
+ {this._renderHeader(Sections.Documentation)}
+ {_.map(menuItemsBySection[Sections.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(Sections.Community)}
- {_.map(menuItemsBySection[Sections.Community], this.renderMenuItem.bind(this))}
+ {this._renderHeader(Sections.Community)}
+ {_.map(menuItemsBySection[Sections.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(Sections.Organization)}
- {_.map(menuItemsBySection[Sections.Organization], this.renderMenuItem.bind(this))}
+ {this._renderHeader(Sections.Organization)}
+ {_.map(menuItemsBySection[Sections.Organization], this._renderMenuItem.bind(this))}
</div>
</div>
</div>
@@ -160,100 +158,55 @@ export class Footer extends React.Component<FooterProps, FooterState> {
</div>
);
}
- private renderIcon(fileName: string) {
+ private _renderIcon(fileName: string) {
return (
- <div style={{height: ICON_DIMENSION, width: ICON_DIMENSION}}>
- <img src={`/images/social/${fileName}`} style={{width: ICON_DIMENSION}} />
+ <div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
+ <img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
</div>
);
}
- private renderMenuItem(item: FooterMenuItem) {
+ private _renderMenuItem(item: FooterMenuItem) {
const iconIfExists = titleToIcon[item.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}
- >
- {!_.isUndefined(iconIfExists) ?
- <div className="sm-mx-auto" style={{width: 65}}>
+ <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}>
+ {!_.isUndefined(iconIfExists) ? (
+ <div className="sm-mx-auto" style={{ width: 65 }}>
<div className="flex">
- <div className="pr1">
- {this.renderIcon(iconIfExists)}
- </div>
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
<div>{item.title}</div>
</div>
- </div> :
+ </div>
+ ) : (
item.title
- }
- </a> :
- <Link
- to={item.path}
- style={linkStyle}
- className="text-decoration-none"
- >
+ )}
+ </a>
+ ) : (
+ <Link to={item.path} style={linkStyle} className="text-decoration-none">
<div>
- {!_.isUndefined(iconIfExists) &&
- <div className="pr1">
- {this.renderIcon(iconIfExists)}
- </div>
- }
+ {!_.isUndefined(iconIfExists) && (
+ <div className="pr1">{this._renderIcon(iconIfExists)}</div>
+ )}
{item.title}
</div>
</Link>
- }
+ )}
</div>
);
}
- private renderHeader(title: string) {
+ private _renderHeader(title: string) {
const headerStyle = {
textTransform: 'uppercase',
- color: CUSTOM_LIGHT_GRAY,
+ color: colors.grey400,
letterSpacing: 2,
fontFamily: 'Roboto Mono',
fontSize: 13,
};
return (
- <div
- className="lg-pb2 md-pb2 sm-pt4"
- style={headerStyle}
- >
+ <div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
{title}
</div>
);
}
- private renderHomepageLink(title: string) {
- const hash = title.toLowerCase();
- if (this.props.location.pathname === WebsitePaths.Home) {
- return (
- <ScrollLink
- style={linkStyle}
- to={hash}
- smooth={true}
- offset={0}
- duration={constants.HOME_SCROLL_DURATION_MS}
- containerId="home"
- >
- {title}
- </ScrollLink>
- );
- } else {
- return (
- <HashLink
- to={`/#${hash}`}
- className="text-decoration-none"
- style={linkStyle}
- >
- {title}
- </HashLink>
- );
- }
- }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-13 21:09:57 +0800