improve onboading login screen (#189)

App.js

@@ -1,25 +1,32 @@
 import React from 'react';
+import { ActivityIndicator } from 'react-native';
 import LoginOverlayScreen from './components/LoginOverlayScreen';
 import ApplicationRoot from './ApplicationRoot';
 import Storage from './libs/Storage';
 
 export default function App() {
+  const [isLoading, setIsLoading] = React.useState(false);
   const [isLoginOverlayStepDone, setIsLoginOverlayStepDone] = React.useState(true);
   React.useEffect(() => {
     Storage.isLoginOverlayStepDone().then((value) => {
       if (value === 'yes') {
         setIsLoginOverlayStepDone(false);
       }
+      setIsLoading(true);
     });
   }, []);
 
   const markLoginStepDone = () => {
     setIsLoginOverlayStepDone(false);
   };
 
-  return isLoginOverlayStepDone ? (
-    <LoginOverlayScreen markLoginStepDone={markLoginStepDone} />
+  return isLoading ? (
+    isLoginOverlayStepDone ? (
+      <LoginOverlayScreen markLoginStepDone={markLoginStepDone} />
+    ) : (
+      <ApplicationRoot />
+    )
   ) : (
-    <ApplicationRoot />
+    <ActivityIndicator />
   );
 }

android/fastlane/metadata/android/en-US/full_description.txt

@@ -15,12 +15,13 @@ KEY FEATURES
 • A color palette library including Material design palettes, CSS named colors etc.
 • Download PNG of the palette
 • Rearange colors in a palette
+• Generate color palettes using ChatGPT(AI)
 
 
 PRO BENEFITS
 
 • Add more than 4 colors in a palette.
-• Export/sync palettes to the private GitHub repository
+
 
 
 DESCRIPTION
@@ -45,6 +46,8 @@ We made Croma to help designers manage colors easily, because colors matter. Whi
 
 Croma can be helpful in various tasks, such as web and graphic design, anywhere colors are needed. It's a must-have productivity tool for designers.
 
+Generate color palettes in our website huehive using ChatGPT and view and edit palettes in the app.
+
 
 OPEN SOURCE
 
@@ -53,4 +56,4 @@ https://github.com/croma-app/croma-react
 
 Support:
 Have any question or suggestion? Please join our discord channel:
-https://discord.com/invite/ZSBVsBqDtg
+https://discord.com/invite/ZSBVsBqDtg

android/fastlane/metadata/android/en-US/short_description.txt

@@ -1 +1 @@
-Save your colors
+Buzzing with inspiration for your color palettes

android/fastlane/metadata/android/en-US/title.txt

@@ -1 +1 @@
-Croma - Palette Manager
+HueHive(Formerly Croma)

components/LoginOverlayScreen.js

@@ -11,6 +11,7 @@ import Storage from '../libs/Storage';
 import { PropTypes } from 'prop-types';
 
 import { GoogleSignin, GoogleSigninButton } from '@react-native-google-signin/google-signin';
+import { ScrollView } from 'react-native-gesture-handler';
 
 const LOGIN = 'LOGIN';
 const SIGN_UP = 'SIGN_UP';
@@ -169,11 +170,23 @@ function LoginOverlayScreen({ markLoginStepDone }) {
   }, []);
 
   return (
-    <View style={styles.rootContainer} showsVerticalScrollIndicator={false}>
-      <View style={[styles.container, { minHeight: screenType === LOGIN ? 400 : 500 }]}>
+    <ScrollView style={styles.rootContainer} showsVerticalScrollIndicator={true}>
+      <View style={[styles.container]}>
         <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}>{t('Please sign-in/sign-up to continue.')}</Text>
         {error && <Notification message={error} onPress={() => setError(undefined)}></Notification>}
+        <GoogleSigninButton
+          style={{
+            width: Dimensions.get('window').width * (95 / 100),
+            height: 60
+          }}
+          size={GoogleSigninButton.Size.Wide}
+          color={GoogleSigninButton.Color.Dark}
+          onPress={signIn}
+        />
+        <View style={[styles.separator]}>
+          <Text>or sign-up/sign-in using email and password</Text>
+        </View>
         {screenType === SIGN_UP && (
           <>
             {validationErrors && validationErrors.fullName && (
@@ -229,16 +242,6 @@ function LoginOverlayScreen({ markLoginStepDone }) {
           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}
-          onPress={signIn}
-        />
       </View>
       <TouchableOpacity
         onPress={() => {
@@ -250,10 +253,10 @@ function LoginOverlayScreen({ markLoginStepDone }) {
           <Text style={styles.bold}>{t(LOGIN_AND_SIGNUP_TEXT[screenType].linkText)}</Text>
         </View>
       </TouchableOpacity>
-      <TouchableOpacity style={styles.skip} onPress={_markLoginStepDone}>
-        <Text style={styles.close}>{t('Skip')}</Text>
-      </TouchableOpacity>
-    </View>
+      <CromaButton style={[styles.skip]} onPress={_markLoginStepDone}>
+        {t('Skip')}
+      </CromaButton>
+    </ScrollView>
   );
 }
 
@@ -302,7 +305,8 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     paddingTop: 10,
     paddingBottom: 10,
-    paddingLeft: 10
+    paddingLeft: 10,
+    marginTop: 10
   },
   orSignUpContainer: {
     display: 'flex',
@@ -345,10 +349,12 @@ const styles = StyleSheet.create({
     marginTop: 30,
     padding: 3
   },
+  separator: {
+    marginTop: 10,
+    marginBottom: 10
+  },
   skip: {
-    position: 'absolute',
-    bottom: 0,
-    padding: 10
+    marginBottom: 20
   }
 });