Refactors buttons/links/header

1 files changed, 19 insertions, 47 deletions

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);
-    }
-`;