fix button

cli/go.sum

@@ -74,8 +74,8 @@ go.uber.org/atomic v1.9.0 h1:ECmE8Bn/WFTYwEW/bpKD3M8VtR/zQVbavAoalC1PYyE=
 go.uber.org/atomic v1.9.0/go.mod h1:fEN4uk6kAWBTFdckzkM89CLk9XfWZrxpCo0nPH17wJc=
 go.uber.org/multierr v1.9.0 h1:7fIwc/ZtS0q++VgcfqFDxSBZVv/Xo49/SYnDFupUwlI=
 go.uber.org/multierr v1.9.0/go.mod h1:X2jQV1h+kxSjClGpnseKVIxpmcjrj7MNnI0bnlfKTVQ=
-golang.org/x/crypto v0.19.0 h1:ENy+Az/9Y1vSrlrvBSyna3PITt4tiZLf7sgCjZBX7Wo=
-golang.org/x/crypto v0.19.0/go.mod h1:Iy9bg/ha4yyC70EfRS8jz+B6ybOBKMaSxLj6P6oBDfU=
+golang.org/x/crypto v0.20.0 h1:jmAMJJZXr5KiCw05dfYK9QnqaqKLYXijU23lsEdcQqg=
+golang.org/x/crypto v0.20.0/go.mod h1:Xwo95rrVNIoSMx9wa1JroENMToLWn3RNVrTBpLHgZPQ=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9 h1:GoHiUyI/Tp2nVkLI2mCxVkOjsbSXD66ic0XW0js0R9g=
 golang.org/x/exp v0.0.0-20230905200255-921286631fa9/go.mod h1:S2oDrQGGwySpoQPVqRShND87VCbxmc6bL1Yd2oYrm6k=
 golang.org/x/sys v0.0.0-20191001151750-bb3f8db39f24/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=

frontend/sac-mobile/app/(app)/index.tsx

@@ -2,12 +2,13 @@ import React from 'react';
 import { Text, View} from 'react-native';
 
 import { useAuthStore } from '@/hooks/use-auth';
