From 03e7e85508e434b65e70c5c0662b353b12714511 Mon Sep 17 00:00:00 2001 From: Kamogelo Moeketse Date: Sun, 30 Jun 2024 19:31:21 +0200 Subject: [PATCH] Gradient button componnet made --- .../components/GradientButton.tsx | 39 ++++++++++++ .../screens/Login/Onboarding1.tsx | 31 +--------- .../screens/Login/Onboarding2.tsx | 31 +--------- .../screens/Login/Onboarding3.tsx | 31 +--------- .../occupi-mobile4/screens/Login/SignIn.tsx | 34 +--------- .../occupi-mobile4/screens/Login/SignUp.tsx | 45 +++----------- .../screens/Login/SplashScreen.tsx | 2 +- .../occupi-mobile4/screens/Login/Welcome.tsx | 29 +-------- .../screens/Office/BookingDetails.tsx | 62 +++---------------- .../screens/Profile/Profile.tsx | 16 ++--- 10 files changed, 71 insertions(+), 249 deletions(-) create mode 100644 frontend/occupi-mobile4/components/GradientButton.tsx diff --git a/frontend/occupi-mobile4/components/GradientButton.tsx b/frontend/occupi-mobile4/components/GradientButton.tsx new file mode 100644 index 00000000..adb1f72b --- /dev/null +++ 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 ( + + + {text} + + + ) +}; + +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 \ No newline at end of file diff --git a/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx b/frontend/occupi-mobile4/screens/Login/Onboarding1.tsx index 0a5db70c..b4be21ab 100644 --- 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 }) => ( - - - {text} - - -); +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 index 605e2618..dce23b07 100644 --- 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 }) => ( - - - {text} - - -); +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 index e7c65a56..40b074c6 100644 --- 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 }) => ( - - - {text} - - -); +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 index d907d875..21df7803 100644 --- 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 }) => ( - - - {text} - - - ); - - 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 ( <> diff --git a/frontend/occupi-mobile4/screens/Login/SignUp.tsx b/frontend/occupi-mobile4/screens/Login/SignUp.tsx index ba39e64b..874d99ba 100644 --- 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 }) => ( - - - {text} - - - ); - - 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 ( <> @@ -516,6 +484,7 @@ function SignUpFormComponent() { alignItems="center" justifyContent="center" mt="$5" + mb="$8" > - + Login @@ -540,7 +509,7 @@ function SignUpFormComponent() { export default function SignUp() { return ( - + - + ); } diff --git a/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx b/frontend/occupi-mobile4/screens/Login/SplashScreen.tsx index a5350c5e..da25d77e 100644 --- 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 index fbcb82b6..06662f45 100644 --- 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 }) => ( - - - {text} - - -); +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%'), diff --git a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx index 3ce76880..559ad181 100644 --- a/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx +++ b/frontend/occupi-mobile4/screens/Office/BookingDetails.tsx @@ -24,6 +24,7 @@ import { LinearGradient } from "expo-linear-gradient"; import { useRouter, useLocalSearchParams } from 'expo-router'; import { ActivityIndicator } from 'react-native'; import * as LocalAuthentication from "expo-local-authentication"; +import GradientButton from '@/components/GradientButton'; const getTimeForSlot = (slot) => { console.log(slot); @@ -395,32 +396,10 @@ const BookingDetails = () => { - - - - Confirm booking - - - + handleBiometricAuth()} + text="Confirm booking" + /> )} @@ -480,32 +459,11 @@ const BookingDetails = () => { }} /> - {!loading ? ( onSubmit()} - > - - - Send invites - - - + {!loading ? ( + onSubmit()} + text="Send invites" + /> ) : ( { onChangeText={setPronouns} /> - - - Save - - + );