Merge pull request #2667 from ecency/sa/auth-screens-imgs-bug

[Bug Fix] Auth screens images issues

src/components/loginHeader/view/loginHeaderStyles.js

@@ -4,7 +4,7 @@ export default EStyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'column',
-    height: '$deviceHeight / 4',
+    height: '$deviceHeight / 3',
     backgroundColor: '$primaryBackgroundColor',
   },
   safeArea: {
@@ -12,10 +12,12 @@ export default EStyleSheet.create({
   },
   body: {
     flexDirection: 'row',
-    maxHeight: '$deviceHeight / 4',
+    maxHeight: '$deviceHeight / 3',
     overflow: 'hidden',
     backgroundColor: '$primaryBackgroundColor',
     height: '$deviceHeight / 3.9',
+    justifyContent: 'space-between',
+    alignItems: 'center',
   },
   description: {
     textAlignVertical: 'center',
@@ -30,18 +32,20 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
     marginBottom: 16,
   },
+  mascotContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
   mascot: {
-    position: 'absolute',
-    width: 160,
-    height: 227,
-    marginTop: 40,
-    right: -20,
+    width: '70%',
+    height: '70%',
   },
   titleText: {
     alignSelf: 'center',
     marginTop: 20,
     marginLeft: 32,
-    width: '$deviceWidth / 4',
+    marginRight: 12,
+    flex: 1,
   },
   headerRow: {
     width: '$deviceWidth',
@@ -50,11 +54,15 @@ export default EStyleSheet.create({
     backgroundColor: '$primaryBackgroundColor',
     paddingVertical: 8,
   },
+  logoContainer: {
+    paddingLeft: 32,
+    paddingRight: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   logo: {
     width: 32,
     height: 32,
-    marginLeft: 32,
-    alignSelf: 'center',
   },
   headerButton: {
     margin: 10,

src/components/loginHeader/view/loginHeaderView.js

@@ -33,10 +33,13 @@ class LoginHeaderView extends PureComponent {
       <SafeAreaView style={styles.safeArea}>
         <View styles={styles.container}>
           <View style={styles.headerRow}>
-            <Image
-              style={styles.logo}
-              source={require('../../../assets/ecency_logo_transparent.png')}
-            />
+            <View style={styles.logoContainer}>
+              <Image
+                resizeMode="contain"
+                style={styles.logo}
+                source={require('../../../assets/ecency_logo_transparent.png')}
+              />
+            </View>
             <View style={styles.headerButton}>
               <TextButton
                 onPress={onPress}
@@ -54,7 +57,13 @@ class LoginHeaderView extends PureComponent {
                 <Text style={styles.title}>{title}</Text>
                 <Text style={styles.description}>{description}</Text>
               </View>
-              <Image style={styles.mascot} source={require('../../../assets/love_mascot.png')} />
+              <View style={styles.mascotContainer}>
+                <Image
+                  resizeMode="contain"
+                  style={styles.mascot}
+                  source={require('../../../assets/love_mascot.png')}
+                />
+              </View>
             </View>
           </Animatable.View>
           <LineBreak />

src/screens/register/registerScreen.tsx

@@ -183,7 +183,7 @@ const RegisterScreen = ({ navigation, route }) => {
     <SafeAreaView style={styles.container}>
       <StatusBar hidden translucent />
       <View style={styles.headerRow}>
-        <Image style={styles.logo} source={ESTEEM_SMALL_LOGO} />
+        <Image resizeMode="contain" style={styles.logo} source={ESTEEM_SMALL_LOGO} />
         <View style={styles.headerButton}>
           <TextButton
             onPress={() => {
@@ -206,7 +206,9 @@ const RegisterScreen = ({ navigation, route }) => {
               {intl.formatMessage({ id: 'register.title_description' })}
             </Text>
           </View>
-          <Image style={styles.mascot} source={ESTEEM_LOGO} />
+          <View style={styles.mascotContainer}>
+            <Image style={styles.mascot} source={ESTEEM_LOGO} />
+          </View>
         </View>
       </Animatable.View>
       <KeyboardAvoidingView

src/screens/register/registerStyles.js

@@ -25,12 +25,15 @@ export default EStyleSheet.create({
   },
   input: {
     color: '$primaryDarkText',
-    flex:1,
+    flex: 1,
   },
   header: {
     flexDirection: 'row',
+    overflow: 'hidden',
     backgroundColor: '$primaryBackgroundColor',
+    height: '$deviceHeight / 5',
     justifyContent: 'space-between',
+    alignItems: 'center',
   },
   description: {
     textAlignVertical: 'center',
@@ -45,14 +48,20 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
     marginBottom: 16,
   },
+  mascotContainer: {
+    flex: 1,
+  },
   mascot: {
-    width: 160,
-    height: 127,
+    marginTop: 4,
+    width: '90%',
+    height: '90%',
   },
   titleText: {
     alignSelf: 'center',
     marginTop: 20,
     marginLeft: 32,
+    marginRight: 12,
+    flex: 1,
   },
   headerRow: {
     flexDirection: 'row',