From aa4234a38cfdbf2ff4b674f5847c6983d87c4cc9 Mon Sep 17 00:00:00 2001 From: Fred Carlsen Date: Thu, 29 Nov 2018 10:55:22 +0100 Subject: WIP landing and button changes --- packages/website/ts/@next/components/button.tsx | 15 +++++++++--- .../ts/@next/icons/illustrations/logo-outlined.svg | 14 +++++++++++ packages/website/ts/@next/pages/landing.tsx | 27 +++++++++++++++++++++- 3 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 packages/website/ts/@next/icons/illustrations/logo-outlined.svg (limited to 'packages') diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index bbb6b7935..e67f8a8e1 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -5,15 +5,20 @@ import { colors } from 'ts/style/colors'; export interface ButtonInterface { text: string; + transparent?: any; } -const StyledButton = styled.button` +const StyledButton = styled.button` appearance: none; border: 0; background-color: ${colors.brandLight}; color: ${colors.white}; text-align: center; padding: 13px 22px 14px; + + ${props => props.transparent && ` + border: 1px solid #6A6A6A; + `} `; const Text = styled.span` @@ -22,8 +27,12 @@ const Text = styled.span` line-height: 1.375rem; `; -export const Button: React.StatelessComponent = ({ text }) => ( - +export const Button: React.StatelessComponent = ({ text, transparent }) => ( + {text} ); + +Button.defaultProps = { + transparent: false, +}; diff --git a/packages/website/ts/@next/icons/illustrations/logo-outlined.svg b/packages/website/ts/@next/icons/illustrations/logo-outlined.svg new file mode 100644 index 000000000..a09d2355f --- /dev/null +++ b/packages/website/ts/@next/icons/illustrations/logo-outlined.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index e3c1cc740..abb01e11a 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,10 +1,35 @@ import * as React from 'react'; +import styled from 'styled-components' + +import { Button } from 'ts/@next/components/button'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Section, Wrap, Column } from 'ts/@next/components/layout'; +import { Heading, Intro } from 'ts/@next/components/text'; + +import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; +const Icon = styled.div` + flex-shrink: 0; +`; export const NextLanding = () => ( +
+ + + Powering Decentralized Exchange + 0x is the best solution for adding exchange functionality to your business. + +
-- cgit