[auth] Style onboarding screen

package.json

@@ -21,7 +21,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
     "@mui/system": "^5.14.13",
     "@react-native-async-storage/async-storage": "^1.18.2",
-    "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",

src/app/(tabs)/home/index.tsx

@@ -68,7 +68,7 @@ function HomeScreen() {
         contentContainerStyle={{ paddingHorizontal: 8 }}
       >
         <View style={styles.headerContainer}>
-          <Text style={globalStyles.h2}>
+          <Text style={globalStyles.h1}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
           <Pressable onPress={() => router.push('/settings')}>
@@ -86,7 +86,7 @@ function HomeScreen() {
             <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (
                 <PreviewCard
-                  key={story.title}
+                  key={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}

src/app/auth/onboarding/index.tsx

@@ -1,4 +1,4 @@
-import { Redirect, router } from 'expo-router';
+import { Link, Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
 import {
   Alert,
@@ -9,16 +9,17 @@ import {
   Appearance,
 } from 'react-native';
 import { Icon } from 'react-native-elements';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
 import styles from './styles';
-import colors from '../../../styles/colors';
 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';
-import UserStringInput from '../../../components/UserStringInput/UserStringInput';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function OnboardingScreen() {
   const { session, user } = useSession();
@@ -149,95 +150,107 @@ function OnboardingScreen() {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <View>
-        <DateTimePickerModal
-          isVisible={showDatePicker}
-          mode="date"
-          onConfirm={onConfirmDate}
-          onCancel={() => setShowDatePicker(false)}
-          date={displayDate}
-          display="inline"
-          isDarkModeEnabled={isDark}
-          themeVariant={isDark ? 'dark' : 'light'}
-        />
-        <Text style={[globalStyles.h1, styles.h1]}>
-          Welcome, {user?.user_metadata.username}
-        </Text>
-        <Text style={[globalStyles.body1, styles.body1]}>
-          Input your profile information below.
-        </Text>
-        <View style={styles.info}>
-          <Icon type="material" name="info-outline" color="#797979" />
-          <Text style={[globalStyles.subtext, styles.subtext]}>
-            This information is only used for outreach efforts, and will not be
-            visible to other users on the app.
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.flex}>
+        <View>
+          <DateTimePickerModal
+            isVisible={showDatePicker}
+            mode="date"
+            onConfirm={onConfirmDate}
+            onCancel={() => setShowDatePicker(false)}
+            date={displayDate}
+            display="inline"
+            isDarkModeEnabled={isDark}
+            themeVariant={isDark ? 'dark' : 'light'}
+          />
+          <Text style={globalStyles.h1}>
+            Welcome, {user?.user_metadata.username}
           </Text>
-        </View>
-
-        <View style={styles.datePickerButton}>
-          <Pressable
-            onPress={() => {
-              setShowDatePicker(!showDatePicker);
-            }}
-          >
-            <View pointerEvents="none">
-              <UserStringInput
-                placeholderTextColor={colors.darkGrey}
-                placeholder="Select Date"
-                label="Birthday"
-                value={birthday}
+          <Text style={[globalStyles.body1, styles.body1]}>
+            Input your profile information below.
+          </Text>
+          <View style={styles.info}>
+            <Icon type="material" name="info-outline" color="#797979" />
+            <Text style={[globalStyles.subtext, styles.subtext]}>
+              This information is only used for outreach efforts, and will not
+              be visible to other users on the app.
+            </Text>
+          </View>
+          <View style={styles.inputContainer}>
+            <View>
+              <Pressable
+                onPress={() => {
+                  setShowDatePicker(!showDatePicker);
+                }}
               >
-                <Icon
-                  name="event"
-                  type="material"
-                  color={colors.darkGrey}
-                  style={styles.icon}
-                ></Icon>
-              </UserStringInput>
+                <View pointerEvents="none">
+                  <UserStringInput
+                    placeholderTextColor={colors.darkGrey}
+                    placeholder="Select Date"
+                    label="Birthday"
+                    value={birthday}
+                  >
+                    <Icon
+                      name="event"
+                      type="material"
+                      color={colors.darkGrey}
+                      style={styles.icon}
+                    />
+                  </UserStringInput>
+                </View>
+              </Pressable>
             </View>
-          </Pressable>
+            <UserSelectorInput
+              options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
+              label="Gender"
+              value={gender}
+              setValue={setGender}
+            />
+            <UserSelectorInput
+              options={['she/her', 'he/him', 'they/them', 'Other']}
+              label="Pronouns"
+              value={pronouns}
+              setValue={setPronouns}
+            />
+            <UserSelectorInput
+              options={[
+                'American Indian/Alaska Native',
+                'Asian',
+                'Black or African American',
+                'Native Hawaiian or other Pacific Islander',
+                'White',
+                'Prefer Not to Disclose',
+              ]}
+              label="Race/Ethnicity"
+              value={raceEthnicity}
+              setValue={setRaceEthnicity}
+            />
+          </View>
         </View>
 
-        <UserSelectorInput
-          options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
-          label="Gender"
-          value={gender}
-          setValue={setGender}
-        />
-        <UserSelectorInput
-          options={['she/her', 'he/him', 'they/them', 'Other']}
-          label="Pronouns"
-          value={pronouns}
-          setValue={setPronouns}
-        />
-        <UserSelectorInput
-          options={[
-            'American Indian/Alaska Native',
-            'Asian',
-            'Black or African American',
-            'Native Hawaiian or other Pacific Islander',
-            'White',
-            'Prefer Not to Disclose',
-          ]}
-          label="Race/Ethnicity"
-          value={raceEthnicity}
-          setValue={setRaceEthnicity}
-        />
-      </View>
-      <View>
-        <StyledButton
-          text={'Update Profile'}
-          onPress={updateProfileAndGoHome}
-          disabled={loading}
-        />
-        <StyledButton
-          text="Skip"
-          onPress={() => router.replace('/home')}
-          disabled={false}
-        />
-      </View>
-    </ScrollView>
+        <View>
+          <View style={styles.updateProfileButton}>
+            <StyledButton
+              text="Update profile"
+              onPress={updateProfileAndGoHome}
+              disabled={
+                loading ||
+                (birthday === '' &&
+                  gender === '' &&
+                  pronouns === '' &&
+                  raceEthnicity === '')
+              }
+            />
+          </View>
+          <Link
+            style={[globalStyles.bodyBoldUnderline, styles.skipButton]}
+            href="/(tabs)/home"
+          >
+            Skip For Now
+          </Link>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 

src/app/auth/onboarding/styles.tsx

@@ -4,35 +4,41 @@ import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   container: {
-    flex: 1,
     backgroundColor: 'white',
+    flex: 1,
+  },
+  flex: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
     paddingTop: 64,
-    paddingLeft: 44,
+    paddingBottom: 54,
+    paddingLeft: 43,
     paddingRight: 44,
   },
-  verticallySpaced: {
+  inputContainer: {
     flex: 1,
-    justifyContent: 'space-between',
-  },
-  datePickerButton: {
-    paddingBottom: 16,
+    gap: 16,
   },
   subtext: {
     color: colors.darkGrey,
     marginLeft: 8,
   },
-  h1: {
-    marginTop: 66,
-  },
   body1: {
     marginTop: 26,
   },
   info: {
     flexDirection: 'row',
     marginTop: 12,
-    marginBottom: 16,
     width: 250,
   },
+  updateProfileButton: {
+    marginBottom: 24,
+  },
+  skipButton: {
+    flex: 1,
+    alignSelf: 'center',
+    color: colors.darkGrey,
+  },
   icon: {
     paddingLeft: 8,
   },

src/app/auth/signup/index.tsx

@@ -257,12 +257,12 @@ function SignUpScreen() {
               onPress={signUpWithEmail}
             />
           </View>
-          <Text style={[globalStyles.body1, styles.redirectText]}>
-            Already have an account?{' '}
+          <View style={styles.redirectText}>
+            <Text style={globalStyles.body1}>Already have an account?</Text>
             <Link style={globalStyles.bodyBoldUnderline} href="/auth/login">
               Log In
             </Link>
-          </Text>
+          </View>
         </View>
       </ScrollView>
     </SafeAreaView>

src/app/auth/signup/styles.tsx

@@ -14,9 +14,11 @@ export default StyleSheet.create({
     textDecorationLine: 'underline',
   },
   redirectText: {
-    textAlign: 'center',
-    marginBottom: 64,
+    gap: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
     marginTop: 16,
+    marginBottom: 64,
   },
   title: {
     paddingTop: 64,