working on datePicker

calblueprint · Mar 14, 2024 · f304df5 · f304df5
1 parent aa122a7
commit f304df5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx
@@ -62,7 +62,11 @@ function SettingsScreen() {
         setUsername(data.username || username);
 
         if (data.birthday) {
-          setBirthday(data.birthday);
+          setBirthday(
+            new Date(data.birthday).toLocaleDateString('en-US', {
+              timeZone: 'UTC',
+            }),
+          );
           setBirthdayExists(true);
         }
 
@@ -156,14 +160,13 @@ function SettingsScreen() {
   }
 
   return (
-    <SafeAreaView
-      style={globalStyles.container}
-      edges={['right', 'left', 'top']}
-    >
-      <ScrollView bounces={false} contentContainerStyle={styles.main}>
+    <SafeAreaView style={styles.container} edges={['right', 'left', 'top']}>
+      <ScrollView bounces={true} contentContainerStyle={styles.main}>
         <View>
           <Link href="/home" style={styles.back}>
-            <Text>{'<Back'}</Text>
+            <Text style={[globalStyles.subtext, styles.backText]}>
+              {'<Back'}
+            </Text>
           </Link>
           <View style={styles.datePicker}>
             <DatePicker
@@ -187,6 +190,7 @@ function SettingsScreen() {
             <AccountDataDisplay
               label="Birthday"
               value={
+                // change back to !birthdayExists later
                 birthdayExists ? (
                   <View style={styles.dateButton}>
                     <Pressable

diff --git a/src/app/settings/styles.tsx b/src/app/settings/styles.tsx
@@ -2,20 +2,25 @@ import { StyleSheet } from 'react-native';
 import colors from '../../styles/colors';
 
 export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    paddingHorizontal: 24,
+  },
   button: {
     marginBottom: 32,
   },
   main: {
     flex: 1,
-    width: '100%',
     paddingLeft: 12,
+    width: '100%',
     justifyContent: 'space-between',
   },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
+  // verticallySpaced: {
+  //   paddingTop: 4,
+  //   paddingBottom: 4,
+  //   alignSelf: 'stretch',
+  // },
   subheading: {
     paddingBottom: 16,
   },
@@ -29,6 +34,9 @@ export default StyleSheet.create({
     fontSize: 12,
     fontWeight: '400',
   },
+  backText: {
+    color: colors.darkGrey,
+  },
   staticData: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -59,7 +67,6 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
   },
   datePicker: {
-    display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 100,