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