updated styling

3 files changed, 143 insertions, 114 deletions

diff --git a/src/components/onboarding/ArrowButton.tsx b/src/components/onboarding/ArrowButton.tsx
index 78dbab32..dcf559a8 100644
--- a/src/components/onboarding/ArrowButton.tsx
+++ b/src/components/onboarding/ArrowButton.tsx
@@ -38,8 +38,8 @@ const ArrowButton: React.FC<ArrowButtonProps> = (props) => {
 
 const styles = StyleSheet.create({
   image: {
-    // width: '100%',
-    // height: '100%',
+    width: '100%',
+    height: '100%',
   },
 });
 
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 277331b2..2152ffb9 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -11,10 +11,9 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  View,
 } from 'react-native';
 import {normalize} from 'react-native-elements';
-import Animated, {Easing} from 'react-native-reanimated';
+import Animated, {Easing, useValue} from 'react-native-reanimated';
 import {
   ArrowButton,
   Background,
@@ -41,7 +40,7 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {sendOtpStatusCode, sendRegister} from '../../services';
 import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type BasicInfoOnboardingRouteProp = RouteProp<
   OnboardingStackParams,
@@ -68,6 +67,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
+  const fadeButtonValue = useValue<number>(0);
   const [form, setForm] = useState({
     fname: '',
     lname: '',
@@ -77,19 +77,38 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
     password: '',
   });
 
-  const fadeComponentIn = async () => {
-    Animated.timing(fadeValue, {
-      toValue: 1,
-      duration: 1000,
+  const fadeFormIn = () => {
+    setFadeValue(new Animated.Value(0));
+  };
+
+  const fadeButtonTo = (target: number) => {
+    Animated.timing(fadeButtonValue, {
+      toValue: target,
+      duration: 100,
       easing: Easing.linear,
     }).start();
   };
 
   useEffect(() => {
-    fadeComponentIn();
+    const fade = async () => {
+      Animated.timing(fadeValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+      }).start();
+    };
+    fade();
   }, [fadeValue]);
 
-  const goNext = async () => {
+  useEffect(() => {
+    if (valid) {
+      fadeButtonTo(1);
+    } else {
+      fadeButtonTo(0);
+    }
+  }, [valid]);
+
+  const goToPhoneVerification = async () => {
     if (!attemptedSubmit) {
       setAttemptedSubmit(true);
     }
@@ -262,7 +281,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
       setCurrentStep(currentStep + 1);
       setAttemptedSubmit(false);
       setValid(false);
-      setFadeValue(new Animated.Value(0));
+      fadeFormIn();
     }
   };
   const advanceRegistration = async () => {
@@ -317,63 +336,70 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
-      {/* getting rid of registration progress in onboarding*/}
-      {/* <RegistrationWizard style={styles.wizard} step="one" /> */}
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={-(SCREEN_HEIGHT * 0.2)}
         style={styles.container}>
-        <View style={styles.footer}>
-          {currentStep !== 0 && currentStep !== 3 && (
-            <ArrowButton
-              style={styles.footer}
-              direction="backward"
-              onboarding={true}
-              onPress={() => {
-                // if I go back do I want to reset the previous form?
-                setCurrentStep(currentStep - 1);
-                resetForm(step.placeholder);
-                setAttemptedSubmit(false);
-              }}
-            />
-          )}
-        </View>
+        {currentStep !== 0 && currentStep !== 3 && (
+          <ArrowButton
+            style={styles.backArrow}
+            direction="backward"
+            onboarding={true}
+            onPress={() => {
+              // if I go back do I want to reset the previous form?
+              setCurrentStep(currentStep - 1);
+              resetForm(step.placeholder);
+              setAttemptedSubmit(false);
+              setFadeValue(new Animated.Value(0));
+            }}
+          />
+        )}
         {step.placeholder === 'Phone' && !isPhoneVerified ? (
-          <Animated.View style={{opacity: fadeValue}}>
-            <TaggInput
-              maxLength={10} // currently only support US phone numbers
-              accessibilityHint="Enter your phone number."
-              accessibilityLabel="Phone number input field."
-              placeholder="Phone Number"
-              autoCompleteType="tel"
-              selectionColor="white"
-              textContentType="telephoneNumber"
-              autoCapitalize="none"
-              externalStyles={{
-                warning: styles.passWarning,
-              }}
-              keyboardType="number-pad"
-              onChangeText={handlePhoneUpdate}
-              autoFocus={true}
-              blurOnSubmit={false}
-              valid={valid}
-              invalidWarning={'Please enter a valid 10 digit number.'}
-              attemptedSubmit={attemptedSubmit}
-              onSubmitEditing={goNext}
-            />
-            <TaggSquareButton
-              onPress={goNext}
-              title={'Verify'}
-              buttonStyle={'normal'}
-              buttonColor={'white'}
-              labelColor={'blue'}
-            />
-          </Animated.View>
+          <>
+            <Animated.Text style={[styles.formHeader, {opacity: fadeValue}]}>
+              PHONE NUMBER
+            </Animated.Text>
+            <Animated.View style={[styles.formContainer, {opacity: fadeValue}]}>
+              <TaggInput
+                style={styles.input}
+                maxLength={10} // currently only support US phone numbers
+                accessibilityHint="Enter your phone number."
+                accessibilityLabel="Phone number input field."
+                placeholder="Phone Number"
+                autoCompleteType="tel"
+                selectionColor="white"
+                textContentType="telephoneNumber"
+                autoCapitalize="none"
+                externalStyles={{
+                  warning: styles.passWarning,
+                }}
+                keyboardType="number-pad"
+                onChangeText={handlePhoneUpdate}
+                autoFocus={true}
+                blurOnSubmit={false}
+                valid={valid}
+                invalidWarning={'Please enter a valid 10 digit number.'}
+                attemptedSubmit={attemptedSubmit}
+                onSubmitEditing={goToPhoneVerification}
+              />
+              <Animated.View style={{opacity: fadeButtonValue}}>
+                <TaggSquareButton
+                  onPress={goToPhoneVerification}
+                  title={'Verify'}
+                  buttonStyle={'normal'}
+                  buttonColor={'white'}
+                  labelColor={'blue'}
+                />
+              </Animated.View>
+            </Animated.View>
+          </>
         ) : (
           <>
             {step.placeholder !== 'Password' ? (
               <>
                 <Text style={styles.formHeader}>SIGN UP</Text>
-                <Animated.View style={{opacity: fadeValue}}>
+                <Animated.View
+                  style={[styles.formContainer, {opacity: fadeValue}]}>
                   <TaggInput
                     key={step.placeholder}
                     style={styles.input}
@@ -396,17 +422,20 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                     invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`}
                     attemptedSubmit={attemptedSubmit}
                   />
-                  <TaggSquareButton
-                    onPress={advance}
-                    title={'Next'}
-                    buttonStyle={'normal'}
-                    buttonColor={'white'}
-                    labelColor={'blue'}
-                  />
+                  <Animated.View style={{opacity: fadeButtonValue}}>
+                    <TaggSquareButton
+                      onPress={advance}
+                      title={'Next'}
+                      buttonStyle={'normal'}
+                      buttonColor={'white'}
+                      labelColor={'blue'}
+                    />
+                  </Animated.View>
                 </Animated.View>
               </>
             ) : (
-              <Animated.View style={{opacity: fadeValue}}>
+              <Animated.View
+                style={[styles.formContainer, {opacity: fadeValue}]}>
                 <TaggInput
                   accessibilityHint="Enter a password."
                   accessibilityLabel="Password input field."
@@ -432,6 +461,7 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                 <TouchableOpacity
                   accessibilityLabel="Show password button"
                   accessibilityHint="Select this if you want to display your tagg password"
+                  style={styles.showPassContainer}
                   onPress={() => setPassVisibility(!passVisibility)}>
                   <Text style={styles.showPass}>Show Password</Text>
                 </TouchableOpacity>
@@ -441,13 +471,15 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
                   accepted={tcAccepted}
                   onChange={setTCAccepted}
                 />
-                <TaggSquareButton
-                  onPress={advanceRegistration}
-                  title={'Next'}
-                  buttonStyle={'normal'}
-                  buttonColor={'white'}
-                  labelColor={'blue'}
-                />
+                <Animated.View style={{opacity: fadeButtonValue}}>
+                  <TaggSquareButton
+                    onPress={advanceRegistration}
+                    title={'Next'}
+                    buttonStyle={'normal'}
+                    buttonColor={'white'}
+                    labelColor={'blue'}
+                  />
+                </Animated.View>
               </Animated.View>
             )}
           </>
@@ -464,18 +496,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  formContainer: {
+    marginTop: '20%',
+    height: SCREEN_HEIGHT * 0.2,
+    width: '80%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
   arrow: {
     color: '#6EE7E7',
   },
-  showPass: {
-    color: 'white',
+  showPassContainer: {
     marginVertical: '1%',
     borderBottomWidth: 1,
     paddingBottom: '1%',
-    left: '-18%',
+    alignSelf: 'flex-start',
     borderBottomColor: 'white',
     marginBottom: '8%',
   },
+  showPass: {
+    color: 'white',
+  },
   passWarning: {
     fontSize: 14,
     marginTop: 5,
@@ -484,7 +525,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   input: {
-    minWidth: '60%',
+    minWidth: '100%',
     height: 40,
     fontSize: 16,
     fontWeight: '600',
@@ -511,7 +552,7 @@ const styles = StyleSheet.create({
     fontSize: 30,
     fontWeight: '600',
     position: 'absolute',
-    top: '20%',
+    top: SCREEN_HEIGHT * 0.15,
   },
   load: {
     top: '5%',
@@ -519,19 +560,12 @@ const styles = StyleSheet.create({
   tc: {
     marginVertical: '5%',
   },
-  footer: {
-    height: normalize(50),
-    width: normalize(50),
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
+  backArrow: {
+    width: normalize(29),
+    height: normalize(25),
+    position: 'absolute',
+    top: HeaderHeight * 1.5,
+    left: 20,
   },
 });
 export default BasicInfoOnboarding;
diff --git a/src/screens/onboarding/PhoneVerification.tsx b/src/screens/onboarding/PhoneVerification.tsx
index 93ae8fdc..7d9a04d8 100644
--- a/src/screens/onboarding/PhoneVerification.tsx
+++ b/src/screens/onboarding/PhoneVerification.tsx
@@ -4,7 +4,6 @@ import React, {useMemo} from 'react';
 import {
   Alert,
   KeyboardAvoidingView,
-  Platform,
   StyleSheet,
   TouchableOpacity,
   View,
@@ -16,6 +15,7 @@ import {
   useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
+import {normalize} from 'react-native-elements';
 import {trackPromise} from 'react-promise-tracker';
 import {
   ArrowButton,
@@ -31,6 +31,7 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {sendOtp, verifyOtp} from '../../services';
 import {BackgroundGradientType} from '../../types';
+import {HeaderHeight} from '../../utils';
 
 type PhoneVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -75,14 +76,14 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({
 
   const footer = useMemo(
     () => (
-      <View style={styles.footer}>
-        <ArrowButton
-          direction="backward"
-          onPress={() =>
-            navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
-          }
-        />
-      </View>
+      <ArrowButton
+        style={styles.backArrow}
+        direction="backward"
+        onboarding={true}
+        onPress={() =>
+          navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
+        }
+      />
     ),
     [],
   );
@@ -201,18 +202,12 @@ const styles = StyleSheet.create({
   loadingIndicator: {
     marginVertical: '5%',
   },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
+  backArrow: {
+    width: normalize(29),
+    height: normalize(25),
+    position: 'absolute',
+    top: HeaderHeight * 1.5,
+    left: 20,
   },
 });
 export default PhoneVerification;