From cce07acf9a05774b27c19322650aba7648c1a76d Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 13:14:49 -0800 Subject: feat: update developer dropdown links --- .../components/dropdowns/dropdown_developers.tsx | 77 ++++++++-------------- 1 file changed, 29 insertions(+), 48 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index dfd351d32..eaf2351c2 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -1,12 +1,13 @@ import * as _ from 'lodash'; import * as React from 'react'; -import {Link as RouterLink} from 'react-router-dom'; -import styled, {withTheme} from 'styled-components'; +import { Link as RouterLink } from 'react-router-dom'; +import styled, { withTheme } from 'styled-components'; -import {Button} from 'ts/@next/components/button'; -import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout'; -import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; -import {Heading} from 'ts/@next/components/text'; +import { Button } from 'ts/@next/components/button'; +import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; +import { Heading } from 'ts/@next/components/text'; +import { WebsitePaths } from 'ts/types'; interface Props { theme: ThemeValuesInterface; @@ -15,48 +16,48 @@ interface Props { const introData = [ { label: 'Build a relayer', - url: 'https://0x.org/wiki#Build-A-Relayer', + url: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, { label: 'Develop on Ethereum', - url: 'https://0x.org/wiki#Ethereum-Development', + url: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { label: 'Make & take orders', - url: 'https://0x.org/wiki#Create,-Validate,-Fill-Order', + url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, { label: 'Use networked liquidity', - url: 'https://0x.org/wiki#Find,-Submit,-Fill-Order-From-Relayer', + url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; const docsData = [ { label: '0x.js', - url: 'https://0x.org/docs/0x.js', + url: WebsitePaths.ZeroExJs, }, { label: '0x Connect', - url: 'https://0x.org/docs/connect', + url: WebsitePaths.Connect, }, { label: 'Smart Contract', - url: 'https://0x.org/docs/contracts', + url: WebsitePaths.SmartContracts, }, ]; const linksData = [ { label: 'Wiki', - url: 'https://0x.org/wiki', + url: WebsitePaths.Wiki, }, { label: 'Github', url: 'https://github.com/0xProject', }, { - label: 'Whitepaper', + label: 'Protocol specification', url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', }, ]; @@ -65,23 +66,14 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro <>
- + Getting Started {_.map(introData, (item, index) => (
  • - + {item.label}
    • @@ -91,51 +83,40 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro - + Popular Docs
      {_.map(docsData, (item, index) => (
    • - - {item.label} - + {item.label}
      • ))}
    - + Useful Links
      {_.map(linksData, (item, index) => (
    • - - {item.label} - + {item.label}
      • ))}
    - + View All Documentation @@ -174,7 +155,7 @@ const StyledWrap = styled(FlexWrap)` opacity: 0.15; position: absolute; top: 0; - left:0; + left: 0; } `; -- cgit v1.2.3 From 9df0ae90bc98a80100cb254341d124568edd061e Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 13:28:49 -0800 Subject: feat: use react-shared Link component --- .../components/dropdowns/dropdown_developers.tsx | 30 +++++++++++++++------- 1 file changed, 21 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index eaf2351c2..acd5cb0ce 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -1,6 +1,6 @@ +import { Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; -import { Link as RouterLink } from 'react-router-dom'; import styled, { withTheme } from 'styled-components'; import { Button } from 'ts/@next/components/button'; @@ -13,7 +13,13 @@ interface Props { theme: ThemeValuesInterface; } -const introData = [ +interface LinkConfig { + label: string; + url: string; + shouldOpenInNewTab?: boolean; +} + +const introData: LinkConfig[] = [ { label: 'Build a relayer', url: `${WebsitePaths.Wiki}#Build-A-Relayer`, @@ -32,7 +38,7 @@ const introData = [ }, ]; -const docsData = [ +const docsData: LinkConfig[] = [ { label: '0x.js', url: WebsitePaths.ZeroExJs, @@ -47,7 +53,7 @@ const docsData = [ }, ]; -const linksData = [ +const linksData: LinkConfig[] = [ { label: 'Wiki', url: WebsitePaths.Wiki, @@ -55,10 +61,12 @@ const linksData = [ { label: 'Github', url: 'https://github.com/0xProject', + shouldOpenInNewTab: true, }, { label: 'Protocol specification', url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', + shouldOpenInNewTab: true, }, ]; @@ -73,9 +81,9 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro {_.map(introData, (item, index) => (
  • - + {item.label} - +
    • ))}     @@ -90,7 +98,9 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro
      {_.map(docsData, (item, index) => (
    • - {item.label} + + {item.label} +
      • ))}
    @@ -104,7 +114,9 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro
      {_.map(linksData, (item, index) => (
    • - {item.label} + + {item.label} +
      • ))}
    @@ -112,7 +124,7 @@ export const DropdownDevelopers: React.FunctionComponent = withTheme((pro Date: Mon, 17 Dec 2018 14:37:34 -0800 Subject: feat: fix links in navbar and dropdown --- packages/website/ts/@next/components/header.tsx | 85 ++++++++++++++----------- packages/website/ts/@next/components/link.tsx | 22 ++++--- 2 files changed, 61 insertions(+), 46 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 544a7daf1..00d45f123 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -1,8 +1,8 @@ +import { Link } from '@0x/react-shared'; import _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; -import { NavLink as ReactRouterLink } from 'react-router-dom'; -import styled, { withTheme } from 'styled-components'; +import styled, { css, withTheme } from 'styled-components'; import Headroom from 'react-headroom'; @@ -29,6 +29,7 @@ interface NavItemProps { text?: string; dropdownWidth?: number; dropdownComponent?: React.ReactNode; + shouldOpenInNewTab?: boolean; } interface DropdownWrapInterface { @@ -43,14 +44,12 @@ const navItems: NavItemProps[] = [ }, { id: 'products', - url: '#', text: 'Products', dropdownComponent: DropdownProducts, dropdownWidth: 280, }, { id: 'developers', - url: '#', text: 'Developers', dropdownComponent: DropdownDevelopers, dropdownWidth: 480, @@ -62,7 +61,8 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0x.org/latest', + url: 'https://blog.0xproject.com/latest', + shouldOpenInNewTab: true, text: 'Blog', }, ]; @@ -72,7 +72,7 @@ class HeaderBase extends React.Component { if (this.props.isNavToggled) { this.props.toggleMobileNav(); } - } + }; public render(): React.ReactNode { const { isNavToggled, toggleMobileNav, theme } = this.props; @@ -81,25 +81,16 @@ class HeaderBase extends React.Component { - + - + - {_.map(navItems, (link, index) => ( - - ))} + {_.map(navItems, (link, index) => )} - + Trade on 0x @@ -118,23 +109,30 @@ export const Header = withTheme(HeaderBase); const NavItem = (props: { link: NavItemProps; key: string }) => { const { link } = props; const Subnav = link.dropdownComponent; - + const linkElement = _.isUndefined(link.url) ? ( + {link.text} + ) : ( + + {link.text} + + ); return ( - - {link.text} - + {linkElement} - {link.dropdownComponent && + {link.dropdownComponent && ( - } + )} ); }; -const StyledHeader = styled.header` +const StyledHeader = + styled.header < + HeaderProps > + ` padding: 30px; background-color: ${props => props.theme.bgColor}; `; @@ -157,9 +155,7 @@ const LinkWrap = styled.li` } `; -const StyledNavLink = styled(ReactRouterLink).attrs({ - activeStyle: { opacity: 1 }, -})` +const linkStyles = css` color: ${props => props.theme.textColor}; opacity: 0.5; transition: opacity 0.35s; @@ -171,15 +167,25 @@ const StyledNavLink = styled(ReactRouterLink).attrs({ } `; +const StyledNavLink = styled(Link).attrs({ + activeStyle: { opacity: 1 }, +})` + ${linkStyles}; +`; + +const StyledAnchor = styled.a` + ${linkStyles}; +`; + const HeaderWrap = styled(FlexWrap)` - justify-content: space-between; - align-items: center; - - @media (max-width: 800px) { - padding-top: 0; - display: flex; - padding-bottom: 0; - } + justify-content: space-between; + align-items: center; + + @media (max-width: 800px) { + padding-top: 0; + display: flex; + padding-bottom: 0; + } `; const NavLinks = styled.ul` @@ -192,7 +198,10 @@ const NavLinks = styled.ul` } `; -const DropdownWrap = styled.div` +const DropdownWrap = + styled.div < + DropdownWrapInterface > + ` width: ${props => props.width || 280}px; padding: 15px 0; border: 1px solid transparent; diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx index c3633987a..6ca1e44c1 100644 --- a/packages/website/ts/@next/components/link.tsx +++ b/packages/website/ts/@next/components/link.tsx @@ -1,5 +1,5 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as React from 'react'; -import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; interface LinkInterface { @@ -16,16 +16,19 @@ interface LinkInterface { } export const Link = (props: LinkInterface) => { - const { - children, - isNoArrow, - href, - } = props; + const { children, isNoArrow, href } = props; return ( {children} - {!isNoArrow && } + {!isNoArrow && ( + + + + )} ); }; @@ -39,7 +42,10 @@ export const LinkWrap = styled.div` } `; -const StyledLink = styled(ReactRouterLink)` +const StyledLink = + styled(SmartLink) < + LinkInterface > + ` display: ${props => !props.isBlock && 'inline-flex'}; color: ${props => props.color || props.theme.linkColor}; text-align: center; -- cgit v1.2.3 From be3142a96a860d764ebb95cc2bc680fc11fd146e Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:12:54 -0800 Subject: feat: fix footer links --- .../components/dropdowns/dropdown_developers.tsx | 5 +-- packages/website/ts/@next/components/footer.tsx | 42 +++++++++++----------- packages/website/ts/utils/constants.ts | 1 + 3 files changed, 25 insertions(+), 23 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index acd5cb0ce..96d88846b 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -8,6 +8,7 @@ import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { Heading } from 'ts/@next/components/text'; import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface Props { theme: ThemeValuesInterface; @@ -60,12 +61,12 @@ const linksData: LinkConfig[] = [ }, { label: 'Github', - url: 'https://github.com/0xProject', + url: constants.URL_GITHUB_ORG, shouldOpenInNewTab: true, }, { label: 'Protocol specification', - url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', + url: constants.URL_PROTOCOL_SPECIFICATION, shouldOpenInNewTab: true, }, ]; diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 155f46979..cd3fe8363 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -1,3 +1,4 @@ +import { Link as SmartLink } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; @@ -8,11 +9,12 @@ 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'; interface LinkInterface { text: string; url: string; - newWindow?: boolean; + shouldOpenInNewTab?: boolean; } interface LinkRows { @@ -37,9 +39,9 @@ const linkRows: LinkRows[] = [ { heading: 'Developers', links: [ - { url: '#', text: 'Documentation' }, - { url: '#', text: 'GitHub' }, - { url: '#', text: 'Whitepaper' }, + { url: WebsitePaths.Docs, text: 'Documentation' }, + { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true }, + { url: WebsitePaths.Whitepaper, text: 'Whitepaper', shouldOpenInNewTab: true }, ], }, { @@ -57,10 +59,10 @@ const linkRows: LinkRows[] = [ heading: 'Community', isOnMobile: true, links: [ - { url: '#', text: 'Twitter' }, - { url: '#', text: 'Rocket Chat' }, - { url: '#', text: 'Facebook' }, - { url: '#', text: 'Reddit' }, + { 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 }, ], }, ]; @@ -78,9 +80,7 @@ export const Footer: React.StatelessComponent = () => ( {_.map(linkRows, (row: LinkRows, index) => ( - - {row.heading} - + {row.heading} @@ -93,15 +93,15 @@ export const Footer: React.StatelessComponent = () => ( ); const LinkList = (props: LinkListProps) => ( - - {_.map(props.links, (link, index) => ( -
  • - - {link.text} - -
    • - ))} -     + + {_.map(props.links, (link, index) => ( +
  • + + {link.text} + +
    • + ))} +     ); const FooterWrap = styled.footer` @@ -154,7 +154,7 @@ const List = styled.ul` } `; -const Link = styled(ReactRouterLink)` +const Link = styled(SmartLink)` color: inherit; opacity: 0.5; display: block; diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 3248d3911..0256ccd57 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -96,6 +96,7 @@ export const constants = { URL_SANDBOX: 'https://codesandbox.io/s/1qmjyp7p5j', URL_STANDARD_RELAYER_API_GITHUB: 'https://github.com/0xProject/standard-relayer-api/blob/master/README.md', URL_TWITTER: 'https://twitter.com/0xproject', + URL_FACEBOOK: 'https://www.facebook.com/0xProject/', URL_WETH_IO: 'https://weth.io/', URL_ZEROEX_CHAT, URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit', -- cgit v1.2.3 From 4cf3172c900f9b7ea7102ff2785932e8c9f473ca Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:34:21 -0800 Subject: feat: final footer polish --- packages/website/ts/@next/components/footer.tsx | 4 ++-- packages/website/ts/types.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index cd3fe8363..fedae5a1b 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -41,7 +41,7 @@ const linkRows: LinkRows[] = [ links: [ { url: WebsitePaths.Docs, text: 'Documentation' }, { url: constants.URL_GITHUB_ORG, text: 'GitHub', shouldOpenInNewTab: true }, - { url: WebsitePaths.Whitepaper, text: 'Whitepaper', shouldOpenInNewTab: true }, + { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protocol Spec', shouldOpenInNewTab: true }, ], }, { @@ -51,7 +51,7 @@ const linkRows: LinkRows[] = [ { url: WebsitePaths.AboutMission, text: 'Mission' }, { url: WebsitePaths.AboutTeam, text: 'Team' }, { url: WebsitePaths.AboutJobs, text: 'Jobs' }, - { url: WebsitePaths.AboutPress, text: 'Press Kit' }, + { url: WebsitePaths.AboutPress, text: 'Press' }, { url: WebsitePaths.Ecosystem, text: 'Grant Program' }, ], }, diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index b54ec94b6..e4df19990 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -359,7 +359,7 @@ export enum WebsitePaths { LaunchKit = '/launch-kit', Instant = '/instant', Community = '/community', - Ecosystem = '/ecosystem', + Ecosystem = '/eap', MarketMaker = '/market-maker', Why = '/why', Whitepaper = '/pdfs/0x_white_paper.pdf', -- cgit v1.2.3 From 64e84a35106717e569a8268494af83732eda7fd3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:39:22 -0800 Subject: feat: fix blog link --- packages/website/ts/@next/components/footer.tsx | 2 +- packages/website/ts/@next/components/header.tsx | 3 ++- packages/website/ts/utils/constants.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index fedae5a1b..1e4d7789b 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -41,7 +41,7 @@ const linkRows: LinkRows[] = [ 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 }, + { url: constants.URL_PROTOCOL_SPECIFICATION, text: 'Protogcol Spec', shouldOpenInNewTab: true }, ], }, { diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx index 00d45f123..e6b49e395 100644 --- a/packages/website/ts/@next/components/header.tsx +++ b/packages/website/ts/@next/components/header.tsx @@ -15,6 +15,7 @@ import { MobileNav } from 'ts/@next/components/mobileNav'; import { FlexWrap } from 'ts/@next/components/newLayout'; import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; interface HeaderProps { location?: Location; @@ -61,7 +62,7 @@ const navItems: NavItemProps[] = [ }, { id: 'blog', - url: 'https://blog.0xproject.com/latest', + url: constants.URL_BLOG, shouldOpenInNewTab: true, text: 'Blog', }, diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 0256ccd57..9cc5bf8a5 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -74,7 +74,7 @@ export const constants = { URL_ANGELLIST: 'https://angel.co/0xproject/jobs', URL_APACHE_LICENSE: 'http://www.apache.org/licenses/LICENSE-2.0', URL_BITLY_API: 'https://api-ssl.bitly.com', - URL_BLOG: 'https://blog.0x.org/latest', + URL_BLOG: 'https://blog.0xproject.com/latest', URL_DISCOURSE_FORUM: 'https://forum.0x.org', URL_FIREFOX_U2F_ADDON: 'https://addons.mozilla.org/en-US/firefox/addon/u2f-support-add-on/', URL_TESTNET_FAUCET: 'https://faucet.0x.org', -- cgit v1.2.3 From bb691aa4ed15f0d9ed4a3beb7778311faf57aef1 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 15:48:17 -0800 Subject: feat: more blog url fixes --- packages/website/ts/@next/components/mobileNav.tsx | 45 +++++++++++----------- packages/website/ts/components/eth_wrappers.tsx | 2 +- packages/website/ts/utils/constants.ts | 5 ++- 3 files changed, 26 insertions(+), 26 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx index 8b5ffd7e8..122036b9a 100644 --- a/packages/website/ts/@next/components/mobileNav.tsx +++ b/packages/website/ts/@next/components/mobileNav.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import MediaQuery from 'react-responsive'; import styled from 'styled-components'; -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; -import {WrapGrid, WrapProps} from 'ts/@next/components/newLayout'; +import { WrapGrid, WrapProps } from 'ts/@next/components/newLayout'; import { WebsitePaths } from 'ts/types'; interface Props { @@ -24,14 +24,10 @@ export class MobileNav extends React.PureComponent {
    • - - 0x Instant - + 0x Instant
    • - - 0x Launch Kit - + 0x Launch Kit
    @@ -39,39 +35,36 @@ export class MobileNav extends React.PureComponent {
  • - - Why 0x - + Why 0x
  • - - About - + About
  • - + Blog
    • - {isToggled && - - } + {isToggled && }     ); } } -const Wrap = styled.nav<{ isToggled: boolean }>` +const Wrap = + styled.nav < + { isToggled: boolean } > + ` width: 100%; height: 357px; background-color: ${props => props.theme.mobileNavBgUpper}; color: ${props => props.theme.mobileNavColor}; - transition: ${props => props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s'}; - transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0); + transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')}; + transform: translate3d(0, ${props => (props.isToggled ? 0 : '-100%')}, 0); visibility: ${props => !props.isToggled && 'hidden'}; position: fixed; display: flex; @@ -103,13 +96,19 @@ const Overlay = styled.div` cursor: pointer; `; -const Section = styled.div<{ isDark?: boolean }>` +const Section = + styled.div < + { isDark: boolean } > + ` width: 100%; padding: 15px 30px; background-color: ${props => props.isDark && props.theme.mobileNavBgLower}; `; -const Grid = styled(WrapGrid)` +const Grid = + styled(WrapGrid) < + WrapProps > + ` justify-content: flex-start; li { diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 61daa1103..dc597b18f 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -209,7 +209,7 @@ export class EthWrappers extends React.Component
    The{' '} - + canonical WETH {' '} contract is updated when necessary. Unwrap outdated WETH in order to
 retrieve your ETH and move diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts index 9cc5bf8a5..c8c8099c9 100644 --- a/packages/website/ts/utils/constants.ts +++ b/packages/website/ts/utils/constants.ts @@ -98,16 +98,17 @@ export const constants = { URL_TWITTER: 'https://twitter.com/0xproject', URL_FACEBOOK: 'https://www.facebook.com/0xProject/', URL_WETH_IO: 'https://weth.io/', + URL_CANONICAL_WETH_POST: 'https://blog.0xproject.com/canonical-weth-a9aa7d0279dd', URL_ZEROEX_CHAT, URL_LAUNCH_KIT: 'https://github.com/0xProject/0x-launch-kit', - URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0x.org/introducing-the-0x-launch-kit-4acdc3453585', + URL_LAUNCH_KIT_BLOG_POST: 'https://blog.0xproject.com/introducing-the-0x-launch-kit-4acdc3453585', URL_WEB3_DOCS: 'https://github.com/ethereum/wiki/wiki/JavaScript-API', URL_WEB3_DECODED_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L123', URL_WEB3_LOG_ENTRY_EVENT: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L127', URL_WEB3_PROVIDER_DOCS: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L150', URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js', - URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0x.org/the-0x-mission-and-values-181a58706f9f', + URL_MISSION_AND_VALUES_BLOG_POST: 'https://blog.0xproject.com/the-0x-mission-and-values-181a58706f9f', DEVELOPER_TOPBAR_LINKS: [ { title: Key.Wiki, -- cgit v1.2.3 From e0116da559ef52284fc990c81a8cff662c700c70 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:09:51 -0800 Subject: feat: link to mission and values --- packages/website/ts/@next/pages/about/mission.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index 78602f8ad..3b2b8895b 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -7,21 +7,25 @@ import { Definition } from 'ts/@next/components/definition'; import { Image } from 'ts/@next/components/image'; import { Column, Section } from 'ts/@next/components/newLayout'; import { Heading } from 'ts/@next/components/text'; +import { constants } from 'ts/utils/constants'; const values = [ { title: 'Do The Right Thing', - description: 'We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.', + description: + 'We acknowledge the broad subjectivity behind doing “the right thing,” and are committed to rigorously exploring its nuance in our decision making. We believe this responsibility drives our decision making above all else, and pledge to act in the best interest of our peers, community, and society as a whole.', icon: 'right-thing', }, { title: 'Consistently Ship', - description: 'Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.', + description: + 'Achieving our mission requires dedication and diligence. We aspire to be an organization that consistently ships. We set high-impact goals that are rooted in data and pride ourselves in consistently outputting outstanding results across the organization.', icon: 'consistently-ship', }, { title: 'Focus on Long-term Impact', - description: 'We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.', + description: + 'We anticipate that over time, awareness of the fundamentally disruptive nature of frictionless global exchange will cause some to see this technology as a threat. There will be setbacks, some will claim that this technology is too disruptive, and we will face adversity. Persistence and a healthy long-term focus will see us through these battles.', icon: 'long-term-impact', }, ]; @@ -31,15 +35,11 @@ export const NextAboutMission = () => ( title="Creating a tokenized world where all value can flow freely." description="0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past." linkLabel="Our mission and values" - linkUrl="#" + linkUrl={constants.URL_MISSION_AND_VALUES_BLOG_POST} >
    - 0x Offices + 0x Offices
    -- cgit v1.2.3 From 3cf9cf98dce9936c3ccca4589ea7c14b997ce50d Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:19:43 -0800 Subject: fix: mission and values link to new tab and not append --- .../ts/@next/components/aboutPageLayout.tsx | 55 ++++++++++++---------- packages/website/ts/@next/pages/about/mission.tsx | 2 +- 2 files changed, 30 insertions(+), 27 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 7d98804bb..86a94ae2b 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; @@ -14,7 +15,8 @@ interface Props { title: string; description: React.ReactNode | string; linkLabel?: string; - linkUrl?: string; + href?: string; + to?: string; children?: React.ReactNode; } @@ -22,31 +24,32 @@ export const AboutPageLayout = (props: Props) => (
    - Mission - Team - Press - Jobs - + Mission + Team + Press + Jobs + - - - - {props.title} - + + + {props.title} - - {props.description} - + + {props.description} + - {(props.linkLabel && props.linkUrl) && - - {props.linkLabel} - - } + {props.linkLabel && + (props.href || props.to) && ( + + {props.linkLabel} + + )}
    @@ -56,13 +59,13 @@ export const AboutPageLayout = (props: Props) => ( ); const AnimatedHeading = styled(Heading)` - ${addFadeInAnimation('0.5s')} + ${addFadeInAnimation('0.5s')}; `; const AnimatedParagraph = styled(Paragraph)` - ${addFadeInAnimation('0.5s', '0.15s')} + ${addFadeInAnimation('0.5s', '0.15s')}; `; const AnimatedLink = styled(Button)` - ${addFadeInAnimation('0.6s', '0.3s')} + ${addFadeInAnimation('0.6s', '0.3s')}; `; diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index 3b2b8895b..35aac684b 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -35,7 +35,7 @@ export const NextAboutMission = () => ( title="Creating a tokenized world where all value can flow freely." description="0x is important infrastructure for the emerging crypto economy and enables markets to be created that couldn't have existed before. As more assets become tokenized, public blockchains provide the opportunity to establish a new financial stack that is more efficient, transparent, and equitable than any system in the past." linkLabel="Our mission and values" - linkUrl={constants.URL_MISSION_AND_VALUES_BLOG_POST} + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} >
    -- cgit v1.2.3 From 53529439c57e78806678af2c060ade4b53c0869b Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:20:49 -0800 Subject: feat: update job titles --- packages/website/ts/@next/pages/about/team.tsx | 46 +++++++++----------------- 1 file changed, 16 insertions(+), 30 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx index bf8d02095..2c7146e1c 100644 --- a/packages/website/ts/@next/pages/about/team.tsx +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -64,7 +64,7 @@ const team: TeamMember[] = [ { imageUrl: '/images/@next/team/blake.jpg', name: 'Blake Henderson', - title: 'operations associate', + title: 'ecosystem programs lead', }, { imageUrl: '/images/@next/team/zack.jpg', @@ -89,7 +89,7 @@ const team: TeamMember[] = [ { imageUrl: '/images/@next/team/melo.jpg', name: 'Mel Oberto', - title: 'office ops / executive assistant', + title: 'people operations associate', }, { imageUrl: '/images/@next/team/alexb.jpg', @@ -183,20 +183,12 @@ export const NextAboutTeam = () => ( linkLabel="Join the team" linkUrl={WebsitePaths.AboutJobs} > -
    +
    0x Team - + {_.map(team, (info: TeamMember, index: number) => ( @@ -205,21 +197,12 @@ export const NextAboutTeam = () => (
    -
    +
    Advisors - + {_.map(advisors, (info: TeamMember, index: number) => ( @@ -239,9 +222,11 @@ const StyledGrid = styled.div` const Member = ({ name, title, imageUrl }: TeamMember) => ( - {name}/ + {name} {name} - {title} + + {title} + ); @@ -252,12 +237,13 @@ const StyledMember = styled.div` margin-right: 15px; @media (max-width: 600px) { - &:nth-child(2n+1) { + &:nth-child(2n + 1) { clear: left; } } - img, svg { + img, + svg { width: 100%; height: auto; object-fit: contain; @@ -268,7 +254,7 @@ const StyledMember = styled.div` width: calc(33.3333% - 30px); margin-right: 20px; - &:nth-child(3n+1) { + &:nth-child(3n + 1) { clear: left; } } @@ -276,11 +262,11 @@ const StyledMember = styled.div` @media (min-width: 900px) { width: calc(25% - 30px); - &:nth-child(3n+1) { + &:nth-child(3n + 1) { clear: none; } - &:nth-child(4n+1) { + &:nth-child(4n + 1) { clear: left; } } -- cgit v1.2.3 From 2107285a00b500e79677de219e27f88a1e3c7bd4 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:22:50 -0800 Subject: fix: use new AboutPageLayout API everywhere --- packages/website/ts/@next/pages/about/jobs.tsx | 2 +- packages/website/ts/@next/pages/about/team.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx index 1e9d54609..e6ad1d797 100644 --- a/packages/website/ts/@next/pages/about/jobs.tsx +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -95,7 +95,7 @@ export class NextAboutJobs extends React.Component } linkLabel="Our mission and values" - linkUrl="/about/mission" + to="/about/mission" >
    diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx index 2c7146e1c..421cacb24 100644 --- a/packages/website/ts/@next/pages/about/team.tsx +++ b/packages/website/ts/@next/pages/about/team.tsx @@ -181,7 +181,7 @@ export const NextAboutTeam = () => ( title="We are a global, growing team" description="We are a distributed team with backgrounds in engineering, academic research, business, and design. The 0x Core Team is passionate about accelerating the adoption decentralized technology and believe in its potential to be an equalizing force in the world. Join us and do the most impactful work of your life." linkLabel="Join the team" - linkUrl={WebsitePaths.AboutJobs} + to={WebsitePaths.AboutJobs} >
    -- cgit v1.2.3 From 4ac1db124783a0193d13b1519c17fef0f8c95c7a Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:25:22 -0800 Subject: feat: add press mailto link --- packages/website/ts/@next/pages/about/press.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index 7d8dfccab..fb9d445ba 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -22,7 +22,8 @@ const highlights: HighlightProps[] = [ { logo: '/images/@next/press/logo-forbes.png', title: 'Forbes', - text: '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.', + text: + '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.', href: '#', }, { @@ -34,13 +35,15 @@ const highlights: HighlightProps[] = [ { logo: '/images/@next/press/logo-fortune.png', title: 'Fortune', - text: 'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.', + text: + 'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.', href: '#', }, { logo: '/images/@next/press/logo-techcrunch.png', title: 'TechCrunch', - text: '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.', + text: + '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.', href: '#', }, ]; @@ -51,7 +54,8 @@ export const NextAboutPress = () => ( description={ <> - Want to write about 0x? Get in touch, or download our press kit. + Want to write about 0x? Get in touch, or{' '} + download our press kit. {_.map(highlights, (highlight, index) => ( @@ -72,7 +76,9 @@ export const Highlight: React.FunctionComponent = (props: Hi {highlight.text} - + ); -- cgit v1.2.3 From b255edc5771807ab3f169337e20693bbcccdf6f7 Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:26:07 -0800 Subject: feat: remove download our presskit copy --- packages/website/ts/@next/pages/about/press.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index fb9d445ba..50a99613a 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -54,8 +54,7 @@ export const NextAboutPress = () => ( description={ <> - Want to write about 0x? Get in touch, or{' '} - download our press kit. + Want to write about 0x? Get in touch. {_.map(highlights, (highlight, index) => ( -- cgit v1.2.3 From 0dcada8e06306f7c90ba6d494440ca7702c3467a Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:28:18 -0800 Subject: feat: add links to press page --- packages/website/ts/@next/pages/about/press.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx index 50a99613a..ef04506cf 100644 --- a/packages/website/ts/@next/pages/about/press.tsx +++ b/packages/website/ts/@next/pages/about/press.tsx @@ -24,27 +24,29 @@ const highlights: HighlightProps[] = [ title: 'Forbes', text: '0x Instant is aiming to aid businesses and developers such as news sites, crypto wallets, dApps or price trackers to monetize or add a new revenue stream to their existing pipeline.', - href: '#', + href: + 'https://www.forbes.com/sites/rebeccacampbell1/2018/12/06/0x-launches-instant-delivers-an-easy-and-flexible-way-to-buy-crypto-tokens/#bfb73a843561', }, { logo: '/images/@next/press/logo-venturebeat.png', title: 'VentureBeat', text: '0x leads the way for ‘tokenization’ of the world, and collectible game items are next', - href: '#', + href: + 'https://venturebeat.com/2018/09/24/0x-leads-the-way-for-tokenization-of-the-world-and-collectible-game-items-are-next/', }, { logo: '/images/@next/press/logo-fortune.png', title: 'Fortune', text: 'In the future, many traditional investments like real estate and corporate shares will come in the form of digital tokens that are bought and transferred on a blockchain.', - href: '#', + href: 'http://fortune.com/2018/09/06/0x-harbor-blockchain/', }, { logo: '/images/@next/press/logo-techcrunch.png', title: 'TechCrunch', text: '0x allows any developer to quickly build their own decentralized cryptocurrency exchange and decide their own fees.', - href: '#', + href: 'https://techcrunch.com/2018/07/16/0x/', }, ]; @@ -75,7 +77,7 @@ export const Highlight: React.FunctionComponent = (props: Hi {highlight.text} - -- cgit v1.2.3 From 7468be8f176e784fa1102dc128ac930a50d0710b Mon Sep 17 00:00:00 2001 From: fragosti Date: Mon, 17 Dec 2018 16:32:58 -0800 Subject: feat: redirect careers to jobs --- packages/website/ts/@next/pages/about/jobs.tsx | 3 ++- packages/website/ts/index.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx index e6ad1d797..4dc9d8002 100644 --- a/packages/website/ts/@next/pages/about/jobs.tsx +++ b/packages/website/ts/@next/pages/about/jobs.tsx @@ -7,6 +7,7 @@ import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; import { Heading, Paragraph } from 'ts/@next/components/text'; import { WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { constants } from 'ts/utils/constants'; const OPEN_POSITIONS_HASH = 'positions'; @@ -95,7 +96,7 @@ export class NextAboutJobs extends React.Component } linkLabel="Our mission and values" - to="/about/mission" + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} >
    diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 915d28aaa..f7a66c836 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -192,6 +192,7 @@ render( component={LazySolCompilerDocumentation} /> +
    -- cgit v1.2.3