changes to grocery, todos

components/pages/main/SignUpPage.tsx

@@ -1,46 +1,85 @@
 import React, { useState } from "react";
-import {Checkbox, Button, View, Text, TextField} from "react-native-ui-lib";
+import {
+  Checkbox,
+  Button,
+  View,
+  Text,
+  TextField,
+  ButtonSize,
+} from "react-native-ui-lib";
 import { useSignUp } from "@/hooks/firebase/useSignUp";
 import { ProfileType } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = (props: { unsetRegister: () => any }) => {
-    const [email, setEmail] = useState<string>("");
-    const [password, setPassword] = useState<string>("");
-    const [isParent, setIsParent] = useState<boolean>(true);
-    const [isChild, setIsChild] = useState<boolean>(false);
-    const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
-    const [profileType, setProfileType] = useState<ProfileType>(
-        ProfileType.PARENT
-    );
-    const { mutateAsync: signUp } = useSignUp();
+  const [email, setEmail] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [isParent, setIsParent] = useState<boolean>(true);
+  const [isChild, setIsChild] = useState<boolean>(false);
+  const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
+  const [profileType, setProfileType] = useState<ProfileType>(
+    ProfileType.PARENT
+  );
+  const { mutateAsync: signUp } = useSignUp();
 
-    const handleSignUp = async () => {
-        await signUp({ email, password });
-    };
+  const handleSignUp = async () => {
+    await signUp({ email, password });
+  };
 
-    return (
-        <View padding-10>
-            <TextField
-                placeholder="Email"
-                value={email}
-                onChangeText={setEmail}
-                style={{ marginBottom: 10 }}
-                floatingPlaceholder
-            />
-            <TextField
-                placeholder="Password"
-                value={password}
-                onChangeText={setPassword}
-                secureTextEntry
-                style={{ marginBottom: 10 }}
-                floatingPlaceholder
-            />
-            <Button
-                label="Register"
-                onPress={handleSignUp}
-                style={{ marginBottom: 10 }}
-            />
-            <Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
+  return (
+    <View padding-10>
+      <Text text30 center>
+        Get started with Kali
+      </Text>
+      <Text>Please enter your details.</Text>
+      <TextField
+        marginT-60
+        placeholder="First name"
+        value={firstName}
+        onChangeText={setFirstName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Last name"
+        value={lastName}
+        onChangeText={setLastName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        style={styles.textfield}
+      />
+      <Button
+        label="Register"
+        onPress={handleSignUp}
+        style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+      />
+      <Button
+        label="Sign up with Google"
+        backgroundColor="white"
+        color="black"
+        iconSource={() => (
+          <AntDesign
+            name="google"
+            size={24}
+            color="black"
+            style={{ marginRight: 15 }}
+          />
+        )}
+      />
+      {/*<Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
             <Checkbox
                 label="Parent"
                 value={isParent}
@@ -78,19 +117,33 @@ const SignUpPage = (props: { unsetRegister: () => any }) => {
                         setIsChild(false);
                     }
                 }}
-            />
-            <Text center style={{ marginBottom: 5, marginTop: 10 }}>
-                Already have an account?
-            </Text>
-            <Button
-                label="Sign In"
-                margin-0
-                link
-                text200
-                onPress={props.unsetRegister}
-            />
-        </View>
-    );
+            />*/}
+      <View row centerH>
+        <Text text70 center style={{ marginBottom: 5, marginTop: 10 }}>
+          Already have an account?
+        </Text>
+        <Button
+          label="Sign In"
+          margin-0
+          link
+          color="#fd1775"
+          size={ButtonSize.small}
+          text200
+          onPress={props.unsetRegister}
+        />
+      </View>
+    </View>
+  );
 };
 
 export default SignUpPage;
+
+const styles = StyleSheet.create({
+  textfield: {
+    backgroundColor: "white",
+    marginVertical: 10,
+    padding: 30,
+    height: 45,
+    borderRadius: 50,
+  },
+});