improve login page and added contextual message to signup

croma-app · Mar 18, 2024 · 7fa1110 · 7fa1110
1 parent 463eadd
commit 7fa1110
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 25 deletions.
diff --git a/components/GoogleButton.js b/components/GoogleButton.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+const GoogleButton = ({ buttonType, onPress }) => {
+  const buttonText = buttonType === 'signin' ? 'Sign In with Google' : 'Sign Up with Google';
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <View style={styles.iconAndText}>
+        <Icon name="google" size={20} color="#FFFFFF" style={styles.icon} />
+        <Text style={styles.buttonText}>{buttonText}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+GoogleButton.propTypes = {
+  buttonType: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#4285F4',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: 'bold'
+  },
+  iconAndText: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  icon: {
+    marginRight: 10
+  }
+});
+
+export default GoogleButton;
diff --git a/components/GridActionButton.android.js b/components/GridActionButton.android.js
@@ -139,12 +139,12 @@ const GridActionButtonAndroid = ({ navigation, setPickImageLoading }) => {
           {
             icon: (
               <Image
-                style={{ height: 30, width: 30 }}
+                style={{ height: 20, width: 20 }}
                 // eslint-disable-next-line no-undef
                 source={require('../assets/images/icon.png')}></Image>
             ),
             text1: t('Create using'),
-            text2: t(' AI'),
+            text2: t('HueHive AI'),
             onPress: async () => {
               logEvent('chat_session_action_button');
               navigation.navigate('ChatSession');

diff --git a/components/GridActionButton.ios.js b/components/GridActionButton.ios.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { NativeModules } from 'react-native';
 import Color from 'pigment/full';
 import RNColorThief from 'react-native-color-thief';
 import { notifyMessage } from '../libs/Helpers';

diff --git a/screens/ChatSessionScreen.js b/screens/ChatSessionScreen.js
@@ -11,15 +11,13 @@ import {
 import React, { useState, useEffect, useRef } from 'react';
 import { material } from 'react-native-typography';
 import { logEvent } from '../libs/Helpers';
-import { useTranslation } from 'react-i18next';
 import { createChatSession, followUpChatSession, getChatSession } from '../network/chat_session';
 import ChatCard from '../components/ChatCard';
 import LoginScreen from './LoginScreen';
 import useUserData from '../Hooks/getUserData';
 
 const ChatSessionScreen = (props) => {
   const { navigation } = props;
-  const { t } = useTranslation();
   const [messages, setMessages] = useState([]);
   const [inputText, setInputText] = useState('');
   const scrollViewRef = useRef();
@@ -79,7 +77,12 @@ const ChatSessionScreen = (props) => {
   }
 
   if (!userData) {
-    return <LoginScreen {...props} reloadScreen={getUserData}></LoginScreen>;
+    return (
+      <LoginScreen
+        {...props}
+        signupMessage="Please sign in or sign up to use HueHive AI"
+        reloadScreen={getUserData}></LoginScreen>
+    );
   }
 
   return (

diff --git a/screens/LoginScreen.js b/screens/LoginScreen.js
@@ -1,13 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  Image,
-  Dimensions
-} from 'react-native';
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, Image } from 'react-native';
 import { View } from 'react-native-animatable';
 import CromaButton from '../components/CromaButton';
 import { material } from 'react-native-typography';
@@ -21,8 +13,9 @@ import {
   removeUserSession
 } from '../libs/EncryptedStoreage';
 import Notification from '../components/Notification';
+import GoogleButton from '../components/GoogleButton';
 
-import { GoogleSignin, GoogleSigninButton } from '@react-native-google-signin/google-signin';
+import { GoogleSignin } from '@react-native-google-signin/google-signin';
 
 const LOGIN = 'LOGIN';
 const SIGN_UP = 'SIGN_UP';
@@ -236,7 +229,9 @@ function LoginScreen(props) {
         {props.reloadScreen === undefined && (
           <Text style={styles.title}>{t('Welcome to HueHive (Croma),')}</Text>
         )}
-        <Text style={styles.intro}>{t('Please Singin/Signup to continue...')}</Text>
+        <Text style={styles.intro}>
+          {props.signupMessage || t('Please Singin/Signup to continue...')}
+        </Text>
         {error && <Notification message={error} onPress={() => setError(undefined)}></Notification>}
         {screenType === SIGN_UP && (
           <>
@@ -293,14 +288,8 @@ function LoginScreen(props) {
           onPress={onSubmit}>
           {t(LOGIN_AND_SIGNUP_TEXT[screenType].buttonText)}
         </CromaButton>
-
-        <GoogleSigninButton
-          style={{
-            width: Dimensions.get('window').width * (95 / 100),
-            height: 60
-          }}
-          size={GoogleSigninButton.Size.Wide}
-          color={GoogleSigninButton.Color.Dark}
+        <GoogleButton
+          buttonType={screenType == 'LOGIN' ? 'signin' : 'signup'}
           onPress={googleSignIn}
         />
       </View>