Refactors buttons/links/header

3 files changed, 36 insertions, 57 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2f96759ce..2c153788a 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -1,3 +1,4 @@
+import { History } from 'history';
 import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
@@ -5,15 +6,19 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
-    children: Node | string;
+    color?: string;
+    children?: Node | string;
     isTransparent?: boolean;
+    isNoBorder?: boolean;
+    isNoPadding?: boolean;
     hasIcon?: boolean | string;
     isInline?: boolean;
     href?: string;
-    history?: {
-        push: () => void;
+    onClick?: () => any;
+    history?: History;
+    theme?: {
+        textColor: string;
     };
-    onClick?: () => void;
 }
 
 export const Button = styled.button<ButtonInterface>`
@@ -21,24 +26,25 @@ export const Button = styled.button<ButtonInterface>`
     border: 1px solid transparent;
     display: ${props => props.isInline && 'inline-block'};
     background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
-    border-color: ${props => props.isTransparent && '#6a6a6a'};
+    border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
     color: ${props => props.color || props.theme.textColor};
+    padding: ${props => !props.isNoPadding && '14px 22px'};
     text-align: center;
-    padding: 14px 22px;
     font-size: 18px;
     text-decoration: none;
 `;
 
 export const Link = withRouter((props: ButtonInterface) => {
     const {
+        children,
         history,
         href,
-        children,
     } = props;
-    const Component = StyledButton.withComponent('a');
+    const Component = Button.withComponent('a');
+    const handleClick = () => history.push(href);
 
     return (
-        <Component onClick={history.push(href)}>
+        <Component onClick={handleClick} {...props}>
             {children}
         </Component>
     );
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index dfe9028c3..a6bbe4d65 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,20 +1,15 @@
 import _ from 'lodash';
 import * as React from 'react';
-import styled from 'styled-components';
-
 import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
 
-import { Button } from 'ts/@next/components/button';
+import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
 import { Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 
 interface HeaderProps {
 }
 
-interface LinkProps {
-    href: string;
-}
-
 const links = [
     { url: '/next/why', text: 'Why 0x' },
     { url: '/next/0x-instant', text: 'Products' },
@@ -26,53 +21,30 @@ const links = [
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
       <StyledHeader>
         <HeaderWrap>
-          <Link href="/next">
+          <ReactRouterLink to="/next">
               <Logo/>
-          </Link>
-
-          <Links>
-              {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-          </Links>
-          <TradeButton href="#">Trade on 0x</TradeButton>
+          </ReactRouterLink>
+
+          <ButtonWrap>
+              {_.map(links, (link, index) => (
+                <Link
+                    key={`hb-${index}`}
+                    href={link.url}
+                    isTransparent={true}
+                    isNoBorder={true}
+                >
+                    {link.text}
+                </Link>
+              ))}
+          </ButtonWrap>
+
+          <Button href="#">Trade on 0x</Button>
         </HeaderWrap>
     </StyledHeader>
 );
 
-const Link: React.StatelessComponent<LinkProps> = props => {
-    const { children, href } = props;
-
-    return (
-        <StyledRouterLink to={href}>
-            {children}
-        </StyledRouterLink>
-    );
-};
-
 const StyledHeader = Section.withComponent('header');
 const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
   align-items: center;
 `;
-
-const TradeButton = styled(Button)`
-    @media (max-width: 999px) {
-        display: none;
-    }
-`;
-
-const Links = styled.div`
-    display: flex;
-    justify-content: space-around;
-`;
-
-const StyledRouterLink = styled(ReactRouterLink)`
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 1rem;
-    margin: 0 1.666666667em;
-    transition: color 0.25s ease-in-out;
-    text-decoration: none;
-
-    &:hover {
-        color: rgba(255, 255, 255, 1);
-    }
-`;
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx
index 4ff9663ba..9e82975f4 100644
--- a/packages/website/ts/@next/components/newsletterForm.tsx
+++ b/packages/website/ts/@next/components/newsletterForm.tsx
@@ -8,13 +8,14 @@ import {Button} from 'ts/@next/components/button';
 interface InputProps {
     name: string;
     label: string;
+    type: string;
 }
 
 interface Props {
 }
 
 const Input = (props: InputProps) => {
-    const { name, label } = props;
+    const { name, label, type } = props;
     const id = `input-${name}`;
 
     return (