aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 20:24:13 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 20:32:42 +0800
commitb1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7 (patch)
tree2eeabf74cfc10ede91b7637ebd62271129de7ed4
parentc5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 (diff)
downloaddexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.gz
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.bz2
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.lz
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.xz
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.zst
dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.zip
More layout changes
-rw-r--r--packages/website/ts/@next/components/blockIconLink.tsx27
-rw-r--r--packages/website/ts/@next/components/definition.tsx7
-rw-r--r--packages/website/ts/@next/components/footer.tsx7
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx98
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx55
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx17
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx76
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx10
-rw-r--r--packages/website/ts/@next/pages/landing.tsx7
-rw-r--r--packages/website/ts/@next/pages/why.tsx108
-rw-r--r--packages/website/tsconfig.json5
11 files changed, 263 insertions, 154 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
index be3ded71f..cc3e88280 100644
--- a/packages/website/ts/@next/components/blockIconLink.tsx
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => (
size="large"
margin={[0, 0, 'default', 0]}
/>
+
+ <Title>
+ {props.title}
+ </Title>
+
+ <Link
+ isWithArrow={true}
+ isTransparent={true}
+ isNoBorder={true}
+ href={props.linkUrl}
+ >
+ {props.linkLabel}
+ </Link>
</div>
</Wrap>
);
const Wrap = styled.div`
+ width: calc(50% - 15px);
+ height: 400px;
padding: 40px;
display: flex;
+ justify-content: center;
align-items: center;
text-align: center;
background-color: ${props => props.theme.lightBgColor};
+
+ @media (max-width: 900px) {
+ width: 100%;
+ margin-top: 30px;
+ }
+`;
+
+const Title = styled.h2`
+ font-size: 20px;
+ margin-bottom: 30px;
+ color: ${props => props.theme.linkColor};
`;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
index 88ef6acdc..da72fe805 100644
--- a/packages/website/ts/@next/components/definition.tsx
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -21,7 +21,7 @@ interface Props {
}
export const Definition = (props: Props) => (
- <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}>
+ <Wrap {...props}>
<Icon
name="ready-to-build"
size={props.iconSize || 'medium'}
@@ -60,7 +60,8 @@ const Wrap = styled.div`
max-width: ${props => props.isInline && '354px'};
& + & {
- margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'};
+ margin-top: ${props => props.isInlineIcon && '120px'};
+ margin-top: ${props => props.isWithMargin && '60px'};
}
@media (min-width: 768px) {
@@ -68,7 +69,7 @@ const Wrap = styled.div`
display: ${props => props.isInlineIcon && 'flex'};
justify-content: ${props => props.isInlineIcon && 'space-between'};
align-items: ${props => props.isInlineIcon && 'center'};
- text-align: ${props => props.isInlineIcon && 'left'};
+ text-align: ${props => (props.isInlineIcon || !props.isCentered) && 'left'};
}
@media (max-width: 768px) {
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 9c2ed1ea8..d6f11b653 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/packages/website/ts/@next/components/footer.tsx
@@ -108,7 +108,12 @@ const LinkList = (props: LinkListProps) => (
</List>
);
-const FooterSection = Section.withComponent('footer');
+const FooterSection = styled.section`
+ padding: 30px;
+ margin-top: 30px;
+ background-color: #181818;
+`;
+
const FooterWrap = styled(FooterSection)`
color: ${colors.white};
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 8a3514bd9..8598b8f12 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -1,39 +1,99 @@
import * as React from 'react';
import styled from 'styled-components';
-interface Props {
- isPadded: boolean;
+interface WrapProps {
+ isFullWidth?: boolean;
+ isTextCentered?: boolean;
+}
+
+interface SectionProps {
+ isPadded?: boolean;
+ isFullWidth?: boolean;
+ isFlex?: boolean;
+ flexBreakpoint?: string;
+ maxWidth?: string;
bgColor?: 'dark' | 'light' | string;
}
-export const Section = (props: Props) => (
- <SectionBase bgColor={props.bgColor}>
- <Wrap
- isPadded={props.isPadded}
- >
- {props.children}
- </Wrap>
- </SectionBase>
-);
+interface FlexProps {
+ padding?: string;
+ isFlex?: boolean;
+}
-Section.defaultProps = {
- isPadded: true,
+interface ColumnProps {
+ padding?: string;
+}
+
+export const Section = (props: SectionProps) => {
+ return (
+ <SectionBase {...props}>
+ <Wrap {...props}>
+ {props.children}
+ </Wrap>
+ </SectionBase>
+ );
};
+export const Column = styled.div`
+ width: ${props => props.width};
+ max-width: ${props => props.maxWidth};
+ padding: ${props => props.padding};
+
+ @media (max-width: 768px) {
+ width: 100%;
+ margin-bottom: 60px;
+ }
+`;
+
+export const FlexWrap = styled.div`
+ padding: ${props => props.padding};
+
+ @media (min-width: ${props => props.flexBreakpoint || '768px'}) {
+ display: ${props => props.isFlex && 'flex'};
+ justify-content: ${props => props.isFlex && 'space-between'};
+ }
+`;
+
+export const WrapSticky = styled.div`
+ position: sticky;
+ top: ${props => props.offsetTop || '60px'};
+`;
+
const SectionBase = styled.section`
- width: calc(100% - 60px);
margin: 0 auto;
- padding: 120px 0;
+ padding: ${props => props.isPadded && '120px 0'};
background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@media (max-width: 768px) {
- padding: 40px 0;
+ padding: ${props => props.isPadded && '40px 0'};
}
`;
-const Wrap = styled.div`
+const Wrap = styled(FlexWrap)`
width: calc(100% - 60px);
- max-width: 895px;
+ max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
margin: 0 auto;
- text-align: center;
+ text-align: ${props => props.isTextCentered && 'center'};
+`;
+
+export const WrapGrid = styled(Wrap)`
+ display: flex;
+ flex-wrap: ${props => props.isWrapped && `wrap`};
+ justify-content: ${props => props.isCentered ? `center` : 'space-between'};
`;
+
+Section.defaultProps = {
+ isPadded: true,
+};
+
+FlexWrap.defaultProps = {
+ isFlex: true,
+};
+
+WrapGrid.defaultProps = {
+ isCentered: true,
+};
+
+Wrap.defaultProps = {
+ isFlex: false,
+};
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 4c246ec3e..22abe6c26 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,13 +1,18 @@
import * as React from 'react';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
+import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout';
import {Heading, Paragraph} from 'ts/@next/components/text';
-import {colors} from 'ts/style/colors';
-import {Section} from 'ts/@next/components/newLayout';
+interface FigureProps {
+ value: string;
+ description: string;
+}
export const SectionLandingAbout = () => (
- <Section bgColor="dark">
+ <Section bgColor="dark" isTextCentered={true}>
<InlineIconWrap>
<Icon name="coin" size="small" />
<Icon name="coin" size="small" />
@@ -39,8 +44,48 @@ export const SectionLandingAbout = () => (
style={{
width: '340px',
borderColor: '#3C4746',
- margin: '60px auto 0 auto',
+ margin: '60px auto',
}}
/>
+
+ <FlexWrap as="dl">
+ <Figure
+ value="873,435"
+ description="Number of Transactions"
+ />
+
+ <Figure
+ value="$203M"
+ description="Total Volume"
+ />
+
+ <Figure
+ value="227,372"
+ description="Number of Relayers"
+ />
+ </FlexWrap>
</Section>
);
+
+const Figure = (props: FigureProps) => (
+ <Column padding="0 30px">
+ <FigureValue>
+ {props.value}
+ </FigureValue>
+ <FigureDescription>
+ {props.description}
+ </FigureDescription>
+ </Column>
+);
+
+const FigureValue = styled.dt`
+ font-size: 50px;
+ font-size: 40px;
+ font-weight: 300;
+ margin-bottom: 15px;
+`;
+
+const FigureDescription = styled.dd`
+ font-size: 18px;
+ color: #999999;
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index 302100ac9..8f6429328 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,10 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
-import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
-import {Section} from 'ts/@next/components/newLayout';
+import {Section, WrapGrid} from 'ts/@next/components/newLayout';
interface ProjectLogo {
name: string;
@@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [
];
export const SectionLandingClients = () => (
- <Section>
- <WrapCentered>
- <Heading size="small">
- Join the growing number of projects developing on 0x
- </Heading>
- </WrapCentered>
+ <Section isTextCentered={true}>
+ <Heading size="small">
+ Join the growing number of projects developing on 0x
+ </Heading>
<WrapGrid width="narrow" isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
@@ -90,13 +87,13 @@ const StyledProject = styled.div<StyledProjectInterface>`
height: 100%;
}
- @media (min-width: ${BREAKPOINTS.mobile}) {
+ @media (min-width: 768px) {
width: 120px;
height: 120px;
margin: 30px;
}
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
width: 100px;
height: 100px;
margin: 15px;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index ad78a1ab4..4c06982e4 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -1,63 +1,31 @@
import * as React from 'react';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
-export const SectionLandingCta = () => (
- <Section>
- <Wrap>
- <Column
- bgColor="#003831"
- colWidth="1/2"
- isPadLarge={true}
- >
- <WrapCentered>
- <Icon
- name="ready-to-build"
- size="large"
- margin={[0, 0, 'default', 0]}
- />
-
- <Paragraph size="medium" color="#00AE99" marginBottom="15px">
- Ready to build on 0x?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get Started
- </Link>
- </WrapCentered>
- </Column>
+import {Column, Section} from 'ts/@next/components/newLayout';
- <Column
- bgColor="#003831"
- colWidth="1/2"
- isPadLarge={true}
- >
- <WrapCentered>
- <Icon
- name="ready-to-build"
- size="large"
- margin={[0, 0, 'default', 0]}
- />
+import {BlockIconLink} from 'ts/@next/components/blockIconLink';
- <Paragraph size="medium" color="#00AE99" marginBottom="15px">
- Want help from the 0x team?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get in Touch
- </Link>
- </WrapCentered>
- </Column>
- </Wrap>
+export const SectionLandingCta = () => (
+ <Section
+ isPadded={false}
+ isFullWidth={true}
+ isFlex={true}
+ flexBreakpoint="900px"
+ >
+ <BlockIconLink
+ icon=""
+ title="Ready to build on 0x?"
+ linkLabel="Get Started"
+ linkUrl="#"
+ />
+ <BlockIconLink
+ icon="coin"
+ title="Wat help from the 0x team?"
+ linkLabel="Get in Touch"
+ linkUrl="#"
+ />
</Section>
);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9c6ff7151..930b80e89 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,10 +1,8 @@
import * as React from 'react';
-import {Button, ButtonWrap} from 'ts/@next/components/button';
-import {LandingAnimation} from 'ts/@next/components/heroImage';
-import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
-import {Heading, Paragraph} from 'ts/@next/components/text';
+import {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
@@ -13,11 +11,11 @@ export const SectionLandingHero = () => (
title="Powering Decentralized Exchange"
description="0x is the best solution for adding exchange functionality to your business."
figure={<LandingAnimation image={<LogoOutlined />} />}
- actions={<Actions />}
+ actions={<HeroActions />}
/>
);
-const Actions = () => (
+const HeroActions = () => (
<>
<Button isInline={true}>
Get Started
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 66c4138a1..fab5e62b6 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import styled from 'styled-components';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
@@ -6,6 +7,12 @@ import {SectionLandingClients} from 'ts/@next/components/sections/landing/client
import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
+import {Button} from 'ts/@next/components/button';
+import {Hero} from 'ts/@next/components/hero';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
interface Props {
theme: {
bgColor: string;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index fc24fd665..d0d909949 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -10,12 +10,12 @@ import {Hero} from 'ts/@next/components/hero';
import { Banner } from 'ts/@next/components/banner';
import { Link } from 'ts/@next/components/button';
import { Icon } from 'ts/@next/components/icon';
-import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
import { Slide, Slider } from 'ts/@next/components/slider/slider';
import { Heading, Paragraph } from 'ts/@next/components/text';
import {Definition} from 'ts/@next/components/definition';
+import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout';
const offersData = [
{
@@ -95,8 +95,11 @@ export class NextWhy extends React.PureComponent {
}
/>
- <Section bgColor={colors.backgroundDark} isPadLarge={true}>
- <Wrap>
+ <Section
+ bgColor="dark"
+ isFlex={true}
+ maxWidth="1170px"
+ >
<Definition
title="Support for all Ethereum Standards"
description="0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol..."
@@ -117,12 +120,10 @@ export class NextWhy extends React.PureComponent {
iconSize="large"
isInline={true}
/>
- </Wrap>
- </Section>
+ </Section>
- <Section>
- <Wrap>
- <Column colWidth="1/3">
+ <Section maxWidth="1170px" isFlex={true}>
+ <Column>
<NavStickyWrap offsetTop="130px">
<ChapterLink offset="60" href="#benefits">Benefits</ChapterLink>
<ChapterLink offset="60" href="#cases">Use Cases</ChapterLink>
@@ -130,52 +131,49 @@ export class NextWhy extends React.PureComponent {
</NavStickyWrap>
</Column>
- <Column colWidth="2/3">
- <SectionWrap id="benefits">
- <Heading size="medium">What 0x offers</Heading>
-
- {_.map(offersData, (item, index) => (
- <Definition
- title={item.title}
- description={item.description}
- isWithMargin={true}
- />
- ))}
- </SectionWrap>
-
- <SectionWrap id="cases">
- <Heading size="medium">Use Cases</Heading>
- <Slider>
- {_.map(useCaseSlides, (item, index) => (
- <Slide
- key={`useCaseSlide-${index}`}
- heading={item.title}
- text={item.description}
- icon={item.icon}
+ <Column width="55%" maxWidth="826px">
+ <Column width="100%" maxWidth="560px">
+ <SectionWrap id="benefits">
+ <Heading size="medium">What 0x offers</Heading>
+
+ {_.map(offersData, (item, index) => (
+ <Definition
+ key={`offers-${index}`}
+ title={item.title}
+ description={item.description}
+ isWithMargin={true}
/>
))}
- </Slider>
- </SectionWrap>
-
- <SectionWrap id="functionality">
- <Heading size="medium">Exchange Functionality</Heading>
-
- {_.map(functionalityData, (item, index) => (
- <ChapterItemWrap key={`functionality-${index}`}>
- <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
-
- <Heading marginBottom="15px">
- {item.title}
- </Heading>
-
- <Paragraph isMuted={true} isNoMargin={true}>
- {item.description}
- </Paragraph>
- </ChapterItemWrap>
- ))}
- </SectionWrap>
- </Column>
- </Wrap>
+ </SectionWrap>
+
+ <SectionWrap id="cases">
+ <Heading size="medium">Use Cases</Heading>
+ <Slider>
+ {_.map(useCaseSlides, (item, index) => (
+ <Slide
+ key={`useCaseSlide-${index}`}
+ heading={item.title}
+ text={item.description}
+ icon={item.icon}
+ />
+ ))}
+ </Slider>
+ </SectionWrap>
+
+ <SectionWrap id="functionality">
+ <Heading size="medium">Exchange Functionality</Heading>
+
+ {_.map(functionalityData, (item, index) => (
+ <Definition
+ key={`functionality-${index}`}
+ title={item.title}
+ description={item.description}
+ isWithMargin={true}
+ />
+ ))}
+ </SectionWrap>
+ </Column>
+ </Column>
</Section>
<Banner
@@ -206,13 +204,13 @@ const SectionWrap = styled.div`
background-color: #3d3d3d;
}
- @media (min-width: ${BREAKPOINTS.mobile}) {
+ @media (min-width: 768px) {
& + &:before {
width: 100vw;
}
}
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
text-align: left;
& + &:before {
@@ -222,7 +220,7 @@ const SectionWrap = styled.div`
`;
const NavStickyWrap = styled(WrapSticky)`
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
display: none;
}
`;
diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json
index 67573971f..1c0c35984 100644
--- a/packages/website/tsconfig.json
+++ b/packages/website/tsconfig.json
@@ -28,5 +28,8 @@
]
},
- "include": ["./ts/**/*"]
+ "include": ["./ts/**/*"],
+ "reportFiles": [
+ "./ts/@next/**/*"
+ ],
}