aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-11-29 22:34:26 +0800
committerFred Carlsen <fred@sjelfull.no>2018-11-29 22:34:26 +0800
commita21bca7cf4771d04879036f3406f38276af93e3a (patch)
treefa74469c4d74428faf1dc248d9c317a2e683216a /packages/website/ts
parent200da7d22cda1a853105d6114848f7e09d18370f (diff)
downloaddexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar.gz
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar.bz2
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar.lz
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar.xz
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.tar.zst
dexon-sol-tools-a21bca7cf4771d04879036f3406f38276af93e3a.zip
Cleanup button component
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/button.tsx26
-rw-r--r--packages/website/ts/@next/components/header.tsx2
-rw-r--r--packages/website/ts/@next/pages/landing.tsx8
3 files changed, 11 insertions, 25 deletions
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>