aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/button.tsx66
-rw-r--r--packages/website/ts/@next/pages/landing.tsx15
2 files changed, 24 insertions, 57 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 390136347..41ac49d07 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/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,
-};
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index fff9e630d..eb8adbde9 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/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>