+import { Button } from '@/components/button';
 
 const Home = () => {
     const { logout } = useAuthStore();
     return (
         <View className="items-center justify-center flex-1">
-            <Text onPress={logout}>Logout</Text>
+            <Button onPress={logout}>Logout</Button>
             <Text>Home</Text>
         </View>
     );

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

@@ -5,7 +5,7 @@ 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 { Button } from '@/components/button';
 import Header from '@/components/header';
 import Input from '@/components/input';
 import Error from '@/components/error';
@@ -114,20 +114,17 @@ const Login = () => {
 
                     <View className="flex-row justify-between">
                         <Button
-                            backgroundColor="white"
-                            title="Sign up"
-                            borderColor="gray"
-                            fullWidth={false}
+                            children="Sign up"
+                            size="lg"
+                            variant="outline"
                             onPress={() => router.push('/(auth)/register')}
-                        />
+                        ></Button>
                         <Button
-                            title="Login"
-                            color="white"
-                            borderColor="gray"
-                            backgroundColor="gray"
-                            fullWidth={false}
+                            children="Log in"
+                            size="lg"
+                            variant="default"
                             onPress={handleSubmit(onSubmit)}
-                        />
+                        ></Button>
                     </View>
                     <View className="mt-[9%] flex-row justify-center">
                         <Text className="font-bold">Not a student?</Text>

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

@@ -5,7 +5,7 @@ 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 { Button } from '@/components/button';
 import { DropdownComponent } from '@/components/dropdown';
 import Header from '@/components/header';
 import Input from '@/components/input';
@@ -308,14 +308,12 @@ const Register = () => {
                     {errors.passwordConfirm
                     && <Error message={errors.passwordConfirm.message}/>}
                 </View>
-                <View className="pt-[2%] pb-[25%]">
+                <View className="pt-[2%] pb-[15%]">
                     <Button
-                        title="Submit"
-                        fullWidth={true}
-                        color="white"
-                        padding="5%"
-                        onPress={handleSubmit(onSubmit)}
-                    />
+                    onPress={handleSubmit(onSubmit)}
+                    children="Submit"
+                    size="screenwide"
+                    ></Button>
                 </View>
             </View>
             </ScrollView>

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

@@ -4,7 +4,7 @@ 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 { Button } from '@/components/button';
 
 const Welcome = () => {
     const redirect = () => {
@@ -22,9 +22,10 @@ const Welcome = () => {
             </Text>
             <View style={styles.buttonAlign}>
                 <Button
-                    title="Get Started"
-                    color="white"
-                    onPress={redirect}
+                    children="Get Started"
+                    size="lg"
+                    variant="default"
+                    onPress={() => router.push('/(auth)/login')}
                 />
             </View>
         </SafeAreaView>

frontend/sac-mobile/components/Wordmark.tsx

@@ -1,5 +1,7 @@
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
+import { Button } from '@/components/button';
+
 type WordmarkProps = {
     textColor?: string;
     backgroundColor?: string;
@@ -27,15 +29,14 @@ const Wordmark = (props: WordmarkProps) => {
                 <Text style={styles.wordmark}>Wordmark</Text>
             </View>
             {props.button && (
-                <Pressable onPress={props.func}>
-                    <View
-                        className="bg-white rounded-xl"
-                    >
-                        <Text className="px-[5%] pt-[3%] pb-[3%] ">
-                            {props.title}
-                        </Text>
-                    </View>
-                </Pressable>
+                <Button
+                    onPress={props.func}
+                    children= {props.title}
+                    variant="secondary"
+                    size="sm"
+                >
+                </Button>
+
             )}
         </View>
     );

frontend/sac-mobile/components/button.tsx

@@ -1,108 +1,59 @@
-import { DimensionValue, Pressable, StyleSheet, Text, View } from 'react-native';
 
-type ButtonProps = {
-    title: string; // text of the button
-    backgroundColor?: string; // background color
-    color?: string; // text color
-    onPress?: () => void;
-    borderColor?: string;
-    fullWidth?: boolean;
-    padding?: DimensionValue; // padding
+import { TouchableOpacity, TouchableOpacityProps, Text } from 'react-native';
+
+import { VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = {
+    variant: {
+        default: ['bg-gray-500', 'text-white'],
+        destructive: ['bg-red-500', 'text-white font-bold'],
+        secondary: ['bg-white', 'text-gray'],
+        outline: ['border border-gray-600 text-gray-500 font-medium']
+    },
+    size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-xl px-[5%]',
+        lg: 'h-12 rounded-xl px-8 py-[4%] w-[47%]',
+        icon: 'h-10 w-10',
+        screenwide: 'h-12 rounded-xl px-8 py-[4%]'
+    }
 };
 
-const Button = (props: ButtonProps) => {
-    const padding = props.padding + '%'
-    const styles = StyleSheet.create({
-        button: {
-            backgroundColor: props.backgroundColor || 'gray',
-            fontSize: 24,
-            fontWeight: 'bold',
-            borderRadius: 14,
-            width: props.fullWidth ? '100%' : '47.5%',
-            borderColor: 'black',
-        },
-        title: {
-            color: props.color || 'black',
-            textAlign: 'center',
-        },
-        border: {
-            borderWidth: 1,
-            borderColor: props.borderColor || 'gray',
-            paddingTop: props.padding || '9%',
-            paddingBottom: props.padding || '9%',
+const buttonStyles = cva(
+    ['rounded-md', 'flex', 'items-center', 'justify-center'],
+    {
+        variants: buttonVariants,
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
         }
-    });
+    }
+);
 
+export interface ButtonProps
+    extends TouchableOpacityProps,
+        VariantProps<typeof buttonStyles> {}
+
+const Button = ({ children, variant, size, ...props }: ButtonProps) => {
     return (
-        <Pressable onPress={props.onPress} style={styles.button}>
-            <View
-                className="border-1 rounded-xl"
-                style={styles.border}
+        <TouchableOpacity
+            className={cn(buttonStyles({ variant, size }), props.className)}
+            {...props}
+        >
+            <Text
+                className={cn(
+                    ...buttonVariants.variant[variant ?? 'default'],
+                    'text-center'
+                )}
             >
-                <Text className="px-[5%]" style={styles.title}>
-                    {props.title}
-                </Text>
-            </View>
-        </Pressable>
+                {children}
+            </Text>
+        </TouchableOpacity>
     );
 };
 
-export default Button;
-
-// import { Text, TouchableOpacity, TouchableOpacityProps } from 'react-native';
-
-// import { VariantProps, cva } from 'class-variance-authority';
-
-// import { cn } from '@/lib/utils';
-
-// const buttonVariants = {
-//     variant: {
-//         default: ['bg-blue-500', 'text-white'],
-//         destructive: ['bg-red-500', 'text-white font-bold'],
-//         secondary: ['bg-gray-500', 'text-white italic'],
-//         outline: ['border border-gray-500 text-gray-500 font-bold']
-//     },
-//     size: {
-//         default: 'h-10 px-4 py-2',
-//         sm: 'h-9 rounded-md px-3',
-//         lg: 'h-11 rounded-md px-8',
-//         icon: 'h-10 w-10'
-//     }
-// };
-
-// const buttonStyles = cva(
-//     ['rounded-md', 'flex', 'items-center', 'justify-center'],
-//     {
-//         variants: buttonVariants,
-//         defaultVariants: {
-//             variant: 'default',
-//             size: 'default'
-//         }
-//     }
-// );
-
-// export interface ButtonProps
-//     extends TouchableOpacityProps,
-//         VariantProps<typeof buttonStyles> {}
-
-// const Button = ({ children, variant, size, ...props }: ButtonProps) => {
-//     return (
-//         <TouchableOpacity
-//             className={cn(buttonStyles({ variant, size }), props.className)}
-//             {...props}
-//         >
-//             <Text
-//                 className={cn(
-//                     ...buttonVariants.variant[variant ?? 'default'],
-//                     'text-center'
-//                 )}
-//             >
-//                 {children}
-//             </Text>
-//         </TouchableOpacity>
-//     );
-// };
-
-// Button.displayName = 'Button';
+Button.displayName = 'Button';
 
-// export { Button, buttonVariants };
+export { Button, buttonVariants };

frontend/sac-mobile/package.json

@@ -38,6 +38,7 @@
         "react-hook-form": "^7.51.0",
         "react-native": "0.73.6",
         "react-native-cookies": "^3.3.0",
+        "react-native-element-dropdown": "^2.10.2",
         "react-native-reanimated": "^3.8.0",
         "react-native-safe-area-context": "4.9.0",
         "react-native-screens": "~3.29.0",