diff options
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 26 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/header.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 8 |
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> |