Merge pull request #750 from meriadec/onboarding-layout

Fix Onboarding layout on small screens

src/components/Onboarding/steps/Init.js

@@ -7,6 +7,7 @@ import { colors } from 'styles/theme'
 import styled from 'styled-components'
 import { flowType } from 'reducers/onboarding'
 import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
 import TrackPage from 'analytics/TrackPage'
 import IconPlus from 'icons/Plus'
 import IconRecover from 'icons/Recover'
@@ -64,7 +65,7 @@ class Init extends PureComponent<StepProps, *> {
     ]
 
     return (
-      <Box sticky justifyContent="center">
+      <GrowScroll full justifyContent="center" py={7}>
         <TrackPage category="Onboarding" name="Init" />
         <Box align="center">
           <LiveLogo
@@ -78,7 +79,7 @@ class Init extends PureComponent<StepProps, *> {
             {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
           </Box>
         </Box>
-      </Box>
+      </GrowScroll>
     )
   }
 }

src/components/Onboarding/steps/NoDevice.js

@@ -5,6 +5,7 @@ import { shell } from 'electron'
 import { i } from 'helpers/staticPath'
 
 import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
 import TrackPage from 'analytics/TrackPage'
 import IconCart from 'icons/Cart'
 import IconTruck from 'icons/Truck'
@@ -47,20 +48,22 @@ class NoDevice extends PureComponent<StepProps, *> {
     ]
 
     return (
-      <Box sticky pt={130}>
+      <Box sticky>
-        <TrackPage category="Onboarding" name="No Device" />
+        <GrowScroll pb={7} pt={130}>
-        <Box grow alignItems="center">
+          <TrackPage category="Onboarding" name="No Device" />
-          <LiveLogo
+          <Box grow alignItems="center">
-            style={{ width: 64, height: 64 }}
+            <LiveLogo
-            icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
+              style={{ width: 64, height: 64 }}
-          />
+              icon={<img src={i('ledgerlive-logo.svg')} alt="" width={40} height={40} />}
-          <Box m={5} style={{ maxWidth: 480 }}>
+            />
-            <Title>{t('onboarding:noDevice.title')}</Title>
+            <Box m={5} style={{ maxWidth: 480 }}>
+              <Title>{t('onboarding:noDevice.title')}</Title>
+            </Box>
+            <Box pt={4} flow={4}>
+              {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
+            </Box>
           </Box>
-          <Box pt={4} flow={4}>
+        </GrowScroll>
-            {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
-          </Box>
-        </Box>
         <OnboardingFooterWrapper>
           <Button padded outlineGrey onClick={() => prevStep()} mr="auto">
             {t('app:common.back')}

src/components/Onboarding/steps/SelectPIN/index.js

@@ -5,6 +5,7 @@ import React from 'react'
 import Box from 'components/base/Box'
 import TrackPage from 'analytics/TrackPage'
 
+import GrowScroll from 'components/base/GrowScroll'
 import { Title, FixedTopContainer } from '../../helperComponents'
 import OnboardingFooter from '../../OnboardingFooter'
 import SelectPINnano from './SelectPINnano'
@@ -19,27 +20,29 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
-      <TrackPage
+      <GrowScroll pb={7}>
-        category="Onboarding"
+        <TrackPage
-        name="Choose PIN"
+          category="Onboarding"
-        flowType={onboarding.flowType}
+          name="Choose PIN"
-        deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+          flowType={onboarding.flowType}
-      />
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
-      {onboarding.flowType === 'restoreDevice' ? (
+        />
-        <Box grow alignItems="center">
+        {onboarding.flowType === 'restoreDevice' ? (
-          <Title>{t('onboarding:selectPIN.restore.title')}</Title>
+          <Box grow alignItems="center">
-          <Box align="center" mt={7}>
+            <Title>{t('onboarding:selectPIN.restore.title')}</Title>
-            {onboarding.isLedgerNano ? <SelectPINrestoreNano /> : <SelectPINrestoreBlue />}
+            <Box align="center" mt={7}>
+              {onboarding.isLedgerNano ? <SelectPINrestoreNano /> : <SelectPINrestoreBlue />}
+            </Box>
           </Box>
-        </Box>
+        ) : (
-      ) : (
+          <Box grow alignItems="center">
-        <Box grow alignItems="center">
+            <Title>{t('onboarding:selectPIN.initialize.title')}</Title>
-          <Title>{t('onboarding:selectPIN.initialize.title')}</Title>
+            <Box align="center" mt={7}>
-          <Box align="center" mt={7}>
+              {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
-            {onboarding.isLedgerNano ? <SelectPINnano /> : <SelectPINblue />}
+            </Box>
           </Box>
-        </Box>
+        )}
-      )}
+      </GrowScroll>
       <OnboardingFooter horizontal flow={2} t={t} nextStep={nextStep} prevStep={prevStep} />
     </FixedTopContainer>
   )

src/components/Onboarding/steps/WriteSeed/index.js

@@ -5,8 +5,9 @@ import React from 'react'
 import Box from 'components/base/Box'
 import TrackPage from 'analytics/TrackPage'
 
-import OnboardingFooter from '../../OnboardingFooter'
+import GrowScroll from 'components/base/GrowScroll'
 
+import OnboardingFooter from '../../OnboardingFooter'
 import WriteSeedNano from './WriteSeedNano'
 import WriteSeedBlue from './WriteSeedBlue'
 import WriteSeedRestore from './WriteSeedRestore'
@@ -18,21 +19,23 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
-      <TrackPage
+      <GrowScroll pb={7}>
-        category="Onboarding"
+        <TrackPage
-        name="Recovery Phase"
+          category="Onboarding"
-        flowType={onboarding.flowType}
+          name="Recovery Phase"
-        deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
+          flowType={onboarding.flowType}
-      />
+          deviceType={onboarding.isLedgerNano ? 'Nano S' : 'Blue'}
-      <Box grow alignItems="center">
+        />
-        {onboarding.flowType === 'restoreDevice' ? (
+        <Box grow alignItems="center">
-          <WriteSeedRestore onboarding={onboarding} />
+          {onboarding.flowType === 'restoreDevice' ? (
-        ) : onboarding.isLedgerNano ? (
+            <WriteSeedRestore onboarding={onboarding} />
-          <WriteSeedNano />
+          ) : onboarding.isLedgerNano ? (
-        ) : (
+            <WriteSeedNano />
-          <WriteSeedBlue />
+          ) : (
-        )}
+            <WriteSeedBlue />
-      </Box>
+          )}
+        </Box>
+      </GrowScroll>
       <OnboardingFooter
         horizontal
         align="center"