Make text input component

frontend/sac-mobile/app/(auth)/login.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Alert, Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Alert, StyleSheet, Text, TextInput, View } from 'react-native';
+import { ButtonProps } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { router } from 'expo-router';
 
 import { ZodError, z } from 'zod';
 
 import Wordmark from '@/components/Wordmark';
+import Button from '@/components/button';
+import Input from '@/components/input';
 import { useAuthStore } from '@/hooks/use-auth';
 import { loginByEmail } from '@/services/auth';
 
@@ -54,63 +57,77 @@ const Login = () => {
             <View style={styles.innerContainer}>
                 <View className="w-full p-5">
                     <Wordmark textColor="white" />
-                    <Text style={styles.header}>Let's Go</Text>
+                    <Text style={styles.header}>Let's go</Text>
                     <Text style={styles.description}>
                         Discover, follow, and join all the clubs & events
                         Northeastern has to offer
                     </Text>
                 </View>
-                <View>
-                    <Text>Email</Text>
-                    <Controller
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                            <TextInput
-                                autoCapitalize="none"
-                                autoCorrect={false}
-                                className="p-2 border border-gray-300"
-                                placeholder="[email protected]"
-                                onChangeText={onChange}
-                                value={value}
-                                onSubmitEditing={handleSubmit(onSubmit)}
-                            />
+                <View style={styles.lowerContainer}>
+                    <View>
+                        <Text>Email</Text>
+                        <Controller
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
+                                <TextInput
+                                    autoCapitalize="none"
+                                    autoCorrect={false}
+                                    placeholder="[email protected]"
+                                    onChangeText={onChange}
+                                    value={value}
+                                    onSubmitEditing={handleSubmit(onSubmit)}
+                                />
+                            )}
+                            name="email"
+                            rules={{ required: 'Email is required' }}
+                        />
+                        {errors.email && <Text>{errors.email.message}</Text>}
+                    </View>
+                    <View className="w-full mb-4">
+                        <Controller
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
+                                <View>
+                                    <Text>Password</Text>
+                                    <TextInput
+                                        autoCapitalize="none"
+                                        autoCorrect={false}
+                                        placeholder="Password"
+                                        onChangeText={onChange}
+                                        value={value}
+                                        secureTextEntry={true}
+                                        onSubmitEditing={handleSubmit(onSubmit)}
+                                    />
+                                </View>
+                            )}
+                            name="password"
+                            rules={{ required: 'Password is required' }}
+                        />
+                        {errors.password && (
+                            <Text>{errors.password.message}</Text>
                         )}
-                        name="email"
-                        rules={{ required: 'Email is required' }}
-                    />
-                    {errors.email && <Text>{errors.email.message}</Text>}
-                </View>
-
-                <View className="w-full mb-4">
-                    <Text>Password</Text>
-                    <Controller
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                            <TextInput
-                                autoCapitalize="none"
-                                autoCorrect={false}
-                                className="p-2 border border-gray-300"
-                                placeholder="Password"
-                                onChangeText={onChange}
-                                value={value}
-                                secureTextEntry={true}
-                                onSubmitEditing={handleSubmit(onSubmit)}
-                            />
-                        )}
-                        name="password"
-                        rules={{ required: 'Password is required' }}
-                    />
-                    {errors.password && <Text>{errors.password.message}</Text>}
-                </View>
+                    </View>
 
-                <View style={styles.buttonContainer}>
-                    <Button title="Login" onPress={handleSubmit(onSubmit)} />
-                    <Button
-                        title="Register"
-                        onPress={() => router.push('/(auth)/register')}
-                    />
+                    <View style={styles.buttonContainer}>
+                        <Button
+                            backgroundColor="white"
+                            title="Sign up"
+                            borderColor="gray"
+                            onPress={() => router.push('/(auth)/register')}
+                        />
+                        <Button
+                            title="Login"
+                            color="white"
+                            borderColor="gray"
+                            backgroundColor="gray"
+                            onPress={handleSubmit(onSubmit)}
+                        />
+                    </View>
+                    <View style={styles.descriptionContainer}>
+                        <Text className="font-bold">Not a student?</Text>
+                        <Text> Continue as a guest.</Text>
+                    </View>
                 </View>
