TaskRatchet · narthur · Feb 5, 2024 · Feb 5, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,7 +36,11 @@ function App(): JSX.Element {
       <WithSplashScreen isAppReady={isAppReady}>
         <UserContext.Provider value={{currentUser, setCurrentUser}}>
           <NavigationContainer>
-            <Stack.Navigator initialRouteName="LoginScreen">
+            <Stack.Navigator
+              initialRouteName="LoginScreen"
+              screenOptions={{
+                headerShown: false,
+              }}>
               <Stack.Screen name="LoginScreen" component={LoginScreen} />
               <Stack.Screen name="HomeScreen" component={HomeScreen} />
               <Stack.Screen name="ProfileScreen" component={ProfileScreen} />

diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -8,6 +8,7 @@ import {
   Text,
   View,
 } from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 import helpIconBlack from '../../assets/icons/help_circle(black).png';
 import helpIconWhite from '../../assets/icons/help_circle(white).png';
@@ -83,123 +84,129 @@ export default function HomeScreen({navigation}: Props): JSX.Element {
   }
 
   return (
-    <View style={[backgroundStyle, styles.background]}>
-      <Image
-        style={styles.imageStyle}
-        blurRadius={10}
-        source={logo as ImageSourcePropType}
-      />
-      <InfoPopup
-        testID="infoPopup"
-        modalVisible={infoModalVisible}
-        setModalVisible={setInfoModalVisible}
-      />
-      <TaskPopup
-        testID="taskPopup"
-        id={clickedId}
-        modalVisible={taskModalVisible}
-        setModalVisible={setTaskModalVisible}
-      />
-      <NewTaskPopup
-        testID="NewTaskPopup"
-        modalVisible={newTaskModalVisible}
-        setModalVisible={setNewTaskModalVisible}
-      />
-      <ScrollView style={styles.scroll} alwaysBounceVertical={true}>
-        <View style={styles.profile_infoButtons}>
-          <Pressable
-            style={styles.profile_infoButtons}
-            onPress={handleUserProfilePress}>
-            <Image
-              style={styles.profileImage}
-              source={
-                isDarkMode
-                  ? (userLogoWhite as ImageSourcePropType)
-                  : (userLogoBlack as ImageSourcePropType)
-              }
-            />
-            <Text style={[textColorStyle, styles.userProfile]}>
-              User Profile
-            </Text>
-          </Pressable>
-          <View style={styles.infoHelpPair}>
-            <Pressable onPress={handleHelpButtonPress}>
-              <Image
-                style={styles.helpImageStyle}
-                source={
-                  isDarkMode
-                    ? (helpIconWhite as ImageSourcePropType)
-                    : (helpIconBlack as ImageSourcePropType)
-                }
-              />
-            </Pressable>
-            <Pressable onPress={handleInfoButtonPress}>
+    <SafeAreaView edges={['top']} style={[backgroundStyle, styles.background]}>
+      <View>
+        <Image
+          style={styles.imageStyle}
+          blurRadius={10}
+          source={logo as ImageSourcePropType}
+        />
+        <InfoPopup
+          testID="infoPopup"
+          modalVisible={infoModalVisible}
+          setModalVisible={setInfoModalVisible}
+        />
+        <TaskPopup
+          testID="taskPopup"
+          id={clickedId}
+          modalVisible={taskModalVisible}
+          setModalVisible={setTaskModalVisible}
+        />
+        <NewTaskPopup
+          testID="NewTaskPopup"
+          modalVisible={newTaskModalVisible}
+          setModalVisible={setNewTaskModalVisible}
+        />
+        <ScrollView style={styles.scroll} alwaysBounceVertical={true}>
+          <View style={styles.profile_infoButtons}>
+            <Pressable
+              style={styles.profile_infoButtons}
+              onPress={handleUserProfilePress}>
               <Image
-                style={styles.infoImageStyle}
+                style={styles.profileImage}
                 source={
                   isDarkMode
-                    ? (infoIconWhite as ImageSourcePropType)
-                    : (infoIconBlack as ImageSourcePropType)
+                    ? (userLogoWhite as ImageSourcePropType)
+                    : (userLogoBlack as ImageSourcePropType)
                 }
               />
+              <Text style={[textColorStyle, styles.userProfile]}>
+                User Profile
+              </Text>
             </Pressable>
+            <View style={styles.infoHelpPair}>
+              <Pressable onPress={handleHelpButtonPress}>
+                <Image
+                  style={styles.helpImageStyle}
+                  source={
+                    isDarkMode
+                      ? (helpIconWhite as ImageSourcePropType)
+                      : (helpIconBlack as ImageSourcePropType)
+                  }
+                />
+              </Pressable>
+              <Pressable onPress={handleInfoButtonPress}>
+                <Image
+                  style={styles.infoImageStyle}
+                  source={
+                    isDarkMode
+                      ? (infoIconWhite as ImageSourcePropType)
+                      : (infoIconBlack as ImageSourcePropType)
+                  }
+                />
+              </Pressable>
+            </View>
           </View>
-        </View>
-        <View style={styles.headerStylesBox}>
-          <Text style={[textColorStyle, styles.screenTitle]}>TASK RATCHET</Text>
-        </View>
-        <View style={styles.taskList}>
-          {tasks &&
-            tasks
-              .sort((a, b) => {
-                const taskA = a;
-                const taskB = b;
-
-                if ('due' in taskA && 'due' in taskB) {
-                  const diffDaysA = checkDate(String(taskA.due));
-                  const diffDaysB = checkDate(String(taskB.due));
-
-                  // If the deadline is past, return a large number to sort the task to the bottom
-                  const timeLeftA =
-                    diffDaysA < 0 ? Number.MAX_SAFE_INTEGER : diffDaysA;
-                  const timeLeftB =
-                    diffDaysB < 0 ? Number.MAX_SAFE_INTEGER : diffDaysB;
-
-                  return timeLeftA - timeLeftB;
-                } else {
-                  return 0;
-                }
-              })
-              .map(task => {
-                return (
-                  <Pressable key={task.id} onPress={() => taskItemPress(task)}>
-                    <Task item={task} />
-                  </Pressable>
-                );
-              })}
-          <View style={styles.spacer /* spacer */} />
-        </View>
-      </ScrollView>
-      <Pressable
-        style={({pressed}) => [
-          styles.plusImageBox,
-          {
-            backgroundColor: pressed
-              ? plusButtonColorPressed.backgroundColor
-              : plusButtonColor.backgroundColor,
-          },
-          styles.button,
-        ]}
-        onPress={handleNewTaskPress}>
-        <Image
-          style={styles.plusImage}
-          source={
-            isDarkMode
-              ? (plusCircleWhite as ImageSourcePropType)
-              : (plusCircleBlack as ImageSourcePropType)
-          }
-        />
-      </Pressable>
-    </View>
+          <View style={styles.headerStylesBox}>
+            <Text style={[textColorStyle, styles.screenTitle]}>
+              TASK RATCHET
+            </Text>
+          </View>
+          <View style={styles.taskList}>
+            {tasks &&
+              tasks
+                .sort((a, b) => {
+                  const taskA = a;
+                  const taskB = b;
+
+                  if ('due' in taskA && 'due' in taskB) {
+                    const diffDaysA = checkDate(String(taskA.due));
+                    const diffDaysB = checkDate(String(taskB.due));
+
+                    // If the deadline is past, return a large number to sort the task to the bottom
+                    const timeLeftA =
+                      diffDaysA < 0 ? Number.MAX_SAFE_INTEGER : diffDaysA;
+                    const timeLeftB =
+                      diffDaysB < 0 ? Number.MAX_SAFE_INTEGER : diffDaysB;
+
+                    return timeLeftA - timeLeftB;
+                  } else {
+                    return 0;
+                  }
+                })
+                .map(task => {
+                  return (
+                    <Pressable
+                      key={task.id}
+                      onPress={() => taskItemPress(task)}>
+                      <Task item={task} />
+                    </Pressable>
+                  );
+                })}
+            <View style={styles.spacer /* spacer */} />
+          </View>
+        </ScrollView>
+        <Pressable
+          style={({pressed}) => [
+            styles.plusImageBox,
+            {
+              backgroundColor: pressed
+                ? plusButtonColorPressed.backgroundColor
+                : plusButtonColor.backgroundColor,
+            },
+            styles.button,
+          ]}
+          onPress={handleNewTaskPress}>
+          <Image
+            style={styles.plusImage}
+            source={
+              isDarkMode
+                ? (plusCircleWhite as ImageSourcePropType)
+                : (plusCircleBlack as ImageSourcePropType)
+            }
+          />
+        </Pressable>
+      </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx
@@ -1,6 +1,7 @@
 import {useQuery} from '@tanstack/react-query';
 import React from 'react';
 import {Button, Image, ImageSourcePropType, Text, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 import logo from '../../assets/images/[email protected]';
 import {Props} from '../components/types';
@@ -30,13 +31,14 @@ export default function ProfileScreen({navigation}: Props) {
   }
 
   return (
-    <View style={[backgroundStyle, styles.container]}>
+    <SafeAreaView style={[backgroundStyle, styles.container]}>
       <Image
         style={styles.backgroundImage}
         blurRadius={10}
         source={logo as ImageSourcePropType}
       />
-      <View style={styles.nameAndAvatar}>
+
+      <View style={styles.profileTitle}>
         <Text style={[textColorStyle, styles.name]}>Profile</Text>
       </View>
       <View style={styles.dataGroup}>
@@ -76,8 +78,14 @@ export default function ProfileScreen({navigation}: Props) {
         ) : (
           <Text>Loading...</Text>
         )}
-        <Button title="Logout" onPress={goToLoginScreen} />
+        <View style={styles.buttons}>
+          <Button
+            title="Go to Home"
+            onPress={() => navigation.navigate('HomeScreen')}
+          />
+          <Button title="Logout" onPress={goToLoginScreen} />
+        </View>
       </View>
-    </View>
+    </SafeAreaView>
   );
 }
diff --git a/src/styles/homeScreenStyle.tsx b/src/styles/homeScreenStyle.tsx
@@ -67,7 +67,7 @@ export const styles = StyleSheet.create({
   },
   userProfile: {
     marginLeft: 10,
-    marginTop: 10,
+    marginTop: 0,
     fontSize: 18,
     height: 33,
   },
@@ -76,22 +76,23 @@ export const styles = StyleSheet.create({
     flex: 1,
     flexContent: 'space_between',
     flexDirection: 'row',
+    alignContent: 'center',
   },
   profileImage: {
     marginLeft: 10,
-    marginTop: 12,
+    marginTop: 0,
     width: 18,
     height: 18,
   },
   infoImageStyle: {
     marginRight: 10,
-    marginTop: 12,
+    marginTop: 0,
     width: 22,
     height: 22,
   },
   helpImageStyle: {
     marginRight: 5,
-    marginTop: 12,
+    marginTop: 0,
     width: 22,
     height: 22,
   },

diff --git a/src/styles/loginScreenStyle.tsx b/src/styles/loginScreenStyle.tsx
@@ -96,8 +96,8 @@ export const styles = StyleSheet.create({
     height: 22,
   },
   helpButtonBox: {
-    marginLeft: '91%',
-    marginTop: 10,
+    marginLeft: '90%',
+    marginTop: 0,
     padding: 5,
   },
 });
diff --git a/src/styles/profileScreenStyle.tsx b/src/styles/profileScreenStyle.tsx
@@ -24,7 +24,7 @@ export const styles = StyleSheet.create({
     padding: 8,
     margin: 8,
   },
-  nameAndAvatar: {
+  profileTitle: {
     flexDirection: 'row',
     alignItems: 'center',
   },
@@ -56,4 +56,7 @@ export const styles = StyleSheet.create({
     top: '-30%',
     left: '-40%',
   },
+  buttons: {
+    marginTop: 20,
+  },
 });