diff options
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 29 | ||||
| -rw-r--r-- | packages/website/tsconfig.json | 5 |
3 files changed, 26 insertions, 14 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> diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json index 042a3108e..164955b85 100644 --- a/packages/website/tsconfig.json +++ b/packages/website/tsconfig.json @@ -20,11 +20,12 @@ "module": "esnext", "moduleResolution": "node" }, - "include": ["./ts/**/*"], "awesomeTypescriptLoaderOptions": { "useCache": true, "reportFiles": [ "./ts/**/*" ] - } + + }, + "include": ["./ts/**/*"] } |