aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/button.tsx22
-rw-r--r--packages/website/ts/@next/components/icon.tsx5
-rw-r--r--packages/website/ts/@next/components/text.tsx16
-rw-r--r--packages/website/ts/@next/constants/utilities.tsx1
-rw-r--r--packages/website/ts/@next/pages/landing.tsx18
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>