Merge pull request #119 from COS301-SE-2024/chore/mobile/refactor

Gradient button component made
COS301-SE-2024 · Jun 30, 2024 · 32683bb · 32683bb
2 parents 5710071 + 03e7e85
commit 32683bb
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 249 deletions.
diff --git a/frontend/occupi-mobile4/components/GradientButton.tsx b/frontend/occupi-mobile4/components/GradientButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet } from 'react-native';
+import { Heading } from '@gluestack-ui/themed';
+import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
+
+const GradientButton = ({ onPress, text }) => {
+  return (
+  <LinearGradient
+    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
+    locations={[0.02, 0.31, 0.67, 0.97]}
+    start={[0, 1]}
+    end={[1, 0]}
+    style={styles.buttonContainer}
+  >
+    <Heading style={styles.buttonText} onPress={onPress}>
+      {text}
+    </Heading>
+  </LinearGradient>
+  )
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: 15,
+    marginTop: hp('2%'),
+    alignSelf: 'center',
+    width: wp('90%'),
+    height: hp('6%'),
+  },
+  buttonText: {
+    color: 'black',
+    fontSize: wp('4%'),
+    textAlign: 'center',
+    lineHeight: hp('6%'),
+  },
+});
+
+export default GradientButton
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding1 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding1;
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding2.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
  Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding2 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding2;
diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding3.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Onboarding3 = () => {
   return (
@@ -74,20 +60,7 @@ const styles = StyleSheet.create({
     padding: wp('4%'),
     fontWeight: '300',
     marginBottom: hp('4%'),
-  },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
+  }
 });
 
 export default Onboarding3;
diff --git a/frontend/occupi-mobile4/screens/Login/SignIn.tsx b/frontend/occupi-mobile4/screens/Login/SignIn.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, Keyboard } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
+import { Keyboard } from 'react-native';
 import { router } from 'expo-router';
 import * as LocalAuthentication from 'expo-local-authentication';
 // import CookieManager from '@react-native-cookies/cookies';
