diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 19:13:24 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-30 19:13:24 +0800 |
commit | df213ac0d52c29e23e06d135b911df8263d4e6fc (patch) | |
tree | 8778b513c42712e7a175517e4a4fcfa79b324ef5 /packages/website | |
parent | 4d7db045e9c6faa69fc8018c6c36e63fe562973c (diff) | |
download | dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.gz dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.bz2 dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.lz dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.xz dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.tar.zst dexon-0x-contracts-df213ac0d52c29e23e06d135b911df8263d4e6fc.zip |
Text and landing
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/@next/components/container.tsx | 4 | ||||
-rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 122 | ||||
-rw-r--r-- | packages/website/ts/@next/components/text.tsx | 119 | ||||
-rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 88 |
4 files changed, 185 insertions, 148 deletions
diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx index 1e8aae793..58aaa8be9 100644 --- a/packages/website/ts/@next/components/container.tsx +++ b/packages/website/ts/@next/components/container.tsx @@ -6,6 +6,10 @@ interface ContainerProps { removePadding?: boolean; } + +// are we still using this component? (i think not, so we should delete, but have notes) +// Also, i dont understand why create a styled comp and then make a stateless component that returns the same thing? +// should be enough to just export a styled component as it is understood that it takes props and a child const StyledContainer = styled.div<ContainerProps>` background-color: ${props => props.bgColor || 'transparent'}; max-width: 111.111111111rem; // 2000px diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index c807ccb36..1eecf0a55 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -2,112 +2,114 @@ import * as React from 'react'; import styled from 'styled-components'; interface WrapWidths { - default: string; - full: string; - medium: string; - narrow: string; - [key: string]: string; + default: string; + full: string; + medium: string; + narrow: string; + [key: string]: string; } interface ColumnWidths { - [key: string]: string; + [key: string]: string; } interface SectionProps { - noPadding?: any; - noMargin?: any; - bgColor?: string; - fullWidth?: any; + noPadding?: any; + noMargin?: any; + bgColor?: string; + fullWidth?: any; } interface WrapProps { - width?: 'default' | 'full' | 'medium' | 'narrow'; - bgColor?: string; + width?: 'default' | 'full' | 'medium' | 'narrow'; + bgColor?: string; } interface ColumnProps { - colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; - noPadding?: any; + colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; + noPadding?: any; + bgColor?: string; } interface GetColWidthArgs { - span?: number; - columns: number; + span?: number; + columns: number; } const _getColumnWidth = (args: GetColWidthArgs) => { - const { span = 1, columns } = args; - const percentWidth = (span / columns) * 100; - const gutterDiff = (GUTTER * (columns - 1)) / columns; - return `calc(${percentWidth}% - ${gutterDiff}px)`; + const { span = 1, columns } = args; + const percentWidth = (span / columns) * 100; + const gutterDiff = (GUTTER * (columns - 1)) / columns; + return `calc(${percentWidth}% - ${gutterDiff}px)`; }; const GUTTER = 30 as number; const MAX_WIDTH = 1500; const BREAKPOINTS = { - mobile: '768px', + mobile: '768px', }; const WRAPPER_WIDTHS: WrapWidths = { - default: `${MAX_WIDTH}px`, // tbd - full: '100%', - medium: '1136px', - narrow: '930px', + default: `${MAX_WIDTH}px`, // tbd + full: '100%', + medium: '1136px', + narrow: '930px', }; const COLUMN_WIDTHS: ColumnWidths = { - '1/4': _getColumnWidth({ columns: 4 }), - '1/3': _getColumnWidth({ columns: 3 }), - '1/2': _getColumnWidth({ columns: 2 }), - '2/3': _getColumnWidth({ span: 2, columns: 3 }), + '1/4': _getColumnWidth({ columns: 4 }), + '1/3': _getColumnWidth({ columns: 3 }), + '1/2': _getColumnWidth({ columns: 2 }), + '2/3': _getColumnWidth({ span: 2, columns: 3 }), }; export const Main = styled.main` - border: 1px dotted rgba(0, 0, 255, 0.3); - width: calc(100% - 60px); - max-width: ${MAX_WIDTH}px; - margin: 0 auto; + border: 1px dotted rgba(0, 0, 255, 0.3); + width: calc(100% - 60px); + max-width: ${MAX_WIDTH}px; + margin: 0 auto; `; export const Section = styled.section<SectionProps>` - width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.noPadding && '30px'}; - margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; - margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; - background-color: ${props => props.bgColor}; - border: 1px dotted rgba(0, 255, 0, 0.3); - - @media (min-width: 1560px) { - width: ${props => props.fullWidth && '100vw'}; - margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; - } + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; + padding: ${props => !props.noPadding && '30px'}; + margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; + background-color: ${props => props.bgColor}; + border: 1px dotted rgba(0, 255, 0, 0.3); + + @media (min-width: 1560px) { + width: ${props => props.fullWidth && '100vw'}; + margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; + } `; const WrapBase = styled.div<WrapProps>` - max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; - background-color: ${props => props.bgColor}; - margin: 0 auto; + max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; + background-color: ${props => props.bgColor}; + margin: 0 auto; `; export const Wrap = styled(WrapBase)` - @media (min-width: ${BREAKPOINTS.mobile}) { - display: flex; - justify-content: space-between; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + display: flex; + justify-content: space-between; + } `; export const WrapCentered = styled(WrapBase)` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; `; export const Column = styled.div<ColumnProps>` - padding: ${props => !props.noPadding && '30px'}; - border: 1px dotted rgba(255, 0, 0, 0.3); + padding: ${props => !props.noPadding && '30px'}; + border: 1px dotted rgba(255, 0, 0, 0.3); + background-color: ${props => props.bgColor}; - @media (min-width: ${BREAKPOINTS.mobile}) { - width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; - } + @media (min-width: ${BREAKPOINTS.mobile}) { + width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; + } `; diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 4c6765cf6..ca2130563 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -1,84 +1,71 @@ import * as React from 'react'; import styled from 'styled-components'; - import { colors } from 'ts/style/colors'; -interface Props { - size?: 'normal' | 'medium' | 'large'; - muted?: any; + +interface HeadingProps { + asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + size?: 'default' | 'medium' | 'large'; center?: boolean; + children: Node | string; + noMargin?: any; } -export const Heading: React.StatelessComponent<Props> = ({ children, ...props }) => ( - <StyledHeading {...props}>{children}</StyledHeading> -); - -export const Intro: React.StatelessComponent<Props> = ({ children, ...props }) => ( - <StyledIntro {...props}>{children}</StyledIntro> -); - -export const Text: React.StatelessComponent<Props> = ({ children, ...props }) => ( - <StyledText {...props}>{children}</StyledText> -); +interface ParagraphProps { + noMargin?: any; + size?: 'default' | 'small' | 'medium' | 'large'; + muted?: any; + center?: any; +} -Heading.defaultProps = { - size: 'normal', - center: false, -}; +interface HeadingSizes { + large: string; + medium: string; + default: string; + small: string; + [key: string]: string; +} -Intro.defaultProps = { - size: 'normal', - center: false, -}; +interface ParagraphSizes { + default: string; + [key: string]: string; +} -Text.defaultProps = { - size: 'normal', - center: false, +const HEADING_SIZES: HeadingSizes = { + large: '80px', + medium: '50px', + default: '28px', + small: '20px', }; -const StyledHeading = styled.h1` - color: ${colors.white}; - font-size: 1.111111111rem; - line-height: 1.4em; - - ${(props: Props) => props.center && ` - text-align: center - `} - - ${(props: Props) => props.size === 'medium' && ` - font-size: 3.222222222rem; // 50px - line-height: 1.16em; - `} +const PARAGRAPH_SIZES: ParagraphSizes = { + default: '18px', + medium: '22px', + large: '28px', +} - ${(props: Props) => props.size === 'large' && ` - font-size: 4.444444444rem; // 80px - line-height: 1em; - `} +const StyledHeading = styled.h1<HeadingProps>` + color: ${props => props.color || colors.white}; + font-size: ${props => HEADING_SIZES[props.size || 'default']}; + margin-bottom: ${props => !props.noMargin && '30px'}; + text-align: ${props => props.center && 'center'}; `; -const StyledIntro = styled.p` - color: ${colors.white}; - opacity: 0.75; - font-size: 22px; - line-height: 1.823529412em; - - ${(props: Props) => props.center && ` - text-align: center - `} -`; +export const Heading: React.StatelessComponent<HeadingProps> = props => { + const { + asElement = 'h1', + children, + } = props; + const Component = StyledHeading.withComponent(asElement); -const StyledText = styled.p<Props>` - color: ${colors.white}; - font-size: 1rem; - ${(props: Props) => props.size === 'medium' && ` - font-size: 1.555555556rem; - line-height: 1.357142857em; - `} - ${(props: Props) => props.center && ` - text-align: center - `} + return <Component {...props}>{ children }</Component>; +}; - ${(props: Props) => props.muted && ` - opacity: ${typeof props.muted === 'string' ? props.muted : '0.8'}; - `} +// No need to declare it twice as Styled then rewrap as a stateless comp +export const Paragraph = styled.p<ParagraphProps>` + font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']}; + margin-bottom: ${props => !props.noMargin && '30px'}; + line-height: 1.4; + color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`}; + text-align: ${props => props.center && 'center'}; `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 9be2ee4da..d207bd9ff 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors' import { Button, ButtonWrap } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; +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'; @@ -18,9 +18,14 @@ export const NextLanding = () => ( <SiteWrap> <Section> <Wrap> - <Column colWidth="2/3"> - <Heading>Powering Decentralized Exchange</Heading> - <Intro>0x is the best solution for adding exchange functionality to your business.</Intro> + <Column colWidth="1/2"> + <Heading size="large"> + Powering Decentralized Exchange + </Heading> + + <Paragraph size="medium"> + 0x is the best solution for adding exchange functionality to your business. + </Paragraph> <ButtonWrap> <Button inline> @@ -33,18 +38,69 @@ export const NextLanding = () => ( </ButtonWrap> </Column> - <Column colWidth="1/3"> - <ProtocolIcon /> + <Column colWidth="1/2"> + <Icon as={logoOutlined as 'svg'} /> </Column> </Wrap> </Section> <Section bgColor={colors.backgroundDark}> - <WrapCentered> - <Icon><LogoOutlined /></Icon> - <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text> - <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text> + <WrapCentered width="narrow"> + <Icon as={protocol as 'svg'} /> + + <Paragraph size="large" center> + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. + </Paragraph> + + <Button href="#" transparent> + Discover how developers use 0x + </Button> </WrapCentered> + + <Wrap> + {/* NOTE: this probably should be withComponent as part of a <dl> */} + <Column colWidth="1/3"> + <Heading size="medium" center> + 873,435 + </Heading> + + <Paragraph muted={0.4} center noMargin> + Number of transactions + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <Heading size="medium" center> + $203M + </Heading> + + <Paragraph muted={0.4} center noMargin> + Total volume + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <Heading size="medium" center> + 227,372 + </Heading> + + <Paragraph muted={0.4} center noMargin> + Number of relayers + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column bgColor="#003831" colWidth="1/2"> + This is a 2 COLUMN section + </Column> + + <Column bgColor="#003831" colWidth="1/2"> + Again a 2 column section + </Column> + </Wrap> </Section> <Section> @@ -95,17 +151,5 @@ export const NextLanding = () => ( </Column> </Wrap> </Section> - - <Section> - <Wrap> - <Column colWidth="1/2"> - This is a 2 COLUMN section - </Column> - - <Column colWidth="1/2"> - Again a 2 column section - </Column> - </Wrap> - </Section> </SiteWrap> ); |