diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx
index 2d871ac712..a5e8df7e8e 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) => (
{(props.linkLabel && props.linkUrl) &&
-
+
{props.linkLabel}
-
+
}
@@ -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 6b7603a108..a3740c25af 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) => {
{mainCta &&
- {mainCta.text}
+
}
{secondaryCta &&
-
+
}
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index 42b2607312..7033ec88d1 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}
- {props.linkUrl &&
-
- {props.linkLabel}
-
- }
-
- {props.onClick &&
-
- }
+
);
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 377d1d8200..cbe90c7c21 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`
+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 (
+
+ {props.children}
+
+ { isWithArrow &&
+
+ }
+
+ );
+};
+
+const ButtonBase = styled.button`
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`
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`
}
&: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`
}
}
`;
-
-export const Link: React.ReactNode = (props: ButtonInterface) => {
- const {
- children,
- href,
- isWithArrow,
- } = props;
- const Component = Button.withComponent(ReactRouterLink);
-
- return (
-
- {children}
-
- { isWithArrow &&
-
- }
-
- );
-};
-
-Link.defaultProps = {
- isTransparent: true,
-};
-
-export const NavLink: React.ReactNode = (props: ButtonInterface) => {
- const {
- children,
- href,
- isWithArrow,
- } = props;
- const Component = Button.withComponent(ReactRouterNavLink);
-
- return (
-
- {children}
-
- { isWithArrow &&
-
- }
-
- );
-};
-
-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 cab153361e..e19f041c79 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 &&
{props.actions.map((item, index) => (
-
{item.label}
-
+
))}
}
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index 933ee70345..8a4db26568 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 72082ce9f7..35d53d21fb 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 {
});
}
- public getNavItem = (link: NavItem, index: number): React.ReactNode => {
- const Wrapper = link.dropdownComponent ? LinkWrap : React.Fragment;
- const Subnav = link.dropdownComponent;
-
- return (
-
-
- {link.text}
-
-
- {link.dropdownComponent &&
-
-
-
- }
-
- );
- }
-
public render(): React.ReactNode {
const { isOpen } = this.state;
const { isNavToggled, toggleMobileNav, theme } = this.props;
@@ -121,7 +98,7 @@ class HeaderBase extends React.Component {
{_.map(navItems, (link, index) => (
- this.getNavItem(link, index)
+
))}
@@ -143,6 +120,30 @@ class HeaderBase extends React.Component {
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 (
+
+
+ {link.text}
+
+
+ {link.dropdownComponent &&
+
+
+
+ }
+
+ );
+};
+
const StyledHeader = styled(Section.withComponent('header'))`
@media (max-width: 800px) {
min-height: ${props => props.isOpen ? '385px' : '70px'};
@@ -156,11 +157,32 @@ const StyledHeader = styled(Section.withComponent('header'))`
}
`;
-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`
@@ -282,17 +254,6 @@ const DropdownWrap = styled.div`
}
`;
-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 3aac7f5d89..5a0617256e 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"
/>
);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 513fa9867b..8c9d4376f0 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
-
}
/>