aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:13:31 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:13:31 +0800
commit2ba14d656ef21ef85bf8274020d18ae2cd2515b3 (patch)
treeceb9c5e08d1e47e12a6bbfd00acfc3cb931d80a1 /packages/website/ts
parent0c2848c41887daa7bfee6297a7f134271bc2df1a (diff)
downloaddexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar.gz
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar.bz2
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar.lz
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar.xz
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.tar.zst
dexon-sol-tools-2ba14d656ef21ef85bf8274020d18ae2cd2515b3.zip
Some cleanup, reindent
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/layout.tsx6
-rw-r--r--packages/website/ts/@next/pages/landing.tsx29
2 files changed, 23 insertions, 12 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 1eecf0a55..9bf063040 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -15,6 +15,7 @@ interface ColumnWidths {
interface SectionProps {
noPadding?: any;
+ padLarge?: any;
noMargin?: any;
bgColor?: string;
fullWidth?: any;
@@ -28,6 +29,7 @@ interface WrapProps {
interface ColumnProps {
colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
noPadding?: any;
+ padLarge?: any;
bgColor?: string;
}
@@ -72,7 +74,7 @@ export const Main = styled.main`
export const Section = styled.section<SectionProps>`
width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
- padding: ${props => !props.noPadding && '30px'};
+ padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
background-color: ${props => props.bgColor};
@@ -105,7 +107,7 @@ export const WrapCentered = styled(WrapBase)`
`;
export const Column = styled.div<ColumnProps>`
- padding: ${props => !props.noPadding && '30px'};
+ padding: ${props => !props.noPadding && (props.padLarge ? '60px 30px' : '30px')};
border: 1px dotted rgba(255, 0, 0, 0.3);
background-color: ${props => props.bgColor};
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index ee9dd188e..ab0a3bc55 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import {colors} from 'ts/style/colors';
@@ -10,6 +10,8 @@ import {Heading, Paragraph} from 'ts/@next/components/text';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
+import IconReadyToBuild from 'ts/@next/icons/illustrations/ready-to-build.svg';
+
const Icon = styled.div `
flex-shrink: 0;
@@ -97,12 +99,18 @@ export const NextLanding = () => (
<Section>
<Wrap>
- <Column bgColor="#003831" colWidth="1/2">
- This is a 2 COLUMN section
+ <Column bgColor="#003831" colWidth="1/2" padLarge>
+ <WrapCentered>
+ <Icon as={IconReadyToBuild as 'svg'} />
+ Ready to build on 0x?
+ </WrapCentered>
</Column>
- <Column bgColor="#003831" colWidth="1/2">
- Again a 2 column section
+ <Column bgColor="#003831" colWidth="1/2" padLarge>
+ <WrapCentered>
+ <Icon as={IconReadyToBuild as 'svg'} />
+ Ready to build on 0x?
+ </WrapCentered>
</Column>
</Wrap>
</Section>
@@ -120,7 +128,10 @@ export const NextLanding = () => (
</Wrap>
</Section>
- <Section bgColor="#ff0000" fullWidth noPadding>
+ <Section
+ bgColor="#ff0000"
+ fullWidth
+ noPadding>
<Wrap width="full">
<Column colWidth="2/3">
SAMPLE FLUSHED width
@@ -134,9 +145,7 @@ export const NextLanding = () => (
<Section bgColor="#003831">
<Wrap width="narrow">
- 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
- tokens. Anyone can utilize 0x to service a wide variety of markets ranging from
- gaming items to traditional financial assets.
+ 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone can utilize 0x to service a wide variety of markets ranging from gaming items to traditional financial assets.
</Wrap>
<Wrap>
@@ -149,7 +158,7 @@ export const NextLanding = () => (
</Column>
<Column colWidth="1/3">
- three-column module
+ three-column module
</Column>
</Wrap>
</Section>