From b3038787ea0bf82514d165b49cef81c2a0c7a5fa Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 5 Dec 2018 11:46:28 +0000 Subject: Replace Rocket.chat with Discord --- packages/website/ts/components/footer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index e10005a0a..57071ee29 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -71,7 +71,7 @@ export class Footer extends React.Component { ], [Key.Community]: [ { - title: this.props.translate.get(Key.RocketChat, Deco.Cap), + title: this.props.translate.get(Key.Discord, Deco.Cap), to: constants.URL_ZEROEX_CHAT, shouldOpenInNewTab: true, }, @@ -177,7 +177,7 @@ export class Footer extends React.Component { } 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.Discord, Deco.Cap)]: 'rocketchat.png', [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png', Twitter: 'twitter.png', Reddit: 'reddit.png', -- cgit v1.2.3 From fc5f0c9863859283cca02ae06df1dea6fb2867e4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 6 Dec 2018 13:28:03 +0000 Subject: Switch out RocketChat icon with Discord icon --- packages/website/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 57071ee29..1098d6d0b 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -177,7 +177,7 @@ export class Footer extends React.Component { } private _renderMenuItem(link: ALink): React.ReactNode { const titleToIcon: { [title: string]: string } = { - [this.props.translate.get(Key.Discord, Deco.Cap)]: 'rocketchat.png', + [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', -- cgit v1.2.3 From 51b1cab72a80b8ef05038ecf392d9c72b8d4294e Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 14 Dec 2018 14:46:05 -0800 Subject: fix(website) replace 0xproject.com with 0x.org --- packages/website/ts/components/footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 1098d6d0b..6366bf4ea 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -107,7 +107,7 @@ export class Footer extends React.Component { }, { title: this.props.translate.get(Key.Contact, Deco.Cap), - to: 'mailto:team@0xproject.com', + to: 'mailto:team@0x.org', shouldOpenInNewTab: true, }, ], -- cgit v1.2.3 From abdf91c691b924b75d71db49fba296da9c8ddcac Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:01:53 -0800 Subject: feat: move all @next files to non @next directory --- packages/website/ts/components/footer.tsx | 368 +++++++++++++----------------- 1 file changed, 154 insertions(+), 214 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index 6366bf4ea..b30a0cc5e 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/@next/components/logo'; +import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; +import { NewsletterForm } from 'ts/@next/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 { - 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 = () => ( + + + + + + + + + + {_.map(linkRows, (row: LinkRows, index) => ( + + + {row.heading} + + + + + ))} + + + + +); + +const LinkList = (props: LinkListProps) => ( + + {_.map(props.links, (link, index) => ( +
  • + + {link.text} + +
    • + ))} +     +); + +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 = { - [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 ; - }); - return ( -
    -
    -
    -
    -
    - -
    -
    - © ZeroEx, Intl. -
    -
    - - {languageMenuItems} - -
    -
    -
    -
    -
    -
    - {this._renderHeader(Key.Documentation)} - {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))} -
    -
    -
    -
    - {this._renderHeader(Key.Community)} - {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))} -
    -
    -
    -
    - {this._renderHeader(Key.Organization)} - {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))} -
    -
    -
    -
    -
    - ); +`; + +const FooterColumn = styled(Column)` + @media (min-width: 768px) { + width: ${props => props.width}; } - private _renderIcon(fileName: string): React.ReactNode { - return ( -
    - -
    - ); + + @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 ( -
    - -
    - {!_.isUndefined(iconIfExists) ? ( -
    -
    {this._renderIcon(iconIfExists)}
    -
    {link.title}
    -
    - ) : ( - link.title - )} -
    - -
    - ); +`; + +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 ( -
    - {this.props.translate.get(key, Deco.Upper)} -
    - ); +`; + +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; } -} +`; -- cgit v1.2.3 From a67b34700e48cdf9a54c601af4ec9b9112fe4803 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 20 Dec 2018 16:03:06 -0800 Subject: feat: remove @next directory from all imports --- packages/website/ts/components/footer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components/footer.tsx') diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index b30a0cc5e..3765a32ca 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import MediaQuery from 'react-responsive'; import styled from 'styled-components'; -import { Logo } from 'ts/@next/components/logo'; -import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; -import { NewsletterForm } from 'ts/@next/components/newsletter_form'; +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'; -- cgit v1.2.3