[auth] Style onboarding screen

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.formatDocument": "explicit",
+    "source.fixAll.eslint": "explicit"
+  }
+}

src/app/auth/login/index.tsx

@@ -120,7 +120,7 @@ function LoginScreen() {
 
         <View style={styles.redirectText}>
           <Text style={globalStyles.body1}>Don&apos;t have an account?</Text>
-          <Link style={globalStyles.bodyBoldUnderline} href="/auth/signup">
+          <Link style={globalStyles.bodyBoldUnderline} href="/auth/onboarding">
             Sign Up
           </Link>
         </View>

src/app/auth/onboarding/index.tsx

@@ -1,12 +1,14 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { Redirect, router } from 'expo-router';
+import { Link, Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
 import { Alert, ScrollView, Platform, Text, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 
 import styles from './styles';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
@@ -19,7 +21,7 @@ function OnboardingScreen() {
   const [username, setUsername] = useState('');
   const [lastName, setLastName] = useState('');
   const [pronouns, setPronouns] = useState('');
-  const [birthday, setBirthday] = useState(new Date());
+  const [birthday, setBirthday] = useState('');
   const [gender, setGender] = useState('');
   const [raceEthnicity, setRaceEthnicity] = useState('');
   const [showDatePicker, setShowDatePicker] = useState(Platform.OS === 'ios');
@@ -46,7 +48,7 @@ function OnboardingScreen() {
         setLastName(data.last_name || lastName);
         setUsername(data.username || username);
         setPronouns(data.pronouns || pronouns);
-        setBirthday(new Date(data.birthday) || birthday);
+        setBirthday('');
         setGender(data.gender || gender);
         setRaceEthnicity(data.race_ethnicity || raceEthnicity);
       }
@@ -111,13 +113,13 @@ function OnboardingScreen() {
     }
   };
 
-  if (!session) {
-    return <Redirect href="/auth/login" />;
-  }
+  // if (!session) {
+  //   return <Redirect href="/auth/login" />;
+  // }
 
   return (
     <ScrollView style={styles.container}>
-      <Text style={[globalStyles.h1, styles.h1]}>
+      <Text style={globalStyles.h1}>
         Welcome, {user?.user_metadata.username}
       </Text>
       <Text style={[globalStyles.body1, styles.body1]}>
@@ -130,6 +132,20 @@ function OnboardingScreen() {
           visible to other users on the app.
         </Text>
       </View>
+      <UserStringInput
+        label="Birthday"
+        placeholder="Select Date"
+        // onChange={setBirthday}
+        value={birthday}
+        placeholderTextColor={colors.darkGrey}
+        attributes={{ editable: false }}
+      >
+        <Icon
+          name="calendar-outline"
+          type="material-community"
+          color={colors.darkGrey}
+        />
+      </UserStringInput>
       <UserSelectorInput
         options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
         label="Gender"
@@ -155,7 +171,8 @@ function OnboardingScreen() {
         value={raceEthnicity}
         setValue={setRaceEthnicity}
       />
-      {showDatePicker && (
+      {/* Birthday Button Implementation */}
+      {/* {showDatePicker && (
         <DateTimePicker
           testID="dateTimePicker"
           value={birthday}
@@ -167,17 +184,25 @@ function OnboardingScreen() {
             }
           }}
         />
-      )}
-      <StyledButton
-        text={loading ? 'Loading ...' : 'Update profile'}
-        onPress={updateProfileAndGoHome}
-        disabled={loading}
-      />
-      <StyledButton
-        text="Skip"
-        onPress={() => router.replace('/home')}
-        disabled={false}
-      />
+      )} */}
+      <View style={styles.bottomContainer}>
+        <View style={styles.updateProfileButton}>
+          <StyledButton
+            text={loading ? 'Loading ...' : 'Update profile'}
+            onPress={updateProfileAndGoHome}
+            disabled={
+              loading ||
+              (gender === '' && pronouns === '' && raceEthnicity === '')
+            }
+          />
+        </View>
+        <Link
+          style={[globalStyles.bodyBoldUnderline, styles.skipButton]}
+          href="/(tabs)/home"
+        >
+          Skip For Now
+        </Link>
+      </View>
     </ScrollView>
   );
 }

src/app/auth/onboarding/styles.tsx

@@ -4,25 +4,33 @@ import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   container: {
-    paddingVertical: 63,
+    paddingVertical: 66,
     paddingLeft: 43,
     paddingRight: 44,
   },
   subtext: {
     color: colors.darkGrey,
     marginLeft: 8,
   },
-  h1: {
-    marginTop: 66,
-  },
   body1: {
     marginTop: 26,
   },
   info: {
     flex: 1,
     flexDirection: 'row',
     marginTop: 12,
-    marginBottom: 16,
     width: 250,
   },
+  bottomContainer: {
+    marginTop: 112,
+  },
+  updateProfileButton: {
+    marginTop: 30,
+    marginBottom: 24,
+  },
+  skipButton: {
+    flex: 1,
+    alignSelf: 'center',
+    color: colors.darkGrey,
+  },
 });

src/components/UserStringInput/UserStringInput.tsx

@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { View, Text, TextInput } from 'react-native';
 
 import styles from './styles';
-import globalStyles from '../../styles/globalStyles';
 import colors from '../../styles/colors';
+import globalStyles from '../../styles/globalStyles';
 
 type UserStringInputProps = {
   placeholder: string;

src/components/UserStringInput/styles.tsx

@@ -8,6 +8,7 @@ export default StyleSheet.create({
   container: {
     paddingRight: 10,
     marginTop: 8,
+    marginBottom: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',