make google login as primary action in the login screen with clear

separation between manual and google login

screens/LoginScreen.js

@@ -31,7 +31,7 @@ const LOGIN_AND_SIGNUP_TEXT = {
   SIGN_UP: {
     title: 'Signup',
     orText: 'Or Sign Up with',
-    linkTitle: 'Already have and account?',
+    linkTitle: 'Already have an account?',
     linkText: ' Login Now',
     buttonText: ' Sign up'
   }
@@ -78,13 +78,15 @@ function LoginScreen(props) {
   const [screenType, setScreenType] = useState(SIGN_UP);
   const { t } = useTranslation();
   const { user, setUser } = React.useContext(CromaContext);
+
   useEffect(() => {
     GoogleSignin.configure({
       webClientId: '865618605576-j2tb9toevqc7tonmbp01dim1ddvod7r0.apps.googleusercontent.com',
       forceCodeForRefreshToken: true,
       offlineAccess: false
     });
   }, []);
+
   useEffect(() => {
     // check if already logged in
     (async () => {
@@ -184,15 +186,6 @@ function LoginScreen(props) {
       props.navigation.goBack();
     } catch (error) {
       setError(error.message);
-      //if (error.code === statusCodes.SIGN_IN_CANCELLED) {
-      // user cancelled the login flow
-      //} else if (error.code === statusCodes.IN_PROGRESS) {
-      // operation (e.g. sign in) is in progress already
-      //} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
-      // play services not available or outdated
-      //} else {
-      // some other error happened
-      //}
     }
   };
 
@@ -223,16 +216,26 @@ function LoginScreen(props) {
       </ScrollView>
     );
   }
+
   return (
     <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
       <View style={[styles.container, { minHeight: screenType === LOGIN ? 400 : 500 }]}>
         {props.reloadScreen === undefined && (
           <Text style={styles.title}>{t('Welcome to HueHive (Croma),')}</Text>
         )}
         <Text style={styles.intro}>
-          {props.signupMessage || t('Please Singin/Signup to continue...')}
+          {props.signupMessage || t('Please Sign in/Sign up to continue...')}
         </Text>
         {error && <Notification message={error} onPress={() => setError(undefined)}></Notification>}
+
+        <GoogleButton buttonType="primary" onPress={googleSignIn} />
+
+        <View style={styles.separator}>
+          <View style={styles.separatorLine} />
+          <Text style={styles.separatorText}>or</Text>
+          <View style={styles.separatorLine} />
+        </View>
+
         {screenType === SIGN_UP && (
           <>
             {validationErrors && validationErrors.fullName && (
@@ -279,19 +282,13 @@ function LoginScreen(props) {
             password={true}
           />
         )}
-        {screenType === LOGIN && (
-          <Text style={styles.forgotPassword}>{t('Forgot password ?')}</Text>
-        )}
+        {screenType === LOGIN && <Text style={styles.forgotPassword}>{t('Forgot password?')}</Text>}
         <CromaButton
           style={{ backgroundColor: '#ff5c59' }}
           textStyle={{ color: '#fff' }}
           onPress={onSubmit}>
           {t(LOGIN_AND_SIGNUP_TEXT[screenType].buttonText)}
         </CromaButton>
-        <GoogleButton
-          buttonType={screenType == 'LOGIN' ? 'signin' : 'signup'}
-          onPress={googleSignIn}
-        />
       </View>
       <TouchableOpacity
         onPress={() => {
@@ -342,10 +339,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     fontSize: 13
   },
-  orSignUp: {
-    padding: 10,
-    fontSize: 13
-  },
   input: {
     borderWidth: 1,
     borderColor: '#000',
@@ -354,11 +347,19 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
     paddingLeft: 10
   },
-  orSignUpContainer: {
-    display: 'flex',
+  separator: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    marginVertical: 20
+  },
+  separatorLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: '#ccc'
+  },
+  separatorText: {
+    marginHorizontal: 10,
+    fontSize: 16
   },
   changePage: {
     display: 'flex',
@@ -367,16 +368,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 200
   },
-  leftLine: {
-    height: 1,
-    width: '25%',
-    backgroundColor: '#000'
-  },
-  rightLine: {
-    height: 1,
-    width: '25%',
-    backgroundColor: '#000'
-  },
   bold: {
     fontWeight: 'bold'
   },
@@ -389,11 +380,9 @@ const styles = StyleSheet.create({
     alignItems: 'center'
   },
   logo: {
-    borderColor: '#000',
     height: 50,
     width: 50,
-    marginTop: 30,
-    padding: 3
+    marginTop: 30
   }
 });