Update style for login and signup

yorsh130204 · Feb 20, 2024 · c0eff99 · c0eff99
1 parent 5d71248
commit c0eff99
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 13 deletions.
diff --git a/sereni-app/components/LoadingPage.js b/sereni-app/components/LoadingPage.js
@@ -1,6 +1,7 @@
 // LoadingPage.js
 import React, { useEffect } from 'react';
-import { View, Image, StyleSheet } from 'react-native';
+import { View, Image, StyleSheet, Text } from 'react-native';
+import * as Animatable from 'react-native-animatable';
 import { useNavigation } from '@react-navigation/native';
 
 const LoadingPage = ({ navigation }) => {
@@ -9,15 +10,31 @@ const LoadingPage = ({ navigation }) => {
     const timeout = setTimeout(() => {
       // Navega a la página principal después de la carga
       navigation.navigate('Home');
-    }, 2500);
+    }, 4000);
 
     return () => clearTimeout(timeout); // Limpia el temporizador al desmontar el componente
   }, [navigation]);
 
   return (
     <View style={styles.container}>
-      {/* Puedes mostrar tu logo de carga o cualquier otro componente */}
-      <Image source={require('../assets/favicon.png')} style={styles.logo} />
+      {/* Logo con animación de pulso */}
+      <Animatable.Image
+        source={require('../assets/favicon.png')}
+        style={styles.logo}
+        animation="pulse"
+        easing="ease-out"
+        iterationCount="infinite"
+        duration={800}
+      />
+      {/* Texto debajo del logo con animación de pulso */}
+      <Animatable.View animation="pulse" easing="ease-out" iterationCount="infinite" duration={800}>
+        <Text 
+          style={styles.appName}
+          className="text-[#246894] text-left font-bold mt-2 mb-2"
+        >
+          SereniApp
+        </Text>
+      </Animatable.View>
     </View>
   );
 };
@@ -29,8 +46,13 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   logo: {
-    width: 200, // Ajusta el ancho según tus necesidades
-    height: 200, // Ajusta el alto según tus necesidades
+    width: 275, // Ajusta el ancho según tus necesidades
+    height: 275, // Ajusta el alto según tus necesidades
+  },
+  appName: {
+    marginTop: 50, // Ajusta el margen superior según tus necesidades
+    fontSize: 34, // Ajusta el tamaño de la fuente según tus necesidades
+    fontWeight: 'bold',
   },
 });
 

diff --git a/sereni-app/package-lock.json b/sereni-app/package-lock.json
diff --git a/sereni-app/package.json b/sereni-app/package.json
@@ -27,9 +27,11 @@
     "react-feather": "^2.0.10",
     "react-icons": "^5.0.1",
     "react-native": "0.73.4",
+    "react-native-animatable": "^1.4.0",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-hide-show-password-input": "^1.2.0",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-safe-area-context": "^4.8.2",
     "react-native-svg": "14.1.0",
     "react-native-vector-icons": "^10.0.3",

diff --git a/sereni-app/pages/LandingPage.js b/sereni-app/pages/LandingPage.js
@@ -7,6 +7,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 import { FIREBASE_AUTH } from '../firebase';
 import { signInWithEmailAndPassword } from 'firebase/auth';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import * as Animatable from 'react-native-animatable';
 
 const windowWidth = Dimensions.get('screen').width;
 const windowHeight = Dimensions.get('screen').height;
@@ -58,11 +59,11 @@ function LandingPage() {
         fill="none"
       >
         <Path
-          fill="#0B4B7D"
+          fill="#3d79a0"
           d={`M0 0h${windowWidth}v306.594c-105.105 90.314-298.103-87.185-${windowWidth} 0V0Z`}
         />
         <Path
-          fill="#0B4B7D"
+          fill="#246894"
           fillOpacity={0.5}
           d={`M${windowWidth} 5.408H0V306.71c165.105 88.377 298.103-85.314 ${windowWidth} 0V5.408Z`}
         >
@@ -76,16 +77,20 @@ function LandingPage() {
     behavior={Platform.OS === "ios" ? "padding" : "height"}
     style={{ flex: 1 }}
     >
-      <ScrollView className="bg-gray-200">
+      <ScrollView>
       <View className="items-center bg-gray-200 dark:bg-gray-800" style={{ flex: 1 }}>
         <View style={styles.containerSvg}>
             <SvgTop 
               style={{ height: windowHeight * 0.3}}
             />
-            <Image
+            <Animatable.Image
               className="absolute top-10"
               source={require('../assets/favicon.png')}
               style={{ width: 250, height: 250 }}
+              animation="pulse"
+              easing="ease-out"
+              iterationCount="infinite"
+              duration={800}
             />
         </View>
         <View className="items-center justify-center mt-4">

diff --git a/sereni-app/pages/SignUp.js b/sereni-app/pages/SignUp.js
@@ -8,6 +8,7 @@ import { FIREBASE_AUTH, FIREBASE_DB } from '../firebase';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
 import { ref, set } from 'firebase/database';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import * as Animatable from 'react-native-animatable';
 
 const windowWidth = Dimensions.get('screen').width;
 const windowHeight = Dimensions.get('screen').height;
@@ -90,11 +91,11 @@ function Signup() {
         fill="none"
       >
         <Path
-          fill="#0B4B7D"
+          fill="#3d79a0"
           d={`M0 0h${windowWidth}v306.594c-105.105 90.314-298.103-87.185-${windowWidth} 0V0Z`}
         />
         <Path
-          fill="#0B4B7D"
+          fill="#246894"
           fillOpacity={0.5}
           d={`M${windowWidth} 5.408H0V306.71c165.105 88.377 298.103-85.314 ${windowWidth} 0V5.408Z`}
         >
@@ -114,10 +115,14 @@ function Signup() {
             <SvgTop 
               style={{ height: windowHeight * 0.3}}
             />            
-            <Image
+            <Animatable.Image
               className="absolute top-10"
               source={require('../assets/favicon.png')}
               style={{ width: 250, height: 250 }}
+              animation="pulse"
+              easing="ease-out"
+              iterationCount="infinite"
+              duration={800}
             />
         </View>
         <View className="items-center justify-center mt-4">

diff --git a/sereni-app/yarn.lock b/sereni-app/yarn.lock
@@ -6489,6 +6489,13 @@ react-is@^18.1.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-native-animatable@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.4.0.tgz"
+  integrity sha512-DZwaDVWm2NBvBxf7I0wXKXLKb/TxDnkV53sWhCvei1pRyTX3MVFpkvdYBknNBqPrxYuAIlPxEp7gJOidIauUkw==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-native-elements@^3.4.3:
   version "3.4.3"
   resolved "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.4.3.tgz"
@@ -6523,6 +6530,11 @@ react-native-hide-show-password-input@^1.2.0:
     react-native-material-textfield "github:vishaljadav24/react-native-material-textfield"
     react-native-vector-icons "^7.1.0"
 
+react-native-linear-gradient@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz"
+  integrity sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==
+
 "react-native-material-textfield@github:vishaljadav24/react-native-material-textfield":
   version "0.16.1"
   resolved "git+ssh://git@github.com/vishaljadav24/react-native-material-textfield.git#e2d155446ab9057fc7bf6251492fe445d47c07c2"