diff options
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 27 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 8 |
2 files changed, 25 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index e67f8a8e1..df784b8ef 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -3,12 +3,13 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; -export interface ButtonInterface { +export interface Props extends ButtonInterface { text: string; - transparent?: any; + transparent?: boolean; + inline?: boolean; } -const StyledButton = styled.button<ButtonInterface>` +const StyledButton = styled.button<Props>` appearance: none; border: 0; background-color: ${colors.brandLight}; @@ -17,8 +18,16 @@ const StyledButton = styled.button<ButtonInterface>` padding: 13px 22px 14px; ${props => props.transparent && ` + background-color: transparent; border: 1px solid #6A6A6A; `} + + ${props => props.inline && ` + display: inline-block; + & + & { + margin-left: 10px; + } + `} `; const Text = styled.span` @@ -27,9 +36,15 @@ const Text = styled.span` line-height: 1.375rem; `; -export const Button: React.StatelessComponent<ButtonInterface> = ({ text, transparent }) => ( - <StyledButton transparent> - <Text>{text}</Text> +export const Button: React.StatelessComponent<Props> = ({ ...props }) => ( + <StyledButton {...props}> + <Text>{props.text}</Text> + </StyledButton> +); + +export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => ( + <StyledButton transparent={true} {...props}> + <Text>{props.text}</Text> </StyledButton> ); diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index abb01e11a..19eed5acf 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -19,10 +19,10 @@ export const NextLanding = () => ( <Column colWidth="2/3"> <Heading>Powering Decentralized Exchange</Heading> <Intro>0x is the best solution for adding exchange functionality to your business.</Intro> - <Icon> - <Button text="Get Started" /> - <Button text="Learn More" transparent /> - </Icon> + <div> + <Button text="Get Started" inline={true} /> + <Button text="Learn More" transparent={true} inline={true} /> + </div> </Column> <Column colWidth="1/3"> |