chore(website): random fixes for mobile optimization

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>
     );