From df213ac0d52c29e23e06d135b911df8263d4e6fc Mon Sep 17 00:00:00 2001 From: Ezekiel Aquino Date: Fri, 30 Nov 2018 12:13:24 +0100 Subject: Text and landing --- packages/website/ts/@next/components/container.tsx | 4 + packages/website/ts/@next/components/layout.tsx | 122 +++++++++++---------- packages/website/ts/@next/components/text.tsx | 119 +++++++++----------- packages/website/ts/@next/pages/landing.tsx | 88 +++++++++++---- 4 files changed, 185 insertions(+), 148 deletions(-) (limited to 'packages') 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` 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` - 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` - 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` - 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 = ({ children, ...props }) => ( - {children} -); - -export const Intro: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); - -export const Text: React.StatelessComponent = ({ children, ...props }) => ( - {children} -); +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` + 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 = props => { + const { + asElement = 'h1', + children, + } = props; + const Component = StyledHeading.withComponent(asElement); -const StyledText = styled.p` - 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 { children }; +}; - ${(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` + 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 = () => (
- - Powering Decentralized Exchange - 0x is the best solution for adding exchange functionality to your business. + + + Powering Decentralized Exchange + + + + 0x is the best solution for adding exchange functionality to your business. +
- - - 0x is the best solution for adding exchange functionality to your business. - Discover how developers use 0x (need arrow + line under) + + + + + 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. + + + + + + {/* NOTE: this probably should be withComponent as part of a
*/} + + + 873,435 + + + + Number of transactions + + + + + + $203M + + + + Total volume + + + + + + 227,372 + + + + Number of relayers + + + +
+ +
+ + + This is a 2 COLUMN section + + + + Again a 2 column section + +
@@ -95,17 +151,5 @@ export const NextLanding = () => (
- -
- - - This is a 2 COLUMN section - - - - Again a 2 column section - - -
); -- cgit v1.2.3