aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-11-28 08:53:04 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-11-29 02:59:54 +0800
commitc2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0 (patch)
tree67c6571851c55c137c532386c307b85f7b648f0b /packages/website
parenta747abcb731c5ca12440c18b773d9923099385ae (diff)
downloaddexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar.gz
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar.bz2
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar.lz
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar.xz
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.tar.zst
dexon-sol-tools-c2fd6745eeebbe3bfcc016f2f1f9b7d96cf8dcb0.zip
chore(website): random fixes for mobile optimization
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/pages/instant/features.tsx28
-rw-r--r--packages/website/ts/pages/instant/instant.tsx2
-rw-r--r--packages/website/ts/pages/instant/introducing_0x_instant.tsx67
-rw-r--r--packages/website/ts/pages/instant/screenshots.tsx2
4 files changed, 63 insertions, 36 deletions
diff --git a/packages/website/ts/pages/instant/features.tsx b/packages/website/ts/pages/instant/features.tsx
index 96256d337..9b61df354 100644
--- a/packages/website/ts/pages/instant/features.tsx
+++ b/packages/website/ts/pages/instant/features.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
import { ScreenWidths } from 'ts/types';
@@ -13,7 +14,7 @@ export interface FeatureProps {
export const Features = (props: FeatureProps) => (
<Container backgroundColor={colors.instantSecondaryBackground} className="py3 flex flex-column px3">
<FeatureItem
- imgSrc="images/instant/snt_screenshot.png"
+ imgSrc="images/instant/feature_1.svg"
title="Support ERC-20 and ERC-721 tokens"
description="Seamlessly integrate token purchasing into your product experience by offering digital assets ranging from in-game items to stablecoins."
linkInfos={[
@@ -29,7 +30,7 @@ export const Features = (props: FeatureProps) => (
screenWidth={props.screenWidth}
/>
<FeatureItem
- imgSrc="images/instant/snt_screenshot.png"
+ imgSrc="images/instant/feature_2.svg"
title="Generate revenue for your business"
description="With just a few lines of code, you can earn up to 5% in affiliate fees on every transaction from your crypto wallet or dApp."
linkInfos={[
@@ -41,7 +42,7 @@ export const Features = (props: FeatureProps) => (
screenWidth={props.screenWidth}
/>
<FeatureItem
- imgSrc="images/instant/snt_screenshot.png"
+ imgSrc="images/instant/feature_3.svg"
title="Easy and Flexible Integration"
description="Use our out-of-the-box design or customize the user interface by integrating the AssetBuyer engine. You can also tap into 0x networked liquidity or choose your own liquidity pool."
linkInfos={[
@@ -75,9 +76,14 @@ interface FeatureItemProps {
const FeatureItem = (props: FeatureItemProps) => {
const { imgSrc, title, description, linkInfos, screenWidth } = props;
const isLargeScreen = screenWidth === ScreenWidths.Lg;
- const image = <Container backgroundColor={colors.instantPrimaryBackground} maxWidth="425px" maxHeight="225px" />;
+ const maxWidth = isLargeScreen ? '500px' : undefined;
+ const image = (
+ <Container className="center" minWidth="435px" maxHeight="225px">
+ <Image src={imgSrc} />
+ </Container>
+ );
const info = (
- <Container maxWidth="500px">
+ <Container maxWidth={maxWidth}>
<Text fontSize="24px" lineHeight="34px" fontColor={colors.white} fontWeight={500}>
{title}
</Text>
@@ -92,7 +98,13 @@ const FeatureItem = (props: FeatureItemProps) => {
window.open(linkInfo.linkSrc, '_blank');
};
return (
- <Container className="flex items-center" marginRight="32px" onClick={onClick} cursor="pointer">
+ <Container
+ key={linkInfo.linkSrc}
+ className="flex items-center"
+ marginRight="32px"
+ onClick={onClick}
+ cursor="pointer"
+ >
<Container>
<Text fontSize="16px" fontColor={colors.white}>
{linkInfo.displayText}
@@ -118,9 +130,9 @@ const FeatureItem = (props: FeatureItemProps) => {
<Container marginLeft="115px">{info}</Container>
</Container>
) : (
- <Container className="flex flex-column items-center">
+ <Container className="flex flex-column items-center" width="100%">
{image}
- <Container marginTop="32px">{info}</Container>
+ <Container marginTop="48px">{info}</Container>
</Container>
)}
</Container>
diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index 8c0afa298..4eac251f4 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -53,7 +53,7 @@ export class Instant extends React.Component<InstantProps, InstantState> {
isNightVersion={true}
/>
<Container backgroundColor={colors.instantPrimaryBackground} />
- <Introducing0xInstant />
+ <Introducing0xInstant screenWidth={this.props.screenWidth} />
<Screenshots screenWidth={this.props.screenWidth} />
<Features screenWidth={this.props.screenWidth} />
<NeedMore screenWidth={this.props.screenWidth} />
diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
index 50a7a1b2d..92183ba98 100644
--- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -4,32 +4,47 @@ import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
-export const Introducing0xInstant = () => (
- <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
- <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
- <Container className="sm-center sm-pt3">
- <Text
- fontColor={colors.white}
- fontSize="42px"
- lineHeight="52px"
- fontFamily="Roboto Mono"
- fontWeight="600"
- >
- Introducing 0x Instant
- </Text>
- </Container>
- <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
- <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
- A free and flexible way to offer simple crypto
- <br /> purchasing in any app or website.
- </Text>
- </Container>
- <div className="py3">
- <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
- Get Started
- </Button>
+export interface Introducing0xInstantProps {
+ screenWidth: ScreenWidths;
+}
+
+export const Introducing0xInstant = (props: Introducing0xInstantProps) => {
+ const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+ const title = isSmallScreen ? (
+ <div>
+ Introducing<br />0x Instant
+ </div>
+ ) : (
+ <div>Introducing 0x Instant</div>
+ );
+ return (
+ <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
+ <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
+ <Container className="sm-center sm-pt3">
+ <Text
+ fontColor={colors.white}
+ fontSize="42px"
+ lineHeight="52px"
+ fontFamily="Roboto Mono"
+ fontWeight="600"
+ >
+ {title}
+ </Text>
+ </Container>
+ <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
+ <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
+ A free and flexible way to offer simple crypto
+ <br /> purchasing in any app or website.
+ </Text>
+ </Container>
+ <div className="py3">
+ <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
+ Get Started
+ </Button>
+ </div>
</div>
</div>
- </div>
-);
+ );
+};
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
index fe9ca03b9..7dcf17fd1 100644
--- a/packages/website/ts/pages/instant/screenshots.tsx
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -28,7 +28,7 @@ export const Screenshots = (props: ScreenshotsProps) => {
return (
<Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
{_.map(images, image => {
- return <img className="px1" width="300px" height="420px" src={image} />;
+ return <img className="px1 flex-none" width="300px" height="420px" src={image} key={image} />;
})}
</Container>
);