From a21bca7cf4771d04879036f3406f38276af93e3a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 29 Nov 2018 15:34:26 +0100
Subject: Cleanup button component

---
 packages/website/ts/@next/components/button.tsx | 26 ++++++-------------------
 packages/website/ts/@next/components/header.tsx |  2 +-
 2 files changed, 7 insertions(+), 21 deletions(-)

(limited to 'packages/website/ts/@next/components')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index e98388248..390136347 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -3,12 +3,10 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-
 interface ButtonInterface {
-    text: string;
     transparent?: boolean;
     inline?: boolean;
-    href?: string,
+    href?: string;
     onClick?: () => void;
 }
 
@@ -16,13 +14,15 @@ const StyledButton = styled.button<ButtonInterface>`
     appearance: none;
     border: 0;
     background-color: ${colors.brandLight};
+    border: 1px solid ${colors.brandLight};
     color: ${colors.white};
     text-align: center;
     padding: 13px 22px 14px;
+    text-decoration: none;
 
     ${props => props.transparent && `
         background-color: transparent;
-        border: 1px solid #6A6A6A;
+        border-color: #6A6A6A;
     `}
 
     ${props => props.inline && `
@@ -33,14 +33,6 @@ const StyledButton = styled.button<ButtonInterface>`
     `}
 `;
 
-const Text = styled.span`
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1.375rem;
-`;
-
-
-
 // A button that may exist as a button or a link
 // a button only makes sense with an onClick handler
 // a link with an href so we base the type of component we return
@@ -50,17 +42,13 @@ export const Button: React.StatelessComponent<ButtonInterface> = props => {
   const { onClick, href } = props;
   const Component = onClick ? StyledButton : StyledButton.withComponent('a');
 
-  return <Component {...props}>{ props.children || 'Text' }</Component>;
+  return <Component {...props}>{props.children}</Component>;
 };
 
-
 // usage
 // <Button href="#">Text</Button> ===> <a href="">Text</a>
 // <Button onClick={() => func}>I'm a button</Button> ====> <button></button>
 
-
-
-
 // export const Button: React.StatelessComponent<ButtonInterface> = ({ ...props }) => (
 //     <StyledButton {...props}>
 //         <Text>{props.text}</Text>
@@ -71,9 +59,7 @@ export const Button: React.StatelessComponent<ButtonInterface> = props => {
 // so we have the logic with the Link/button--- and props = styling. in this case:
 // background-color: ${props => !props.transparent && 'somecolor'}..
 export const ButtonTransparent: React.StatelessComponent<ButtonInterface> = ({ ...props }) => (
-    <StyledButton transparent={true} {...props}>
-        <Text>{props.text}</Text>
-    </Button>
+    <Button transparent={true} {...props}>{props.children}</Button>
 );
 
 Button.defaultProps = {
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index f9b71a43c..ac37e3ab2 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -54,7 +54,7 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
             <Links>
                 {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
             </Links>
-            <Button text="Trade on 0x" />
+            <Button href="#">Trade on 0x</Button>
         </StyledHeader>
     </Container>
 );
-- 
cgit v1.2.3