aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 23:41:01 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 23:41:01 +0800
commit871ec6cfbc778d3090f108fc349d4cda77a81cf6 (patch)
tree0ee036f82c42457b5a48fc87af771dd02ed9d726
parent3c7dca37f5f596aa47978e3a706db7a181747d01 (diff)
downloaddexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar.gz
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar.bz2
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar.lz
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar.xz
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.tar.zst
dexon-sol-tools-871ec6cfbc778d3090f108fc349d4cda77a81cf6.zip
Adds sa bit of polish to landing page
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx5
-rw-r--r--packages/website/ts/@next/constants/utilities.tsx1
-rw-r--r--packages/website/ts/@next/pages/landing.tsx62
3 files changed, 55 insertions, 13 deletions
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index fd9e67cb4..b22a5c6db 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -61,6 +61,11 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
color: inherit;
text-decoration: none;
}
+
+ svg + p,
+ img + p {
+ padding-top: 30px;
+ }
`);
export { GlobalStyles };
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
index 7d9313583..35956c47b 100644
--- a/packages/website/ts/@next/constants/utilities.tsx
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -9,6 +9,7 @@ interface PaddingSizes {
const PADDING_SIZES: PaddingSizes = {
'default': '30px',
'large': '60px',
+ 'small': '15px',
};
export const getCSSPadding = (value: number | Array<string | number>): string => {
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 2feb4a302..fd6b5345b 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -119,27 +119,45 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
873,435
</Heading>
- <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+ <Paragraph
+ isMuted={0.4}
+ isCentered={true}
+ isNoMargin={true}
+ >
Number of transactions
</Paragraph>
</Column>
<Column colWidth="1/3" isNoPadding={true}>
- <Heading size="medium" isCentered={true}>
+ <Heading
+ size="medium"
+ isCentered={true}
+ >
$203M
</Heading>
- <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+ <Paragraph
+ isMuted={0.4}
+ isCentered={true}
+ isNoMargin={true}
+ >
Total volume
</Paragraph>
</Column>
<Column colWidth="1/3" isNoPadding={true}>
- <Heading size="medium" isCentered={true}>
+ <Heading
+ size="medium"
+ isCentered={true}
+ >
227,372
</Heading>
- <Paragraph isMuted={0.4} isCentered={true} isNoMargin={true}>
+ <Paragraph
+ isMuted={0.4}
+ isCentered={true}
+ isNoMargin={true}
+ >
Number of relayers
</Paragraph>
</Column>
@@ -151,9 +169,13 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
<Heading size="small">You're in good company</Heading>
</WrapCentered>
- <WrapGrid width="narrow">
+ <WrapGrid width="narrow" isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
- <Project key={index} name={item.name} imageUrl={item.imageUrl} />
+ <Project
+ key={index}
+ name={item.name}
+ imageUrl={item.imageUrl}
+ />
))}
</WrapGrid>
</Section>
@@ -167,7 +189,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
>
<WrapCentered>
<ReadyToBuildIcon width="150" />
- Ready to build on 0x?
+
+ <Paragraph>
+ Ready to build on 0x?
+ </Paragraph>
+
+ <Button isTransparent={true}>
+ Get Started
+ </Button>
</WrapCentered>
</Column>
@@ -178,7 +207,14 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
>
<WrapCentered>
<SupportIcon width="150" />
- Want help from the 0x team?
+
+ <Paragraph>
+ Want help from the 0x team?
+ </Paragraph>
+
+ <Button isTransparent={true}>
+ Get in Touch
+ </Button>
</WrapCentered>
</Column>
</Wrap>
@@ -193,10 +229,10 @@ const Project = ({ name, imageUrl }: ProjectLogo) => (
);
const StyledProject = styled.div`
- width: 80px;
- height: 116px;
- border: 1px solid blue;
- margin: 30px 60px;
+ width: 90px;
+ height: 90px;
+ flex-shrink: 0;
+ margin: 30px;
img {
object-fit: contain;