#22/fix - fixed sign up form

app/(auth)/sign-up.jsx

@@ -1,13 +1,11 @@
-import { SafeAreaView } from "react-native-safe-area-context";
-import { View, Text, StyleSheet, Dimensions, TextInput, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
-import React, { useState } from "react";
-import { Link } from "expo-router"; 
+import { Link, useRouter } from "expo-router";
 import { createUserWithEmailAndPassword } from "firebase/auth";
-import { auth } from "../../firebaseConfig"; 
-import { useRouter } from "expo-router"; 
-import Icon from "react-native-vector-icons/Ionicons"; 
-import { db } from "../../firebaseConfig"; 
 import { doc, setDoc } from "firebase/firestore"; // Update import from addDoc to setDoc
+import React, { useState } from "react";
+import { Dimensions, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Icon from "react-native-vector-icons/Ionicons";
+import { auth, db } from "../../firebaseConfig";
 
 const { height } = Dimensions.get("window");
 
@@ -16,8 +14,8 @@ const SignUp = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [passwordVisible, setPasswordVisible] = useState(false); 
-  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false); 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
   const router = useRouter();
 
   const handleSignUp = async () => {
@@ -31,15 +29,15 @@ const SignUp = () => {
       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
       const user = userCredential.user;
       console.log("User registered: ", user);
-  
+
       // Store additional user information in Firestore with UID as document ID
       await setDoc(doc(db, "Users", user.uid), {
         email: user.email,
         name: name,
       });
-  
+
       alert("Registration successful!");
-      router.push("../(auth)/Login"); 
+      router.push("../(auth)/Login");
     } catch (error) {
       console.error(error);
       alert("Registration failed: " + error.message);
@@ -48,7 +46,7 @@ const SignUp = () => {
 
   return (
     <KeyboardAvoidingView
-      behavior={Platform.OS === "ios" ? "padding" : "height"} 
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
     >
       <SafeAreaView className="bg-updatedBg h-full">
@@ -86,7 +84,7 @@ const SignUp = () => {
                   placeholder="Create a Password"
                   value={password}
                   onChangeText={setPassword}
-                  secureTextEntry={!passwordVisible} 
+                  secureTextEntry={!passwordVisible}
                   placeholderTextColor="#999999"
                 />
                 <TouchableOpacity onPress={() => setPasswordVisible(!passwordVisible)}>
@@ -100,7 +98,7 @@ const SignUp = () => {
                   placeholder="Re-enter your Password"
                   value={confirmPassword}
                   onChangeText={setConfirmPassword}
-                  secureTextEntry={!confirmPasswordVisible} 
+                  secureTextEntry={!confirmPasswordVisible}
                   placeholderTextColor="#999999"
                 />
                 <TouchableOpacity onPress={() => setConfirmPasswordVisible(!confirmPasswordVisible)}>
@@ -109,8 +107,8 @@ const SignUp = () => {
               </View>
 
               <View style={styles.btmContainer}>
-                <Link href="/(auth)/Login" style={styles.customButton}>
-                  <Text style={styles.linkText}>Back</Text>
+                <Link href="/(auth)/Login" style={styles.backButton}>
+                  <Text style={styles.backText}>Back</Text>
                 </Link>
                 <TouchableOpacity style={styles.customButton} onPress={handleSignUp}>
                   <Text style={styles.linkText}>Continue</Text>
@@ -130,48 +128,70 @@ const styles = StyleSheet.create({
   },
   contentWrapper: {
     width: "90%",
-    marginTop: height * 0.25, 
+    marginTop: height * 0.25,
   },
   input: {
     height: 60,
     margin: 12,
     borderWidth: 2,
     paddingLeft: 20,
-    borderRadius: 20,
+    borderRadius: 10,
+    borderColor: "#347928",
   },
   passwordContainer: {
     flexDirection: "row",
     alignItems: "center",
     borderWidth: 2,
-    borderRadius: 20,
+    borderRadius: 10,
     margin: 12,
     paddingLeft: 20,
     paddingRight: 10,
+    borderColor: "#347928",
   },
   passwordInput: {
     flex: 1,
     height: 60,
   },
   customButton: {
-    width: "40%", 
-    alignItems: "center", 
-    justifyContent: "center", 
-    paddingVertical: 10, 
-    backgroundColor: "#347928", 
-    borderRadius: 10, 
-    margin: 5, 
-    overflow: "hidden", 
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    backgroundColor: "#347928",
+    borderRadius: 10,
+    margin: 5,
+    overflow: "hidden",
+  },
+  backButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 30,
+    backgroundColor: "#888",
+    borderRadius: 10,
+    margin: 5,
+    overflow: "hidden",
   },
   btmContainer: {
-    paddingTop: 30,
+    display: "flex",
+    alignItems: "center",
+    textAlign: "center",
+    paddingHorizontal: 10,
+    marginTop: 20,
     flexDirection: "row",
-    justifyContent: "space-evenly",
+    justifyContent: "space-between",
   },
   linkText: {
     color: "white",
-    fontSize: 18, 
-    textAlign: "center", 
-    width: "100%", 
+    fontSize: 18,
+    textAlign: "center",
+    width: "100%",
+  },
+  backText: {
+    color: "#eee",
+    fontSize: 18,
+    textAlign: "center",
+    width: "100%",
   },
 });