Merge pull request #816 from 0xProject/feature/website/portal-mobile-improvements

Make onboarding and wallet copy dynamic based on OS

1 files changed, 4 insertions, 4 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 8c3b5cfd7..1adbc86cd 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -318,9 +318,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderWallet(): React.ReactNode {
-        const isMobile = utils.isMobile(this.props.screenWidth);
+        const isMobile = utils.isMobileWidth(this.props.screenWidth);
         // We need room to scroll down for mobile onboarding
-        const marginBottom = isMobile ? '200px' : '15px';
+        const marginBottom = isMobile ? '250px' : '15px';
         return (
             <div>
                 <Container className="flex flex-column items-center">
@@ -364,7 +364,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderStartOnboarding(): React.ReactNode {
-        const isMobile = utils.isMobile(this.props.screenWidth);
+        const isMobile = utils.isMobileWidth(this.props.screenWidth);
         const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`;
         const startOnboarding = (
             <Container className="flex items-center center">
@@ -530,7 +530,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         return <Section header={<TextHeader labelText="0x Relayers" />} body={this._renderRelayerIndex()} />;
     }
     private _renderRelayerIndex(): React.ReactNode {
-        const isMobile = utils.isMobile(this.props.screenWidth);
+        const isMobile = utils.isMobileWidth(this.props.screenWidth);
         return (
             <Container className="flex flex-column items-center">
                 {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>}