diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index 5e8131a..b26e99f 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -1,11 +1,6 @@ -import Navigation from './navigation/Navigation'; -import { StyleSheet,SafeAreaView } from 'react-native'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; -import StartNavigation from './navigation/StartNavigation'; -import { Provider, useDispatch, useSelector } from 'react-redux'; +import { StyleSheet } from 'react-native'; +import { Provider } from 'react-redux'; import store from './redux/store'; -import { useCallback, useEffect } from 'react'; -import * as SplashScreen from 'expo-splash-screen'; import AuthNavigation from './navigation/AuthNavigation'; export default function App() { diff --git a/src/FLAD/app.json b/src/FLAD/app.json index 8db8416..1cdc675 100644 --- a/src/FLAD/app.json +++ b/src/FLAD/app.json @@ -7,7 +7,7 @@ "icon": "./assets/icons/icon.png", "userInterfaceStyle": "light", "splash": { - "image": "./assets/icons/splash.png", + "image": "./assets/images/RedFlady.png", "resizeMode": "contain", "backgroundColor": "#1d2129" }, diff --git a/src/FLAD/assets/icons/icons/IconProfil.png b/src/FLAD/assets/icons/icons/IconProfil.png new file mode 100644 index 0000000..b9c6183 Binary files /dev/null and b/src/FLAD/assets/icons/icons/IconProfil.png differ diff --git a/src/FLAD/assets/icons/icons/buttonProfil.png b/src/FLAD/assets/icons/icons/buttonProfil.png new file mode 100644 index 0000000..91a7086 Binary files /dev/null and b/src/FLAD/assets/icons/icons/buttonProfil.png differ diff --git a/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png b/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png new file mode 100644 index 0000000..a9a6110 Binary files /dev/null and b/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png differ diff --git a/src/FLAD/assets/icons/icons/edit.png b/src/FLAD/assets/icons/icons/edit.png new file mode 100644 index 0000000..5f13961 Binary files /dev/null and b/src/FLAD/assets/icons/icons/edit.png differ diff --git a/src/FLAD/assets/icons/splashs.png b/src/FLAD/assets/icons/splashs.png deleted file mode 100644 index 8e0dc29..0000000 Binary files a/src/FLAD/assets/icons/splashs.png and /dev/null differ diff --git a/src/FLAD/assets/images/Flady.gif b/src/FLAD/assets/images/Flady.gif new file mode 100644 index 0000000..f61ea1b Binary files /dev/null and b/src/FLAD/assets/images/Flady.gif differ diff --git a/src/FLAD/assets/images/Flady.png b/src/FLAD/assets/images/Flady.png new file mode 100644 index 0000000..172ff00 Binary files /dev/null and b/src/FLAD/assets/images/Flady.png differ diff --git a/src/FLAD/assets/images/FladyShadow.png b/src/FLAD/assets/images/FladyShadow.png new file mode 100644 index 0000000..f4c532e Binary files /dev/null and b/src/FLAD/assets/images/FladyShadow.png differ diff --git a/src/FLAD/assets/images/RedFlady.png b/src/FLAD/assets/images/RedFlady.png new file mode 100644 index 0000000..c6c3b40 Binary files /dev/null and b/src/FLAD/assets/images/RedFlady.png differ diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 3563a05..7cf3393 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -1,5 +1,7 @@ -import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native'; +import React from 'react'; +import { StyleSheet, Text, View , Image } from 'react-native'; + +import normalize from '../components/Normalize'; type CustomCardMusic = { //Props image: ImageSource; @@ -30,8 +32,8 @@ const styles = StyleSheet.create({ marginBottom: 15 }, imageContainer: { - width: 80, - height: 80, + width: normalize(92), + height: normalize(92), alignItems: 'center', justifyContent: 'center', marginRight: 20, @@ -51,11 +53,11 @@ const styles = StyleSheet.create({ title: { fontWeight: 'bold', color: 'white', - fontSize: 20, + fontSize: normalize(23), marginBottom: 10 }, description: { color: 'white', - fontSize: 16 + fontSize: normalize(18) } }); \ No newline at end of file diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx index 49507d7..47b5bd6 100644 --- a/src/FLAD/components/NextButton.tsx +++ b/src/FLAD/components/NextButton.tsx @@ -1,11 +1,13 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { useRef, useEffect } from 'react'; import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native'; import Svg, { G, Circle } from 'react-native-svg'; import { AntDesign } from '@expo/vector-icons'; +import normalize from '../components/Normalize'; + // @ts-ignore export default function NextButton({ percentage, scrollTo }) { - const size = 128; + const size = normalize(148); const strokeWidth = 2; const center = size / 2; const radius = size / 2 - strokeWidth / 2; @@ -57,7 +59,7 @@ export default function NextButton({ percentage, scrollTo }) { CONTINUER AVEC SPOTIFY - {handleModal(); navigation.navigate('Inscription');}}> + {handleModal(); navigation.navigate('Register');}}> S’INSCRIRE MAINTENANT - + {handleModal(); navigation.navigate('Login');}}> SE CONNECTER @@ -109,7 +109,7 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - marginBottom: 50 + marginBottom: normalize(110) }, closeButtonCircle: { backgroundColor: 'gray', @@ -187,6 +187,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', position: 'absolute', - bottom: 40 + bottom: normalize(46) + }, + mascot: { + width: normalize(130), + height: normalize(130), + position: 'absolute', + bottom: normalize(140), + right: normalize(0) } }) diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx index 4038cb7..0846358 100644 --- a/src/FLAD/components/OnboardingItem.tsx +++ b/src/FLAD/components/OnboardingItem.tsx @@ -2,15 +2,15 @@ import React from 'react'; import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native'; import normalize from '../components/Normalize'; -import slides from '../data/slides'; - // @ts-ignore export default function Onboarding({ item }) { - const { width } = useWindowDimensions(); + const { width, height } = useWindowDimensions(); return ( - - + + + + {item.title} {item.description} @@ -20,9 +20,12 @@ export default function Onboarding({ item }) { const styles = StyleSheet.create({ container: { flex: 1, - marginTop: -60 + marginTop: normalize(60), + backgroundColor: '#141414' }, image: { + width: '100%', + height: '100%', justifyContent: 'center' }, title: { @@ -33,7 +36,7 @@ const styles = StyleSheet.create({ textAlign: 'left', paddingRight: 30, paddingLeft: 20, - marginTop: -80 + marginTop: normalize(30) }, description: { fontWeight: '300', diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx index d7846ab..a5d69cb 100644 --- a/src/FLAD/components/Paginator.tsx +++ b/src/FLAD/components/Paginator.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native'; +import normalize from '../components/Normalize'; export default function Paginator({ data, scrollX }) { const { width } = useWindowDimensions(); return ( - + {data.map((_, i) => { const inputRange = [(i - 1) * width, i * width, (i + 1) * width]; diff --git a/src/FLAD/navigation/FavoriteNavigation.tsx b/src/FLAD/navigation/FavoriteNavigation.tsx index f60f3ae..a2f92d0 100644 --- a/src/FLAD/navigation/FavoriteNavigation.tsx +++ b/src/FLAD/navigation/FavoriteNavigation.tsx @@ -1,15 +1,15 @@ -import React, {Component} from 'react'; -import FavoritePage from '../screens/favoritePage'; +import React from 'react'; +import Favorite from '../screens/Favorite'; import { createStackNavigator } from '@react-navigation/stack'; import { ArtistLayout } from '../components/Genre'; export default function MusicNavigation() { const Stack = createStackNavigator(); return ( - + @@ -36,7 +38,7 @@ export default function Navigation() { headerShown: false, tabBarIcon: ({color}) => , }}/> - , }}/> - , diff --git a/src/FLAD/navigation/SettingNavigation.tsx b/src/FLAD/navigation/SettingNavigation.tsx new file mode 100644 index 0000000..30142d0 --- /dev/null +++ b/src/FLAD/navigation/SettingNavigation.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Setting from '../screens/Setting'; +import SettingProfil from '../screens/SettingProfil'; +import { createStackNavigator } from '@react-navigation/stack'; + +export default function SettingNavigation() { + const Stack = createStackNavigator(); + return ( + + + + + ) + } \ No newline at end of file diff --git a/src/FLAD/navigation/StartNavigation.tsx b/src/FLAD/navigation/StartNavigation.tsx index 6104df7..99cc641 100644 --- a/src/FLAD/navigation/StartNavigation.tsx +++ b/src/FLAD/navigation/StartNavigation.tsx @@ -1,6 +1,6 @@ -import React, {Component, useCallback, useEffect} from 'react'; -import LoginPage from '../screens/loginPage'; -import InscriptionPage from '../screens/InscriptionPage'; +import React from 'react'; +import Login from '../screens/LoginPage'; +import Register from '../screens/Register'; import Onboarding from '../components/Onboarding'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; @@ -42,12 +42,12 @@ export default function StartNavigation() { /> diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 0b23cee..72ede96 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -18,11 +18,13 @@ "axios": "^1.2.6", "buffer": "^6.0.3", "expo": "~47.0.12", + "expo-asset": "^8.7.0", "expo-auth-session": "~3.8.0", "expo-av": "~13.0.3", "expo-blur": "~12.0.1", "expo-cli": "^6.3.0", "expo-haptics": "~12.0.1", + "expo-image-picker": "^14.1.1", "expo-linear-gradient": "~12.0.1", "expo-location": "~15.0.1", "expo-random": "~13.0.0", @@ -44,8 +46,7 @@ "react-native-web": "~0.18.9", "react-navigation-shared-element": "^3.1.3", "react-redux": "^8.0.5", - "redux": "^4.2.1", - "rive-react-native": "^3.0.41" + "redux": "^4.2.1" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/Favorite.tsx similarity index 94% rename from src/FLAD/screens/favoritePage.tsx rename to src/FLAD/screens/Favorite.tsx index 9ae736b..ae5965f 100644 --- a/src/FLAD/screens/favoritePage.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -1,5 +1,5 @@ -import React, {Component, useState} from 'react'; -import { Animated, Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native'; +import React, { useState} from 'react'; +import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native'; import CardMusic from '../components/CardMusic'; import normalize from '../components/Normalize'; import Music from '../Model/Music' @@ -53,7 +53,7 @@ export default function favoritePage() { // )} keyExtractor={(item: Music) => item.title } - /> + /> Tu n'as pas de compte? navigation.navigate('Inscription')} + onPress={() => navigation.navigate('Register')} > S'inscrire @@ -143,13 +143,14 @@ const styles = StyleSheet.create ({ marginBottom: 15 }, shadow: { - shadowColor: '#000', + shadowColor: 'black', shadowOffset: { width: 2, height: 3, }, shadowOpacity: 0.50, shadowRadius: 3.84, + elevation: 5 }, versionText: { position: 'absolute', @@ -185,6 +186,6 @@ const styles = StyleSheet.create ({ inscriptionText: { flexDirection: 'row', alignSelf: 'center', - bottom: '-20%' + bottom: normalize(-98) } }) \ No newline at end of file diff --git a/src/FLAD/screens/InscriptionPage.tsx b/src/FLAD/screens/Register.tsx similarity index 97% rename from src/FLAD/screens/InscriptionPage.tsx rename to src/FLAD/screens/Register.tsx index 365f255..de3e625 100644 --- a/src/FLAD/screens/InscriptionPage.tsx +++ b/src/FLAD/screens/Register.tsx @@ -1,4 +1,4 @@ -import React, {Component, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native'; import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; @@ -164,7 +164,7 @@ const scopes = scopesArr.join(' '); await getTokens(); }} style={[styles.buttonSpotify, styles.shadow]}> Lier compte - + submitForm()}> @@ -197,7 +197,7 @@ const styles = StyleSheet.create ({ width: normalize(324), height: normalize(162), alignSelf: 'center', - marginBottom: 50, + marginBottom: normalize(58), marginTop: -20 }, button: { @@ -232,7 +232,7 @@ const styles = StyleSheet.create ({ }, textIntoButton: { fontWeight: 'bold', - fontSize: 15, + fontSize: normalize(17), color: 'white', marginRight: 10 }, @@ -273,7 +273,7 @@ const styles = StyleSheet.create ({ connectionText: { flexDirection: 'row', alignSelf: 'center', - bottom: '-20%' + bottom: normalize(-98) }, buttonSpotify: { width: normalize(350), diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx new file mode 100644 index 0000000..5413573 --- /dev/null +++ b/src/FLAD/screens/Setting.tsx @@ -0,0 +1,318 @@ +import React, { useRef, useState } from 'react'; +import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native'; +import { Svg, Path } from 'react-native-svg'; +import {useNavigation} from "@react-navigation/native"; + +import normalize from '../components/Normalize'; +import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler'; +import CardMusic from '../components/CardMusic'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + +export default function Setting() { + const textInputRef = useRef(null); + const navigation = useNavigation(); + const handleSvgPress = () => { + //@ts-ignore + textInputRef.current?.focus(); + }; + + //Dark Mode + const[isCheckedDarkMode, setIsCheckedDarkMode] = useState(false); + + const toggleDarkMode = + () => setIsCheckedDarkMode(value => !value); + + + //Notification + const[isCheckedNotif, setIsCheckedNotif] = useState(false); + + const toggleNotif = + () => setIsCheckedNotif(value => !value); + + + //Localisation + const[isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); + + const toggleLocalisation = + () => setIsCheckedLocalisation(value => !value); + return ( + + + + Réglages + + + + + + + + + + + + + navigation.navigate('SettingProfil')}> + + + + Emre KARTAL + id. Spotify, mail et mot de passe + + + + + + + + + + + + + + + + Dark Mode + + + + + + + + + + + + + Notification + + + + + + + + + + + + Localisation + + + + + + + + + + + + + En cours d’écoute... + + + + + + + + + + + + + + + console.log("Tkt t deconnecter")}> + Se deconnecter + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: 30, + marginHorizontal: normalize(25), + flex: 1, + backgroundColor: '#141414', + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: 'white', + alignItems: 'center', + }, + search: { + paddingVertical: 9, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + marginTop: 9, + marginBottom: 22 + }, + inputSearch: { + placeholderTextColor:'red', + color: 'white', + width: normalize(350), + }, + profil: { + paddingVertical: 9, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + marginBottom: normalize(45) + }, + imageProfil: { + marginLeft: 15, + marginRight: 7, + width: 50, + height: 50 + }, + NameProfil: { + fontWeight: 'bold', + color: 'white', + fontSize: normalize(22) + }, + description: { + color: 'white', + fontSize: normalize(15) + }, + profilContainer: { + flex: 1, + marginLeft: 9, + alignItems: 'flex-start', + justifyContent: 'center', + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 22 + }, + body: { + paddingTop: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45), + paddingLeft: normalize(10), + }, + view: { + backgroundColor: '#fe9500', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + Option: { + flexDirection: 'row', + alignItems: 'center', + }, + secondOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + textOption: { + fontSize: normalize(18), + color: 'white', + fontWeight: 'bold', + marginBottom: normalize(8) + }, + firstOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: '#403F3F' + }, + deconnectedOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + buttonDeconectedOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeconnectionOption: { + fontSize: normalize(18), + color: '#F80404', + fontWeight: 'bold', + marginLeft: 12 + }, + notification: { + backgroundColor: '#fe3c30', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + secondOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: '#403F3F' + }, + lastOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center' + }, + localisation: { + backgroundColor: '#0835A7', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + lastOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + musicActually: { + paddingTop: normalize(17), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + titleMusic: { + flexDirection: 'row', + marginBottom: 5 + }, + mascot: { + width: normalize(90), + height: normalize(90), + position: 'absolute', + right: normalize(0), + top: normalize(10) + } + +}) \ No newline at end of file diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx new file mode 100644 index 0000000..8a61089 --- /dev/null +++ b/src/FLAD/screens/SettingProfil.tsx @@ -0,0 +1,355 @@ +import React, { useState, useRef } from 'react'; +import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native'; +import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'; +import { Svg, Path } from 'react-native-svg'; +import Modal from "react-native-modal"; +import {useNavigation} from "@react-navigation/native"; + +import normalize from '../components/Normalize'; +import * as ImagePicker from 'expo-image-picker'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + + +export default function SettingProfil() { + const [image, setImage] = useState(null); + const navigation = useNavigation(); + const [currentIndex, setCurrentIndex] = useState(0); + const [isModalVisible, setIsModalVisible] = React.useState(false); + + const handleModal = () => setIsModalVisible(() => !isModalVisible); + // @ts-ignore + const viewableItemsChanged = useRef(({ viewableItems }) => { + setCurrentIndex(viewableItems[0].index); + }).current; + + const pickImage = async () => { + // No permissions request is necessary for launching the image library + let result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }); + + console.log(result); + + if (!result.canceled) { + setImage(result.assets[0].uri); + } + }; + + return ( + + + + navigation.navigate('Setting')}> + + + Exit + + + + Profil + + {image && } + + + + + + + + + + Identifiant + + + + Mail + + + + + + + + + + + + + Modifier le mot de passe + + + + + + + + + + + + + + + + console.log("Tkt t deconnecter")}> + Supprimer le compte + + + + + + + + Annuler + + + Mot de passe + + + Modifier + + + + + + Ancien + + + + Nouveau + + + + Confirmer + + + + + Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule. + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: 20, + marginHorizontal: normalize(25), + flex: 1, + backgroundColor: '#141414', + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 5 + }, + modalContent: { + position: 'absolute', + top: '5%', + left: '-5%', + right: '-5%', + height: '100%', + backgroundColor: '#141414', + borderRadius: 12 + }, + modalView: { + flexDirection: 'row', + marginTop: 20, + marginLeft: 30, + marginBottom: normalize(45) + }, + exit: { + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center' + }, + textExit: { + fontSize: normalize(20), + color: '#454545', + fontWeight: 'bold' + }, + profilHead: { + alignItems: 'center', + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: 'white', + }, + imageWrapper: { + width: 126, + height: 126, + borderRadius: 63, + borderWidth: 3, + borderColor: 'white', + overflow: 'hidden', + marginVertical: 20, + alignItems: 'center', + justifyContent: 'center', + }, + imageProfil: { + width: 120, + height: 120, + }, + editButton: { + width: 50, + height: 50, + borderRadius: 25, + backgroundColor: '#7C7C7C', + alignItems: 'center', + justifyContent: 'center' + }, + body: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + textOption: { + fontSize: normalize(18), + color: 'white', + fontWeight: 'bold', + marginLeft: 12 + }, + deleteOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + textOptionPassword: { + fontSize: normalize(18), + color: '#1c77fb', + marginLeft: 12 + }, + buttonDeleteOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeleteOption: { + fontSize: normalize(18), + color: '#F80404', + marginLeft: 12 + }, + optionId: { + flexDirection:'row', + marginBottom: 20, + }, + optionMail: { + flexDirection:'row', + }, + textInputId: { + marginLeft: 50, + width: '57%', + color: 'white', + fontSize: normalize(18), + }, + textInputMail: { + marginLeft: 100, + color: 'white', + width: '57%', + fontSize: normalize(18) + }, + passwordOption: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + passwordIcon: { + backgroundColor: '#8e8d92', + padding: 5, + paddingHorizontal: 8, + borderRadius: 10, + marginLeft: 10 + }, + optionView: { + flexDirection: 'row', + marginTop: 5 + }, + cancelText: { + fontSize: normalize(20), + color: '#1c77fb' + }, + updateText: { + marginLeft: 60, + fontSize: normalize(20), + color: '#404040' + }, + titlePassword: { + fontSize: normalize(22), + color: 'white', + marginLeft: 50 + }, + warning: { + color: '#98989f', + fontSize: normalize(15) + }, + warningView: { + marginTop: 10, + paddingHorizontal: 40 + }, + bodyModal: { + paddingVertical: 12, + paddingLeft: 30, + marginHorizontal: normalize(25), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start' + }, + optionModalWithUnderline: { + flexDirection: 'row', + borderBottomWidth: 1, + borderColor: '#403F3F', + paddingBottom: 10, + marginBottom: 10 + }, + optionModal: { + flexDirection: 'row' + }, + textOptionModal: { + fontSize: normalize(18), + color: 'white', + fontWeight: 'bold', + }, + textInputNewModal: { + marginLeft: 40, + color: 'white', + width: '67.5%', + fontSize: normalize(18) + }, + textInputConfirmModal: { + marginLeft: 30, + color: 'white', + fontSize: normalize(18) + }, + textInputOldModal: { + marginLeft: 55, + color: 'white', + width: '67.5%', + fontSize: normalize(18) + } +}) \ No newline at end of file