Styling fixes

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

@@ -8,8 +8,8 @@ import { router } from 'expo-router';
 
 import { ZodError, z } from 'zod';
 
-import {Wordmark} from '@/components/Wordmark';
-import {Button} from '@/components/button';
+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';
@@ -51,18 +51,19 @@ const Login = () => {
             }
         }
     };
+
     return (
-        <SafeAreaView edges={['top']} style={styles.container}>
-            <View style={styles.innerContainer}>
-                <View style={styles.topContainer} className="w-full p-5">
-                    <Wordmark textColor="white" />
-                    <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>
+        <SafeAreaView className='bg-neutral-500 h-[100%]' edges={['top']}>
+            <View className='flex-1'>
+                <View className="px-[8%] pb-[5%]">
+                        <Wordmark textColor="white" />
+                        <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 style={styles.lowerContainer}>
+                <View  className='bg-white pt-[10%] flex-1 rounded-tl-3xl rounded-tr-3xl px-[8%]'>
                     <View>
                         <Text>Email</Text>
                         <Controller
@@ -126,6 +127,7 @@ const Login = () => {
                         <Text className="font-bold">Not a student?</Text>
                         <Text> Continue as a guest.</Text>
                     </View>
+                    <Input title="First Name" placeholder="John" />
                 </View>
             </View>
         </SafeAreaView>
@@ -140,18 +142,16 @@ const styles = StyleSheet.create({
         paddingTop: '2%',
         paddingBottom: '2.5%'
     },
+    alignContainer: {
+        paddingLeft: '5%',
+        paddingRight: '5%'
+    },
     description: {
         fontSize: 20,
         color: 'white',
         paddingTop: '2%'
     },
-    container: {
-        backgroundColor: 'grey',
-        height: '100%'
-    },
-    innerContainer: {
-        flex: 1
-    },
+
     buttonContainer: {
         flexDirection: 'row',
         justifyContent: 'space-around'

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

@@ -6,8 +6,8 @@ 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 Wordmark from '@/components/Wordmark';
+import Button from '@/components/button';
 import {Header} from '@/components/header';
 import {DropdownComponent} from '@/components/dropdown';
 

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

@@ -3,9 +3,8 @@ 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 Wordmark from '@/components/Wordmark';
+import Button from '@/components/button';
 
 const Welcome = () => {
     const redirect = () => {
@@ -38,24 +37,23 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: 'column',
         marginBottom: '10%',
-        marginLeft: 30,
-        marginRight: 30
+        marginLeft: "8%",
+        marginRight: "8%"
     },
     header: {
-        color: 'black',
         height: '20%',
         fontSize: 50,
-        marginTop: '5%',
+        marginTop: '10%',
         fontWeight: 'bold'
     },
     imageHolder: {
         backgroundColor: 'gray',
         height: '45%',
         width: '100%',
-        borderRadius: 20
+        borderRadius: 20,
+        marginTop: '5%'
     },
     description: {
-        color: 'black',
         height: '15%',
         fontSize: 23
     },

frontend/sac-mobile/components/Wordmark.tsx

@@ -5,11 +5,11 @@ type WordmarkProps = {
     backgroundColor?: string;
 }
 
-export const Wordmark = (props: WordmarkProps) => {
+export default const Wordmark = (props: WordmarkProps) => {
     const styles = StyleSheet.create({
         wordmark: {
             fontSize: 24,
-            paddingTop: '7.5%',
+            paddingTop: '2.5%',
             paddingBottom: '7.5%',
             fontWeight: 'bold',
             color: props.textColor

frontend/sac-mobile/components/button.tsx

@@ -8,7 +8,7 @@ type ButtonProps = {
     borderColor?: string;
 };
 
-export const Button = (props: ButtonProps) => {
+export default const Button = (props: ButtonProps) => {
     const styles = StyleSheet.create({
         button: {
             backgroundColor: props.backgroundColor || 'gray',

frontend/sac-mobile/components/input.tsx

@@ -8,17 +8,24 @@ type InputProps = {
 export const Input = (props: InputProps) => {
     const styles = StyleSheet.create({
         input: {
-            borderRadius: 20, 
-            borderWidth: 1, 
+            borderRadius: 10,
+            borderWidth: 1,
             paddingTop: '5%',
             paddingBottom: '5%',
+            width: '100%'
         }
-    })
+    });
     return (
-        <View>
+        <View >
             <Text>{props.title}</Text>
-            <TextInput style={styles.input} placeholder={props.placeholder}></TextInput>
+            <View className="items-center">
+                <TextInput
+                    style={styles.input}
+                    placeholder={props.placeholder}
+                ></TextInput>
+            </View>
         </View>
     );
 };
 
+export default Input;