Fixes celo-labs#126 center the top area of cover (input and phone)

celo-org · Oct 2, 2019 · 59e0e4b · 59e0e4b
1 parent 64c2773
commit 59e0e4b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/packages/web/src/download/Cover.tsx b/packages/web/src/download/Cover.tsx
@@ -19,14 +19,19 @@ export default withScreenSize(
     return (
       <View style={styles.zIndex}>
         <GridRow
+          allStyle={standardStyles.centered}
           desktopStyle={standardStyles.sectionMargin}
           tabletStyle={standardStyles.sectionMarginTablet}
           mobileStyle={standardStyles.blockMarginMobile}
         >
           <Cell
             span={Spans.three4th}
             tabletSpan={Spans.full}
-            style={[styles.container, !isMobile ? standardStyles.row : styles.mobileContainer]}
+            style={[
+              styles.container,
+              screen === ScreenSizes.TABLET && { justifyContent: 'center' },
+              !isMobile ? standardStyles.row : styles.mobileContainer,
+            ]}
           >
             <View style={[styles.flex1, styles.content, isMobile && standardStyles.centered]}>
               <AppLogo />
@@ -44,13 +49,7 @@ export default withScreenSize(
               </H4>
               <RequestFunds kind={RequestType.Invite} />
             </View>
-            <View
-              style={[
-                standardStyles.centered,
-                styles.flex1,
-                isMobile ? styles.mobilePhone : styles.phone,
-              ]}
-            >
+            <View style={[standardStyles.centered, styles.flex1, phoneStyle(screen)]}>
               <PhoneIllo />
             </View>
           </Cell>
@@ -60,6 +59,17 @@ export default withScreenSize(
   })
 )
 
+function phoneStyle(screen: ScreenSizes) {
+  switch (screen) {
+    case ScreenSizes.MOBILE:
+      return styles.mobilePhone
+    case ScreenSizes.TABLET:
+      return styles.tabletPhone
+    default:
+      return styles.phone
+  }
+}
+
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
@@ -75,13 +85,18 @@ const styles = StyleSheet.create({
   flex1: {
     flex: 1,
   },
-  phone: {
-    height: '50vh',
-    maxWidth: '45vw',
-  },
   content: {
     justifyContent: 'center',
     marginHorizontal: 20,
+    maxWidth: 350,
+  },
+  phone: {
+    height: '50vh',
+    maxWidth: 275,
+  },
+  tabletPhone: {
+    height: '35vh',
+    maxWidth: 240,
   },
   mobilePhone: {
     height: '33vh',

diff --git a/packages/web/static/locales/en/download.json b/packages/web/static/locales/en/download.json
@@ -1,6 +1,6 @@
 {
   "coverTitle": "Celo Wallet",
-  "coverSubTitle": "Available for Android, iOS coming soon",
+  "coverSubTitle": "Available for Android,\niOS coming soon",
   "getStarted": "Get Started",
   "coverAction": {
     "faucet": {