Cleans up Button

packages/website/ts/@next/components/button.tsx

@@ -3,66 +3,28 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+
 interface ButtonInterface {
-    transparent?: boolean;
-    inline?: boolean;
-    href?: string;
+    children: Node | string;
+    transparent?: any;
+    inline?: any;
+    href?: string,
     onClick?: () => void;
 }
 
+export const Button: React.StatelessComponent<ButtonInterface> = props => {
+    const { onClick } = props;
+    const Component = onClick ? StyledButton : StyledButton.withComponent('a');
+    return <Component {...props}>{ props.children }</Component>;
+};
+
 const StyledButton = styled.button<ButtonInterface>`
     appearance: none;
     border: 0;
-    background-color: ${colors.brandLight};
-    border: 1px solid ${colors.brandLight};
+    display: ${props => props.inline && 'inline-block'};
+    background-color: ${props => !props.transparent && colors.brandLight};
+    border: ${props => props.transparent && '1px solid #6a6a6a'};
     color: ${colors.white};
     text-align: center;
     padding: 13px 22px 14px;
-    text-decoration: none;
-
-    ${props => props.transparent && `
-        background-color: transparent;
-        border-color: #6A6A6A;
-    `}
-
-    ${props => props.inline && `
-        display: inline-block;
-        & + & {
-            margin-left: 10px;
-        }
-    `}
 `;
-
-// 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
-// based on those props
-
-export const Button: React.StatelessComponent<ButtonInterface> = props => {
-  const { onClick, href } = props;
-  const Component = onClick ? StyledButton : StyledButton.withComponent('a');
-
-  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>
-//     </StyledButton>
-// );
-
-// also feel like a transparent prop would suffice instead of having a separate button
-// 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 }) => (
-    <Button transparent={true} {...props}>{props.children}</Button>
-);
-
-Button.defaultProps = {
-    transparent: false,
-    inline: false,
-};

packages/website/ts/@next/pages/landing.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from 'ts/style/colors';
-
-import { Button, ButtonTransparent } from 'ts/@next/components/button';
+import { colors } from 'ts/style/colors'
+import { Button } from 'ts/@next/components/button';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Intro, Text } from 'ts/@next/components/text';
@@ -11,6 +10,7 @@ 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,13 @@ export const NextLanding = () => (
           <Heading>Powering Decentralized Exchange</Heading>
           <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
           <div>
-            <Button inline={true}>Get Started</Button>
-            <ButtonTransparent inline={true}>Learn More</ButtonTransparent>
+            <Button inline>
+              Get Started
+            </Button>
+
+            <Button transparent inline>
+              Learn More
+            </Button>
           </div>
         </Column>