Improv responsive UI

lukasmasuch · lukasmasuch · commit 403930e8cbf8 · 2020-04-02T18:50:59.000+02:00
diff --git a/app/mobile/screens/AppIntroScreen.js b/app/mobile/screens/AppIntroScreen.js
@@ -13,7 +13,7 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         height: '100%',
-        backgroundColor: DEFAULT_BACKGROUND,
+        backgroundColor: DEFAULT_BACKGROUND
     },
     slide: {
         flex: 1,
@@ -23,9 +23,10 @@ const styles = StyleSheet.create({
     image: {
         width: 200,
         height: 200,
+        marginTop: -70,
         justifyContent: 'center',
         alignItems: 'center',
-        marginTop: 150,
+        alignSelf: 'center'
     },
     buttonCircle: {
         width: 40,
@@ -39,6 +40,8 @@ const styles = StyleSheet.create({
         width: 140,
         height: 60,
         marginTop: 4,
+        //position: 'absolute',
+        //top: 0,
         alignSelf: 'center',
     },
 });
@@ -112,7 +115,7 @@ export default function AppIntroScreen(props) {
                         resizeMode="contain"
                         style={styles.logo}></Image>
                 ) : (
-                    <View style={{height: 70}}></View>
+                    <View style={{height: 60}}></View>
                 )}
                 <View
                     style={{
@@ -121,7 +124,9 @@ export default function AppIntroScreen(props) {
                         marginRight: 50,
                         marginLeft: 50,
                         backgroundColor: DEFAULT_BACKGROUND,
+                        justifyContent: 'center',
                     }}>
+                        
                     <Image style={styles.image} source={item.image} />
                     <Headline style={{fontSize: 32}}>{item.title}</Headline>
                     <Paragraph style={{fontSize: 17, marginTop: 15, textAlign: 'center'}}>
diff --git a/app/mobile/screens/NewUserScreen.js b/app/mobile/screens/NewUserScreen.js
@@ -19,7 +19,6 @@ const styles = StyleSheet.create({
     image: {
         width: 180,
         height: 180,
-        marginTop: 150,
         alignItems: 'center',
         alignSelf: 'center',
     },
@@ -37,7 +36,7 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontFamily: 'roboto-regular',
         textAlign: 'center',
-        marginTop: 60,
+        marginTop: 50,
         marginRight: 45,
         marginLeft: 45,
         alignSelf: 'center',
@@ -49,13 +48,16 @@ export default function NewUserScreen(props) {
 
     return (
         <View style={styles.container}>
+            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',}}>
             <Image
                 source={require('../assets/images/cotect-logo.png')}
                 resizeMode="contain"
                 style={styles.image}></Image>
             <Text style={styles.cotectLogo}>{APP_NAME}</Text>
             <Text style={styles.welcomeMessage}>{t('home.welcomeMessage')}</Text>
-            <View style={{flex: 1, justifyContent: 'flex-end', marginBottom: 36}}>
+            </View>
+            
+            <View style={{justifyContent: 'flex-end', marginBottom: 36}}>
                 <Button
                     mode="outlined"
                     style={{...styles.actionButton, marginBottom: 24}}