@@ -41,6 +40,7 @@ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-nat
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Logo from '../../screens/Login/assets/images/Occupi/file.png';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
+import GradientButton from '@/components/GradientButton';
 
 const signInSchema = z.object({
   email: z.string().min(1, 'Email is required').email(),
@@ -218,36 +218,6 @@ const SignInForm = () => {
     setShowPassword((showState) => !showState);
   };
 
-  const GradientButton = ({ onPress, text }) => (
-    <LinearGradient
-      colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-      locations={[0.02, 0.31, 0.67, 0.97]}
-      start={[0, 1]}
-      end={[1, 0]}
-      style={styles.buttonContainer}
-    >
-      <Heading style={styles.buttonText} onPress={onPress}>
-        {text}
-      </Heading>
-    </LinearGradient>
-  );
-
-  const styles = StyleSheet.create({
-    buttonContainer: {
-      borderRadius: 15,
-      marginTop: hp('2%'),
-      alignSelf: 'center',
-      width: wp('90%'),
-      height: hp('6%'),
-    },
-    buttonText: {
-      color: 'black',
-      fontSize: wp('4%'),
-      textAlign: 'center',
-      lineHeight: hp('6%'),
-    },
-  });
-
   return (
     <>
       <View style={{ alignItems: 'center', marginBottom: hp('2%') }}>

diff --git a/frontend/occupi-mobile4/screens/Login/SignUp.tsx b/frontend/occupi-mobile4/screens/Login/SignUp.tsx
@@ -27,16 +27,15 @@ import {
   InputSlot,
   FormControlLabel,
   FormControlLabelText,
+  View
 } from '@gluestack-ui/themed';
-
+import GradientButton from '@/components/GradientButton';
 import { Controller, useForm } from 'react-hook-form';
 import { AlertTriangle, EyeIcon, EyeOffIcon } from 'lucide-react-native';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Keyboard, StyleSheet } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
+import { Keyboard } from 'react-native';
 // import { FacebookIcon, GoogleIcon } from './assets/Icons/Social';
-import GuestLayout from '../../layouts/GuestLayout';
 import StyledExpoRouterLink from '../../components/StyledExpoRouterLink';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
@@ -115,7 +114,6 @@ const SignUpForm = () => {
           router.push({pathname:'/verify-otp', params: { email: _data.email}});
         } else {
           setLoading(false);
-          // console.log(data);
           toast.show({
             placement: 'top',
             render: ({ id }) => {
@@ -162,36 +160,6 @@ const SignUpForm = () => {
     });
   };
 
-  const GradientButton = ({ onPress, text }) => (
-    <LinearGradient
-      colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-      locations={[0.02, 0.31, 0.67, 0.97]}
-      start={[0, 1]}
-      end={[1, 0]}
-      style={styles.buttonContainer}
-    >
-      <Heading style={styles.buttonText} onPress={onPress}>
-        {text}
-      </Heading>
-    </LinearGradient>
-  );
-
-  const styles = StyleSheet.create({
-    buttonContainer: {
-      borderRadius: 15,
-      marginTop: hp('2%'),
-      alignSelf: 'center',
-      width: wp('90%'),
-      height: hp('6%'),
-    },
-    buttonText: {
-      color: 'black',
-      fontSize: wp('4%'),
-      textAlign: 'center',
-      lineHeight: hp('6%'),
-    }
-  });
-
   return (
     <>
       <VStack justifyContent="space-between">
@@ -516,6 +484,7 @@ function SignUpFormComponent() {
           alignItems="center"
           justifyContent="center"
           mt="$5"
+          mb="$8"
         >
           <Text
             color="$textLight500"
@@ -529,7 +498,7 @@ function SignUpFormComponent() {
             Have an account?
           </Text>
 
-          <StyledExpoRouterLink href="/login">
+          <StyledExpoRouterLink replace href="/login">
             <LinkText color="yellowgreen" fontSize="$sm">Login</LinkText>
           </StyledExpoRouterLink>
         </HStack>
@@ -540,7 +509,7 @@ function SignUpFormComponent() {
 
 export default function SignUp() {
   return (
-    <GuestLayout>
+    <View flex="$1" pt="$12" backgroundColor='white'>
       <Box
         sx={{
           '@md': {
@@ -555,6 +524,6 @@ export default function SignUp() {
       <Box flex={1}>
         <SignUpFormComponent />
       </Box>
-    </GuestLayout>
+    </View>
   );
 }
diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
@@ -93,7 +93,7 @@ export default function SplashScreen() {
   useEffect(() => {
     const timer = setTimeout(() => {
       setSelectedIndex(1); // Assuming Onboarding1 is at index 1
-      router.replace('/onboarding1'); // Navigate to Onboarding1 screen
+      router.replace('/signup'); // Navigate to Onboarding1 screen
     }, 5000); // 8 seconds
 
     return () => clearTimeout(timer); // Clean up timer on component unmount

diff --git a/frontend/occupi-mobile4/screens/Login/Welcome.tsx b/frontend/occupi-mobile4/screens/Login/Welcome.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { LinearGradient } from 'expo-linear-gradient';
 import {
   Image,
   Center,
@@ -9,20 +8,7 @@ import {
 import { StyleSheet, View } from 'react-native';
 import { router } from 'expo-router';
 import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
-
-const GradientButton = ({ onPress, text }) => (
-  <LinearGradient
-    colors={['#614DC8', '#86EBCC', '#B2FC3A', '#EEF060']}
-    locations={[0.02, 0.31, 0.67, 0.97]}
-    start={[0, 1]}
-    end={[1, 0]}
-    style={styles.buttonContainer}
-  >
-    <Heading style={styles.buttonText} onPress={onPress}>
-      {text}
-    </Heading>
-  </LinearGradient>
-);
+import GradientButton from '@/components/GradientButton';
 
 const Welcome = () => {
   return (
@@ -75,19 +61,6 @@ const styles = StyleSheet.create({
     fontWeight: '300',
     marginBottom: hp('6%'),
   },
-  buttonContainer: {
-    borderRadius: 15,
-    marginTop: hp('2%'),
-    alignSelf: 'center',
-    width: wp('90%'),
-    height: hp('6%'),
-  },
-  buttonText: {
-    color: 'black',
-    fontSize: wp('4%'),
-    textAlign: 'center',
-    lineHeight: hp('6%'),
-  },
   registerText: {
     fontWeight: 'bold',
     marginTop: hp('3%'),