diff options
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 22 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/icon.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 16 | ||||
| -rw-r--r-- | packages/website/ts/@next/constants/utilities.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 18 |
5 files changed, 48 insertions, 14 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index fa830f42c..c532b0720 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -10,6 +10,7 @@ interface ButtonInterface { isTransparent?: boolean; isNoBorder?: boolean; isNoPadding?: boolean; + isWithArrow?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; @@ -24,13 +25,21 @@ export const Button = styled.button<ButtonInterface>` border: 1px solid transparent; display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; - border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'}; + border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; color: ${props => props.color || props.theme.textColor}; padding: ${props => !props.isNoPadding && '18px 30px'}; text-align: center; - font-size: 18px; + font-size: ${props => props.isWithArrow ? '20px' : '18px'}; text-decoration: none; + svg { + margin-left: 12px; + } + + path { + fill: ${props => props.color || props.theme.textColor}; + } + @media (max-width: 768px) { padding: ${props => !props.isNoPadding && '6% 10%'}; } @@ -40,12 +49,21 @@ export const Link = (props: ButtonInterface) => { const { children, href, + isWithArrow, } = props; const Component = Button.withComponent(ReactRouterLink); return ( <Component to={href} {...props}> {children} + + { isWithArrow && + <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path + d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z" + /> + </svg> + } </Component> ); }; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 60e27f07e..1199efe3f 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; import Loadable from 'react-loadable'; import styled from 'styled-components'; -import {getCSSPadding} from 'ts/@next/constants/utilities'; +import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; -interface IconProps { +interface IconProps extends PaddingInterface { name: string; - margin?: Array<'small' | 'default' | 'large' | number> | number; size?: 'small' | 'medium' | 'large' | number; } diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index de31679b2..9058fc7c9 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; -import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities'; +import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities'; interface BaseTextInterface extends PaddingInterface { size?: 'default' | 'medium' | 'large' | 'small'; @@ -41,11 +41,19 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => { const { asElement = 'h1', children, - ...style + ...style, } = props; const Component = StyledHeading.withComponent(asElement); - return <Component style={{...style}} {...props}>{children}</Component>; -}; + + return ( + <Component + style={{...style}} + {...props} + > + {children} + </Component>; + ) +} // No need to declare it twice as Styled then rewrap as a stateless comp // Note: this would be useful to be implemented the same way was "Heading" diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx index 74f121e49..b6b31e141 100644 --- a/packages/website/ts/@next/constants/utilities.tsx +++ b/packages/website/ts/@next/constants/utilities.tsx @@ -1,5 +1,6 @@ export interface PaddingInterface { padding?: number | Array<'large' | 'default', 'small' | number>; + margin?: number | Array<'large' | 'default', 'small' | number>; } interface PaddingSizes { diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index b884c3545..42834e528 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components'; import {colors} from 'ts/style/colors'; -import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {SiteWrap} from 'ts/@next/components/siteWrap'; @@ -206,9 +206,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( Ready to build on 0x? </Paragraph> - <Button isTransparent={true}> + <Link + href="#" + isTransparent={true} + isWithArrow={true} + > Get Started - </Button> + </Link> </WrapCentered> </Column> @@ -224,9 +228,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => ( Want help from the 0x team? </Paragraph> - <Button isTransparent={true}> + <Link + href="#" + isTransparent={true} + isWithArrow={true} + > Get in Touch - </Button> + </Link> </WrapCentered> </Column> </Wrap> |