changed screen titles, styled recover password button/input, removed …

…redundant title on HomeScreen
SCCapstone · Apr 24, 2023 · c928167 · c928167
1 parent 99127f2
commit c928167
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/Screens/Home.js b/Screens/Home.js
@@ -78,7 +78,6 @@ export default function Home({ navigation }) {
 
   return (
     <View style={styles.container}>
-        <Text style={styles.Home}>Home</Text>
         <Text style={styles.welcomingText}>Welcome {name}!</Text>
         <CalorieTracker calorieGoal={calorieGoal} caloriesRemaining={calorieGoal - caloriesConsumed} goal={goal} />
         <View style={styles.space} />

diff --git a/Screens/Login.js b/Screens/Login.js
@@ -81,8 +81,10 @@ export default function Login({ navigation }) {
           Login
         </Button>
         <Button
-        style={styles.login}
-        onPress={() => navigation.navigate("RecoverPassword")}>
+          mode="contained"
+          labelStyle={styles.forgotPassLabel}
+          style={styles.login}
+          onPress={() => navigation.navigate("RecoverPassword")}>
           Forgot Password?
         </Button>
       </View></>
@@ -117,4 +119,8 @@ const styles = StyleSheet.create({
     fontSize: 20,
     color: "white",
   },
+  forgotPassLabel: {
+    fontSize: 12,
+    color: "white",
+  },
 });
diff --git a/Screens/RecoverPassword.js b/Screens/RecoverPassword.js
@@ -1,5 +1,6 @@
 import React from "react";
-import {View, StyleSheet, TextInput, Text, Button, Alert } from "react-native";
+import {View, StyleSheet, TextInput, Text, Alert } from "react-native";
+import { Button } from "react-native-paper"
 import { COLORS } from "../constants/colors";
 import { globalStyles } from "../styles/global";
 import { sendPasswordResetEmail } from "firebase/auth";
@@ -40,7 +41,15 @@ export default function RecoverPassword({ navigation }) {
                 onChangeText={emailChangeHandler}
                 value={providedEmail}
             />
-            <Button title={"Change Password"}onPress={pressHandler} />
+            <View style={styles.container}>
+                <Button
+                    labelStyle={styles.label}
+                    mode="contained"
+                    style={styles.login}
+                    onPress={pressHandler}>
+                    Reset Password
+                </Button>
+            </View>
         </View>
     )
 
@@ -55,17 +64,29 @@ const styles = StyleSheet.create({
     inputField: {
         padding: 5,
         paddingLeft: 35,
-        backgroundColor: 'white',
-        margin: 20,
+        backgroundColor: COLORS.wood,
         borderRadius: 4
     },
     text: {
         color: "#464838",
         fontSize: 22,
-        marginHorizontal: 50,
         marginTop: 20,
         marginBottom: 20,
         textAlign: "center",
-        paddingLeft: 12
+        paddingLeft: 12,
+        width: 300
+      },
+      button: {
+        width: 200,
+        borderRadius: 100,
+        backgroundColor: "black",
+      },
+      login: {
+        width: 200,
+        marginTop: 10,
+        borderRadius: 100,
+        paddingVertical: 3,
+        backgroundColor: "black",
+        marginBottom: 20,
       },
 })
diff --git a/components/DiaryStackScreen.js b/components/DiaryStackScreen.js
@@ -10,9 +10,9 @@ function DiaryStackScreen() {
   return (
     <DiaryStack.Navigator  independent={true}>
       <DiaryStack.Screen name="Diary" component={DiaryScreen} options={options}/>
-      <DiaryStack.Screen name="FoodSearch" component={FoodSearchScreen} />
-      <DiaryStack.Screen name="FoodDetails" component={FoodDetails} />
-      <DiaryStack.Screen name="EntryDetails" component={EntryDetails} />
+      <DiaryStack.Screen name="FoodSearch" component={FoodSearchScreen} options={{title: "Food Search"}}/>
+      <DiaryStack.Screen name="FoodDetails" component={FoodDetails} options={{title: "Food Details"}}/>
+      <DiaryStack.Screen name="EntryDetails" component={EntryDetails} options={{title: "Entry Details"}}/>
     </DiaryStack.Navigator>
   );
 }

diff --git a/components/HomeStackScreen.js b/components/HomeStackScreen.js
@@ -22,7 +22,7 @@ function HomeTabScreen() {
         return <Ionicons name={iconName} size={size} color={color} />;
       }
     })} >
-      <HomeTab.Screen name="Home Screen" component={Home} />
+      <HomeTab.Screen name="Home Screen" component={Home} options={{title: "Home"}} />
       <HomeTab.Screen name="Diary Screen" component={DiaryStackScreen} />
       <HomeTab.Screen name="Settings" component={SettingStackScreen} />
     </HomeTab.Navigator>