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 +-
 packages/website/ts/@next/pages/landing.tsx     |  8 ++++----
 3 files changed, 11 insertions(+), 25 deletions(-)

(limited to 'packages')

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>
 );
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index ad0639fc7..fff9e630d 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors'
+import { colors } from 'ts/style/colors';
+
 import { Button, ButtonTransparent } from 'ts/@next/components/button';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
@@ -10,7 +11,6 @@ import { Heading, Intro, Text } from 'ts/@next/components/text';
 import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import protocol from 'ts/@next/icons/illustrations/protocol.svg';
 
-
 const Icon = styled.div`
     flex-shrink: 0;
 `;
@@ -23,8 +23,8 @@ export const NextLanding = () => (
           <Heading>Powering Decentralized Exchange</Heading>
           <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
           <div>
-            <Button text="Get Started" inline={true} />
-            <ButtonTransparent text="Learn More" inline={true} />
+            <Button inline={true}>Get Started</Button>
+            <ButtonTransparent inline={true}>Learn More</ButtonTransparent>
           </div>
         </Column>
 
-- 
cgit