-                <Text>Not a student? Continue as a Guest</Text>
             </View>
         </SafeAreaView>
     );
@@ -120,23 +137,37 @@ const styles = StyleSheet.create({
     header: {
         fontSize: 40,
         fontWeight: 'bold',
-        color: 'white'
+        color: 'white',
+        paddingTop: '5%',
+        paddingBottom: '2.5%'
     },
     description: {
-        fontSize: 20,
-        color: 'white'
+        fontSize: 15,
+        color: 'white',
+        paddingTop: '5%'
     },
     container: {
         backgroundColor: 'grey',
         height: '100%'
     },
     innerContainer: {
-        marginLeft: '5%',
-        marginRight: '5%'
+        flex: 1
     },
     buttonContainer: {
         flexDirection: 'row',
-        justifyContent: 'space-around',
+        justifyContent: 'space-around'
+    },
+    lowerContainer: {
+        backgroundColor: 'white',
+        borderTopLeftRadius: 15,
+        borderTopRightRadius: 15,
+        paddingTop: '10%',
+        flex: 1
+    },
+    descriptionContainer: {
+        marginTop: '5%',
+        flexDirection: 'row',
+        justifyContent: 'center'
     }
 });
 

frontend/sac-mobile/app/(auth)/welcome.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native';
 
+import { router } from 'expo-router';
+
 import Wordmark from '@/components/Wordmark';
 import Button from '@/components/button';
 import { useAuthStore } from '@/hooks/use-auth';
-import { router } from 'expo-router';
 
 const Welcome = () => {
-
-  const redirect = () => {
-    router.push('/(auth)/login');
-  }
+    const redirect = () => {
+        router.push('/(auth)/login');
+    };
 
     return (
         <SafeAreaView style={styles.container}>
@@ -22,7 +22,11 @@ const Welcome = () => {
                 has to offer
             </Text>
             <View style={styles.buttonAlign}>
-                <Button title="Get Started" color="white" buttonfunc={redirect}/>
+                <Button
+                    title="Get Started"
+                    color="white"
+                    onPress={redirect}
+                />
             </View>
         </SafeAreaView>
     );
@@ -56,10 +60,10 @@ const styles = StyleSheet.create({
         fontSize: 23
     },
     button: {
-        height: '10%'
+        height: '5%'
     },
     buttonAlign: {
-      flexDirection: 'row',
-      justifyContent: 'flex-end'
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
     }
 });

frontend/sac-mobile/components/button.tsx

@@ -4,29 +4,38 @@ type ButtonProps = {
     title: string;
     backgroundColor?: string;
     color?: string;
-    buttonfunc?: () => void;
+    onPress?: () => void;
+    borderColor?: string;
 };
 
 const Button = (props: ButtonProps) => {
     const styles = StyleSheet.create({
         button: {
             backgroundColor: props.backgroundColor || 'gray',
             fontSize: 24,
-            paddingTop: '5%',
-            paddingBottom: '5%',
             fontWeight: 'bold',
             borderRadius: 15,
-            width: '45%'
+            width: '47.5%',
+            borderColor: 'black'
         },
         title: {
             color: props.color || 'black',
             textAlign: 'center'
+        },
+        border: {
+            borderWidth: 1,
+            borderRadius: 15,
+            borderColor: props.borderColor || 'gray',
+            paddingTop: '6%',
+            paddingBottom: '6%'
         }
     });
 
     return (
-        <Pressable onPress={props.buttonfunc} style={styles.button}>
-            <Text style={styles.title}>{props.title}</Text>
+        <Pressable onPress={props.onPress} style={styles.button}>
+            <View style={styles.border}>
+                <Text style={styles.title}>{props.title}</Text>
+            </View>
         </Pressable>
     );
 };

frontend/sac-mobile/components/input.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+
+type InputProps = {
+    title: string;
+    placeholder: string;
+};
+
+const Input = (props: InputProps) => {
+    const styles = StyleSheet.create({
+        input: {
+            borderRadius: 20, 
+            borderWidth: 1, 
+            paddingTop: '5%',
+            paddingBottom: '5%',
+        }
+    })
+    return (
+        <View>
+            <Text>{props.title}</Text>
+            <TextInput style={styles.input} placeholder={props.placeholder}></TextInput>
+        </View>
+    );
+};
+
+export default Input; 
+
+