aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/container.tsx4
-rw-r--r--packages/website/ts/@next/components/layout.tsx122
-rw-r--r--packages/website/ts/@next/components/text.tsx119
-rw-r--r--packages/website/ts/@next/pages/landing.tsx88
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>
);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 14:07:43 +0800