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,7 +48,8 @@ class NoDevice extends PureComponent<StepProps, *> {
     ]
 
     return (
-      <Box sticky pt={130}>
+      <Box sticky>
+        <GrowScroll pb={7} pt={130}>
           <TrackPage category="Onboarding" name="No Device" />
           <Box grow alignItems="center">
             <LiveLogo
@@ -61,6 +63,7 @@ class NoDevice extends PureComponent<StepProps, *> {
               {optionCards.map(card => <OptionFlowCard key={card.key} card={card} />)}
             </Box>
           </Box>
+        </GrowScroll>
         <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,6 +20,7 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
+      <GrowScroll pb={7}>
         <TrackPage
           category="Onboarding"
           name="Choose PIN"
@@ -40,6 +42,7 @@ export default (props: StepProps) => {
             </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,6 +19,7 @@ export default (props: StepProps) => {
 
   return (
     <FixedTopContainer>
+      <GrowScroll pb={7}>
         <TrackPage
           category="Onboarding"
           name="Recovery Phase"
@@ -33,6 +35,7 @@ export default (props: StepProps) => {
             <WriteSeedBlue />
           )}
         </Box>
+      </GrowScroll>
       <OnboardingFooter
         horizontal
         align="center"