aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/aboutPageLayout.tsx11
-rw-r--r--packages/website/ts/@next/components/banner.tsx16
-rw-r--r--packages/website/ts/@next/components/blockIconLink.tsx37
-rw-r--r--packages/website/ts/@next/components/button.tsx115
-rw-r--r--packages/website/ts/@next/components/definition.tsx8
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx4
-rw-r--r--packages/website/ts/@next/components/header.tsx135
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx4
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx2
-rw-r--r--packages/website/ts/@next/pages/about/press.tsx4
-rw-r--r--packages/website/ts/@next/pages/why.tsx7
11 files changed, 127 insertions, 216 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 2d871ac71..a5e8df7e8 100644
--- a/packages/website/ts/@next/components/aboutPageLayout.tsx
+++ b/packages/website/ts/@next/components/aboutPageLayout.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
-import { Link } from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { ChapterLink } from 'ts/@next/components/chapter_link';
import { Column, Section } from 'ts/@next/components/newLayout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
@@ -37,9 +37,12 @@ export const AboutPageLayout = (props: Props) => (
</AnimatedParagraph>
{(props.linkLabel && props.linkUrl) &&
- <AnimatedLink href={props.linkUrl} isNoBorder={true} isWithArrow={true}>
+ <AnimatedLink
+ to={props.linkUrl}
+ isWithArrow={true}
+ >
{props.linkLabel}
- </AnimatedLink>
+ </AnimatedLink>
}
</Column>
</Column>
@@ -57,6 +60,6 @@ const AnimatedParagraph = styled(Paragraph)`
${addFadeInAnimation('0.5s', '0.15s')}
`;
-const AnimatedLink = styled(Link)`
+const AnimatedLink = styled(Button)`
${addFadeInAnimation('0.6s', '0.3s')}
`;
diff --git a/packages/website/ts/@next/components/banner.tsx b/packages/website/ts/@next/components/banner.tsx
index 6b7603a10..a3740c25a 100644
--- a/packages/website/ts/@next/components/banner.tsx
+++ b/packages/website/ts/@next/components/banner.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import {colors} from 'ts/style/colors';
-import {Button, Link} from 'ts/@next/components/button';
+import {Button} from 'ts/@next/components/button';
import {Wrap, WrapCentered} from 'ts/@next/components/layout';
import {ThemeInterface} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
@@ -56,11 +56,21 @@ export const Banner: React.StatelessComponent<Props> = (props: Props) => {
<Column colWidth="1/2" isPadLarge={true}>
<ButtonWrap>
{mainCta &&
- <Link isTransparent={false} href={mainCta.href}>{mainCta.text}</Link>
+ <Button
+ isTransparent={false}
+ href={mainCta.href}
+ >
+ {mainCta.text}
+ </Button>
}
{secondaryCta &&
- <Button href={secondaryCta.href} isTransparent={true}>{secondaryCta.text}</Button>
+ <Button
+ href={secondaryCta.href}
+ isTransparent={true}
+ >
+ {secondaryCta.text}
+ </Button>
}
</ButtonWrap>
</Column>
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index 42b260731..7033ec88d 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -1,15 +1,15 @@
import * as React from 'react';
import styled from 'styled-components';
-import {Button, Link} from 'ts/@next/components/button';
+import {Button} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/icon';
interface Props {
icon: string;
title: string;
linkLabel: string;
- linkUrl?: string;
- onClick?: () => void;
+ linkUrl: string;
+ linkAction: () => void;
}
export const BlockIconLink = (props: Props) => (
@@ -25,29 +25,14 @@ export const BlockIconLink = (props: Props) => (
{props.title}
</Title>
- {props.linkUrl &&
- <Link
- isWithArrow={true}
- isTransparent={true}
- isNoBorder={true}
- href={props.linkUrl}
- onClick={props.onClick}
- >
- {props.linkLabel}
- </Link>
- }
-
- {props.onClick &&
- <Button
- isWithArrow={true}
- isTransparent={true}
- isNoBorder={true}
- href={props.linkUrl}
- onClick={props.onClick}
- >
- {props.linkLabel}
- </Button>
- }
+ <Button
+ isWithArrow={true}
+ isTransparent={true}
+ href={props.linkUrl}
+ onClick={props.linkAction}
+ >
+ {props.linkLabel}
+ </Button>
</div>
</Wrap>
);
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 377d1d820..cbe90c7c2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom';
import styled from 'styled-components';
-import { BREAKPOINTS } from 'ts/@next/components/layout';
import { colors } from 'ts/style/colors';
interface ButtonInterface {
@@ -11,7 +10,6 @@ interface ButtonInterface {
children?: Node | string;
isTransparent?: boolean;
isNoBorder?: boolean;
- isCentered?: boolean;
isNoPadding?: boolean;
isWithArrow?: boolean;
isAccentColor?: boolean;
@@ -25,11 +23,41 @@ interface ButtonInterface {
};
}
-export const Button = styled.button<ButtonInterface>`
+export const Button = (props: ButtonInterface) => {
+ const {
+ children,
+ href,
+ isWithArrow,
+ to,
+ } = props;
+ let linkElem;
+
+ if (props.href) { linkElem = 'a'; }
+ if (props.to) { linkElem = ReactRouterLink; }
+
+ const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+
+ return (
+ <Component {...props}>
+ {props.children}
+
+ { isWithArrow &&
+ <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
+ />
+ </svg>
+ }
+ </Component>
+ );
+};
+
+const ButtonBase = styled.button<ButtonInterface>`
appearance: none;
- border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`};
+ border: 1px solid transparent;
display: inline-block;
- background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
+ background-color: ${props => props.bgColor || colors.brandLight};
+ background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}
border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
@@ -38,6 +66,7 @@ export const Button = styled.button<ButtonInterface>`
line-height: normal;
text-decoration: none;
cursor: pointer;
+ outline: none;
transition: background-color 0.35s, border-color 0.35s;
svg {
@@ -51,7 +80,7 @@ export const Button = styled.button<ButtonInterface>`
}
&:hover {
- background-color: ${props => !props.isTransparent && '#04BEA8'};
+ background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'};
border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
svg {
@@ -59,77 +88,3 @@ export const Button = styled.button<ButtonInterface>`
}
}
`;
-
-export const Link: React.ReactNode = (props: ButtonInterface) => {
- const {
- children,
- href,
- isWithArrow,
- } = props;
- const Component = Button.withComponent(ReactRouterLink);
-
- return (
- <Component to={href} {...props}>
- {children}
-
- { isWithArrow &&
- <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path
- d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
- />
- </svg>
- }
- </Component>
- );
-};
-
-Link.defaultProps = {
- isTransparent: true,
-};
-
-export const NavLink: React.ReactNode = (props: ButtonInterface) => {
- const {
- children,
- href,
- isWithArrow,
- } = props;
- const Component = Button.withComponent(ReactRouterNavLink);
-
- return (
- <Component to={href} {...props}>
- {children}
-
- { isWithArrow &&
- <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path
- d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
- />
- </svg>
- }
- </Component>
- );
-};
-
-NavLink.defaultProps = {
- isTransparent: true,
-};
-
-// Added this, & + & doesnt really work since we switch with element types...
-export const ButtonWrap = styled.div`
- button + button,
- a + a,
- a + button,
- button + a {
- @media (min-width: ${BREAKPOINTS.mobile}) {
- margin-left: 10px;
- }
-
- @media (max-width: ${BREAKPOINTS.mobile}) {
- margin: 0 10px;
- }
- }
-
- @media (max-width: ${BREAKPOINTS.mobile}) {
- white-space: nowrap;
- }
-`;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index cab153361..e19f041c7 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import styled from 'styled-components';
-import {Link} from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { Paragraph } from 'ts/@next/components/text';
@@ -42,15 +42,13 @@ export const Definition = (props: Props) => (
{props.actions &&
<LinkWrap>
{props.actions.map((item, index) => (
- <Link
+ <Button
href={item.url}
isWithArrow={true}
- isTransparent={true}
- isNoBorder={true}
isAccentColor={true}
>
{item.label}
- </Link>
+ </Button>
))}
</LinkWrap>
}
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 933ee7034..8a4db2656 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import {Link as RouterLink} from 'react-router-dom';
import styled, {withTheme} from 'styled-components';
-import {Link} from 'ts/@next/components/button';
+import {Button} from 'ts/@next/components/button';
import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
import {Heading} from 'ts/@next/components/text';
import {GlobalStyle} from 'ts/@next/constants/globalStyle';
@@ -172,7 +172,7 @@ const StyledWrap = styled(Wrap)`
}
`;
-const StyledLink = styled(Link)`
+const StyledLink = styled(Button)`
width: 100%;
position: absolute;
bottom: 0;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 72082ce9f..35d53d21f 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -5,7 +5,7 @@ import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
-import { Button, Link, NavLink } from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
import { Dropdown } from 'ts/@next/components/dropdowns/mock';
@@ -85,29 +85,6 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
});
}
- public getNavItem = (link: NavItem, index: number): React.ReactNode => {
- const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
- const Subnav = link.dropdownComponent;
-
- return (
- <Wrapper key={`nav-${index}`}>
- <StyledNavLink
- href={link.url}
- isTransparent={true}
- isNoBorder={true}
- >
- {link.text}
- </StyledNavLink>
-
- {link.dropdownComponent &&
- <DropdownWrap width={link.dropdownWidth}>
- <Subnav />
- </DropdownWrap>
- }
- </Wrapper>
- );
- }
-
public render(): React.ReactNode {
const { isOpen } = this.state;
const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -121,7 +98,7 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
<StyledButtonWrap>
{_.map(navItems, (link, index) => (
- this.getNavItem(link, index)
+ <NavItem link={link} index={index} />
))}
</StyledButtonWrap>
@@ -143,6 +120,30 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
export const Header = withTheme(HeaderBase);
+const NavItem = (props): React.ReactNode => {
+ const { link, index } = props;
+ const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
+ const Subnav = link.dropdownComponent;
+
+ return (
+ <Wrapper key={`nav-${index}`}>
+ <StyledNavLink
+ to={link.url}
+ isTransparent={true}
+ isNoBorder={true}
+ >
+ {link.text}
+ </StyledNavLink>
+
+ {link.dropdownComponent &&
+ <DropdownWrap width={link.dropdownWidth}>
+ <Subnav />
+ </DropdownWrap>
+ }
+ </Wrapper>
+ );
+};
+
const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
@media (max-width: 800px) {
min-height: ${props => props.isOpen ? '385px' : '70px'};
@@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
}
`;
-const StyledNavLink = styled(NavLink).attrs({
+const LinkWrap = styled.div`
+ position: relative;
+
+ a {
+ display: block;
+ }
+
+ @media (min-width: 800px) {
+ &:hover > div {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ transition: opacity 0.35s, transform 0.35s, visibility 0s;
+ }
+ }
+`;
+
+const StyledNavLink = styled(ReactRouterLink).attrs({
activeStyle: { opacity: 1 },
})`
+ color: ${props => props.theme.textColor};
opacity: 0.5;
transition: opacity 0.35s;
+ padding: 15px 0;
+ margin: 0 30px;
&:hover {
opacity: 1;
@@ -186,56 +208,6 @@ const StyledButtonWrap = styled.div`
@media (max-width: 800px) {
display: none;
}
-
-/*
- @media (max-width: 800px) {
- background-color: #022924;
- display: flex;
- flex-wrap: wrap;
- padding: 20px 20px;
-
- a {
- text-align: left;
- padding-left: 0;
- }
-
- a + a {
- margin-left: 0;
- }
- } */
-`;
-
-const MobileProductLinksWrap = styled(StyledButtonWrap)`
- display: none;
-
- @media (max-width: 800px) {
- display: block;
- background-color: transparent;
- flex-direction: column;
-
- a {
- display: block;
- width: 100%;
- }
- }
-`;
-
-const LinkWrap = styled.div`
- position: relative;
-
- a {
- display: block;
- }
-
- @media (min-width: 800px) {
- &:hover > div {
- display: block;
- visibility: visible;
- opacity: 1;
- transform: translate3d(0, 0, 0);
- transition: opacity 0.35s, transform 0.35s, visibility 0s;
- }
- }
`;
const DropdownWrap = styled.div<DropdownWrapInterface>`
@@ -282,17 +254,6 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
}
`;
-const Nav = styled.div`
- @media (max-width: 800px) {
- background-color: ${props => props.theme.bgColor};
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- padding-top: 65px;
- }
-`;
-
const TradeButton = styled(Button)`
padding: 14px 22px;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index 3aac7f5d8..5a0617256 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -24,13 +24,13 @@ export const SectionLandingCta = (props: Props) => (
icon="getStarted"
title="Ready to build on 0x?"
linkLabel="Get Started"
- linkUrl="#"
+ linkUrl="https://0xproject.com/docs"
/>
<BlockIconLink
icon="getInTouch"
title="Want help from the 0x team?"
linkLabel="Get in Touch"
- onClick={props.onContactClick}
+ linkAction={props.onContactClick}
/>
</Section>
);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 513fa9867..8c9d4376f 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -21,7 +21,7 @@ const HeroActions = () => (
Get Started
</Button>
- <Button href="/why" isTransparent={true} isInline={true}>
+ <Button to="/next/why" isTransparent={true} isInline={true}>
Learn More
</Button>
</>
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 259618d13..92c076266 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/packages/website/ts/@next/pages/about/press.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import styled from 'styled-components';
import { AboutPageLayout } from 'ts/@next/components/aboutPageLayout';
-import { Link } from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout';
import { Separator } from 'ts/@next/components/separator';
import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -61,7 +61,7 @@ const Highlight = ({ highlight }) => (
<Column width="60%" maxWidth="560px">
<Paragraph isMuted={false}>{highlight.text}</Paragraph>
- <Link href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Link>
+ <Button href={highlight.href} isWithArrow={true} isNoBorder={true}>Read Article</Button>
</Column>
</HighlightWrap>
);
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 75269d7ef..bb9b058e2 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -8,7 +8,7 @@ import { colors } from 'ts/style/colors';
import {Hero} from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
-import { Link } from 'ts/@next/components/button';
+import { Button } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
@@ -84,14 +84,13 @@ export class NextWhy extends React.PureComponent {
title="The exchange layer for the crypto economy"
description="The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens."
actions={
- <Link
+ <Button
href="/docs"
- isCentered={true}
isWithArrow={true}
isAccentColor={true}
>
Build on 0x
- </Link>
+ </Button>
}
/>